Frontend Ui Animator

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:

//  DO: Use transforms and opacity only