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) => (

${i * 100}ms }} className="animate-fade-slide-in" /> ))}

Scroll reveal hook:

const useScrollReveal = (threshold = 0.1) => { const ref = useRef(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();

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; } }

frontend-ui-animator

安装