Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.
MANDATORY PREPARATION
Context Gathering (Do This First)
You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone (playful vs serious, energetic vs calm), and performance constraints.
Attempt to gather these from the current thread or codebase.
If you don't find
exact
information and have to infer from existing design and functionality, you MUST STOP and STOP and call the AskUserQuestionTool to clarify. whether you got it right.
Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context.
Do NOT proceed until you have answers. Guessing leads to inappropriate or excessive animation.
Use frontend-design skill
Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
Assess Animation Opportunities
Analyze where motion would improve the experience:
Identify static areas
:
Missing feedback
Actions without visual acknowledgment (button clicks, form submission, etc.)
Jarring transitions
Instant state changes that feel abrupt (show/hide, page loads, route changes)
Unclear relationships
Spatial or hierarchical relationships that aren't obvious
Lack of delight
Functional but joyless interactions
Missed guidance
Opportunities to direct attention or explain behavior
Understand the context
:
What's the personality? (Playful vs serious, energetic vs calm)
What's the performance budget? (Mobile-first? Complex page?)
Who's the audience? (Motion-sensitive users? Power users who want speed?)
What matters most? (One hero animation vs many micro-interactions?)
If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify.
CRITICAL
Respect
prefers-reduced-motion
. Always provide non-animated alternatives for users who need them.
Plan Animation Strategy
Create a purposeful animation plan:
Hero moment
What's the ONE signature animation? (Page load? Hero section? Key interaction?)
Feedback layer
Which interactions need acknowledgment?
Transition layer
Which state changes need smoothing?
Delight layer
Where can we surprise and delight?
IMPORTANT
One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
Implement Animations
Add motion systematically across these categories:
Entrance Animations
Page load choreography
Stagger element reveals (100-150ms delays), fade + slide combinations
Hero section
Dramatic entrance for primary content (scale, parallax, or creative effects)
Content reveals
Scroll-triggered animations using intersection observer
Use durations over 500ms for feedback—it feels laggy
Animate without purpose—every animation needs a reason
Ignore
prefers-reduced-motion
—this is an accessibility violation
Animate everything—animation fatigue makes interfaces feel exhausting
Block interaction during animations unless intentional
Verify Quality
Test animations thoroughly:
Smooth at 60fps
No jank on target devices
Feels natural
Easing curves feel organic, not robotic
Appropriate timing
Not too fast (jarring) or too slow (laggy)
Reduced motion works
Animations disabled or simplified appropriately
Doesn't block
Users can interact during/after animations
Adds value
Makes interface clearer or more delightful
Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right.