🇺🇸English
Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.
MANDATORY PREPARATION
Invoke /frontend-design — 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.
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):
/* 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
/* Prefer for simple, declarative animations */
- transitions for state changes
- @keyframes for complex sequences
- transform + opacity only (GPU-accelerated)
JavaScript Animation
/* 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
Accessibility
@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.
Weekly Installs
27.3K
Repository
pbakaus/impeccable
GitHub Stars
13.0K
First Seen
Mar 4, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex26.7K
opencode26.5K
github-copilot26.5K
gemini-cli26.5K
cursor26.5K
kimi-cli26.4K
