frontend-ui-animator

"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 |

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 → animation mapping.

Phase 3: Implement

1. Extend Tailwind config - Add keyframes and animation utilities
2. Add reduced-motion support - Accessibility first
3. Create reusable hooks - useScrollReveal, useMousePosition if needed
4. Apply animations per component - Follow patterns in references/animation-patterns.md

Performance rules:

```tsx

// ✅ DO: Use transforms and opacity only

transform: translateY(20px);

opacity: 0.5;

filter: blur(4px);

// ❌ DON'T: Animate layout properties

margin-top: 20px;

height: 100px;

width: 200px;

```

Phase 4: Verify

1. Test in browser - Visual QA all animations
2. Test reduced-motion - Verify prefers-reduced-motion works
3. Check CLS - No layout shifts from animations
4. Performance audit - No jank on scroll animations

Animation Triggers

| Trigger | Implementation |

|---------|----------------|

| Page load | CSS animation with animation-delay for stagger |

| Scroll into view | IntersectionObserver or react-intersection-observer |

| Hover | Tailwind hover: utilities or CSS :hover |

| Click/Tap | State-driven with useState |

Common Patterns

Staggered children:

```tsx

{items.map((item, i) => (