animate

Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.

Implementation Default

Default to Tailwind CSS for styling and state transitions unless the user explicitly requests another styling approach.

For motion that depends on multiline text size (expands/collapses, adaptive cards, staged reveals), use

@chenglou/pretext

in JS/TS stacks to pre-measure text and avoid janky transitions from unpredictable wrapping.

Allowed component/motion reference sources:

UIverse
FlyonUI (
```
https://flyonui.com/
```
)
daisyUI

When using library components, re-choreograph states and transitions so the result is context-specific rather than stock.

If the target is static HTML/CDN-only or has no JS build pipeline, skip pretext integration and use responsive CSS sizing/constraints for stable motion behavior. Do this silently and avoid user-facing "Note on Pretext" caveats unless explicitly requested.

MANDATORY PREPARATION

Use the frontend-design skill — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run teach-impeccable first. Additionally gather: performance constraints.

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, ask the user directly to clarify what you cannot infer.

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.

Motion Library Expansion (Required)

Treat motion choices as a large pattern space, not a short list of default fades.

Before implementation, build a

MOTION_INDEX

with broad options across:

entrance families
feedback families
transition families
scroll choreography families
celebratory/delight families

Rules:

choose materially different animation families across sections (not the same fade/slide everywhere)
create at least
```
2 bespoke motion patterns
```
per substantial animation pass
if a motion idea feels like a common preset, mutate timing, sequencing, layering, or trigger logic until it becomes specific to the interface

Motion Diversity Quotas (Required)

For substantial animation passes, enforce:

at least
```
5
```
distinct motion families in one interface
at least
```
3
```
distinct trigger types (hover, scroll, state, gesture-like, timed)
at least
```
2
```
bespoke transition systems beyond simple fade/slide
no single easing/timing combo reused as the dominant pattern across all sections

If motion feels repetitive, redesign the choreography before final output.

Anti-AI Motion Gate (Required)

Reject motion output if it feels like stock presets layered on top.

Failure cases:

majority of elements use the same fade-up with stagger
hover states are mostly scale(1.02) + shadow without context
transitions are decorative but do not improve comprehension
motion does not differentiate section roles

Minimum bar:

each major section gets a motion behavior tied to its semantic job
at least
```
2
```
custom motion recipes (timing + trigger + sequence) invented for the current brief
reduced-motion path remains purposeful, not just globally disabled

Giant Motion Catalog (Reference)

Use and mutate from this broader catalog:

reveal ladders
clipped mask transitions
directional content handoffs
stage pin/unpin sequences
guided focus sweeps
progressive detail unlocks
magnetic hover fields
momentum list transitions
stateful icon metamorphosis
layered depth drifts
micro celebratory bursts
rail-based motion narratives

Always adapt these to context; never paste as-is.

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
Modal/drawer entry: Smooth slide + fade, backdrop fade, focus management

Micro-interactions

Button feedback:
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
- Click: Quick scale down then up (0.95 -> 1), ripple effect
- Loading: Spinner or pulse state
Form interactions:
- Input focus: Border color transition, slight scale or glow
- Validation: Shake on error, check mark on success, smooth color transitions
Toggle switches: Smooth slide + color transition (200-300ms)
Checkboxes/radio: Check mark animation, ripple effect
Like/favorite: Scale + rotation, particle effects, color transition

State Transitions

Show/hide: Fade + slide (not instant), appropriate timing (200-300ms)
Expand/collapse: Height transition with overflow handling, icon rotation
Loading states: Skeleton screen fades, spinner animations, progress bars
Success/error: Color transitions, icon animations, gentle scale pulse
Enable/disable: Opacity transitions, cursor changes

Navigation & Flow

Page transitions: Crossfade between routes, shared element transitions
Tab switching: Slide indicator, content fade/slide
Carousel/slider: Smooth transforms, snap points, momentum
Scroll effects: Parallax layers, sticky headers with state changes, scroll progress indicators

Feedback & Guidance

Hover hints: Tooltip fade-ins, cursor changes, element highlights
Drag & drop: Lift effect (shadow + scale), drop zone highlights, smooth repositioning
Copy/paste: Brief highlight flash on paste, "copied" confirmation
Focus flow: Highlight path through form or workflow

Delight Moments

Empty states: Subtle floating animations on illustrations
Completed actions: Confetti, check mark flourish, success celebrations
Easter eggs: Hidden interactions for discovery
Contextual animation: Weather effects, time-of-day themes, seasonal touches

Technical Implementation

Use appropriate techniques for each animation:

Timing & Easing

Durations by purpose:

100-150ms: Instant feedback (button press, toggle)
200-300ms: State changes (hover, menu open)
300-500ms: Layout changes (accordion, modal)
500-800ms: Entrance animations (page load)

Easing curves (use these, not CSS defaults):

css

/* Recommended - natural deceleration */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* Smooth, refined */
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);   /* Slightly snappier */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* Confident, decisive */

/* AVOID - feel dated and tacky */
/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */

Exit animations are faster than entrances. Use ~75% of enter duration.

CSS Animations

css

/* Prefer for simple, declarative animations */
- transitions for state changes
- @keyframes for complex sequences
- transform + opacity only (GPU-accelerated)

JavaScript Animation

javascript

/* Use for complex, interactive animations */
- Web Animations API for programmatic control
- Framer Motion for React
- GSAP for complex sequences

Performance

GPU acceleration: Use
```
transform
```
and
```
opacity
```
, avoid layout properties
will-change: Add sparingly for known expensive animations
Reduce paint: Minimize repaints, use
```
contain
```
where appropriate
Monitor FPS: Ensure 60fps on target devices
Pre-measure text where needed: Use
```
@chenglou/pretext
```
to compute expected text heights in advance for smoother state transitions

Accessibility

css

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

NEVER:

Use bounce or elastic easing curves-they feel dated and draw attention to the animation itself
Animate layout properties (width, height, top, left)-use transform instead
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.