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
-
Scan project structure - Identify all pages in app/ and components in components/
-
Check existing setup - Review tailwind.config.ts for existing animations/keyframes
-
Identify animation candidates - List components by priority category
-
Document constraints - Note installed animation libraries (framer-motion, etc.)
Output: Animation audit table. See references/component-checklist.md .
Phase 2: Plan
-
Map animations to components - Assign specific animation patterns
-
Determine triggers - Load, scroll (intersection), hover, click
-
Estimate effort - Low (CSS only), Medium (hooks needed), High (library required)
-
Propose phased rollout - Quick wins first
Output: Implementation plan with component → animation mapping.
Phase 3: Implement
-
Extend Tailwind config - Add keyframes and animation utilities
-
Add reduced-motion support - Accessibility first
-
Create reusable hooks - useScrollReveal , useMousePosition if needed
-
Apply animations per component - Follow patterns in references/animation-patterns.md
Performance rules:
// ✅ 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
-
Test in browser - Visual QA all animations
-
Test reduced-motion - Verify prefers-reduced-motion works
-
Check CLS - No layout shifts from animations
-
Performance audit - No jank on scroll animations
Quick Reference
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:
{items.map((item, i) => (
<div
key={item.id}
style={{ animationDelay: ${i * 100}ms }}
className="animate-fade-slide-in"
/>
))}
Scroll reveal hook:
const useScrollReveal = (threshold = 0.1) => { const ref = useRef<HTMLDivElement>(null); const [isVisible, setIsVisible] = useState(false);
useEffect(() => { const observer = new IntersectionObserver( ([entry]) => entry.isIntersecting && setIsVisible(true), { threshold } ); if (ref.current) observer.observe(ref.current); return () => observer.disconnect(); }, [threshold]);
return { ref, isVisible }; };
Usage:
const { ref, isVisible } = useScrollReveal(); <div ref={ref} className={isVisible ? 'animate-fade-in' : 'opacity-0'} />
Resources
-
Animation patterns: See references/animation-patterns.md
-
Audit template: See references/component-checklist.md
-
Tailwind presets: See references/tailwind-presets.md
Technical Stack
-
CSS animations: Default for simple effects
-
Tailwind utilities: For hover states and basic animations
-
Framer Motion: For complex orchestration, gestures, layout animations
-
GSAP: For timeline-based sequences (if already installed)
Accessibility (Required)
Always include in global CSS:
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }