Motion
Animation brings interfaces to life while guiding attention and providing feedback.
Motion Principles
Purposeful
Every animation should serve a purpose — guide attention, provide feedback, or enhance understanding.
Delightful
Subtle animations add personality and make interactions feel polished and responsive.
Restrained
Don't overdo it. Too much motion is distracting and can cause accessibility issues.
Duration
Choose duration based on the size and importance of the change. Larger changes need more time.
instant0msfast150msnormal300msslow500msslower700msEasing
Easing curves define the acceleration of animations. Choose based on the animation type.
ease-outEnter animations
ease-inExit animations
ease-in-outGeneral transitions
springPlayful bounces
Common Animations
Pre-defined animation classes for common use cases. These are defined in globals.css.
animate-fade-inFade from 0 to 100% opacity
animate-fade-in-upFade in while sliding up
animate-scale-inScale from 95% to 100%
Stagger Delays
Use delay classes to create staggered entrance animations for lists.
delay-100delay-200delay-300delay-400Micro-interactions
Small, subtle animations that respond to user actions. They make interfaces feel alive.
scale-105Click to see effect
-translate-y-1Click to see effect
scale-95Click to see effect
rotate-90Click to see effect
Guidelines
- • Use animation to provide feedback
- • Keep durations under 500ms for interactions
- • Respect prefers-reduced-motion
- • Stagger list animations for polish
- • Use easing curves (never linear)
- • Animate everything — it's distracting
- • Use long animations that block users
- • Auto-play looping animations
- • Animate layout shifts unexpectedly
- • Forget about motion sensitivity