frontend-ui-animatorlisted

# Frontend UI Animator Implement purposeful, performant animations that enhance UX without overwhelming users. Focus on key moments: hero intros, hover feedback, content reveals, and navigation transitions. ## Core Philosophy **"You don't need animations everywhere"** - Prioritize: | Priority | Area | Purpose | |----------|------|---------| | 1 | Hero Intro | First impression, brand personality | | 2 | Hover Interactions | Feedback, discoverability | | 3 | Content Reveal | Guide attention, reduce cognitive load | | 4 | Background Effects | Atmosphere, depth | | 5 | Navigation Transitions | Spatial awareness, continuity | ## Workflow Execute phases sequentially. Complete each before proceeding. ### Phase 1: Analyze 1. **Scan project structure** - Identify all pages in `app/` and components in `components/` 2. **Check existing setup** - Review `tailwind.config.ts` for existing animations/keyframes 3. **Identify animation candidates** - List components by priority category 4. **Document constraints** - Note installed animation libraries (framer-motion, etc.) Output: Animation audit table. See `references/component-checklist.md`. ### Phase 2: Plan 1. **Map animations to components** - Assign specific animation patterns 2. **Determine triggers** - Load, scroll (intersection), hover, click 3. **Estimate effort** - Low (CSS only), Medium (hooks needed), High (library required) 4. **Propose phased rollout** - Quick wins first Output: Implementation plan with component → a