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
Hover to see easing
ease-inExit animations
Hover to see easing
ease-in-outGeneral transitions
Hover to see easing
springPlayful bounces
Hover to see easing
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.
hover:scale-105Card/button hover
hover:-translate-y-1Lift on hover
active:scale-95Button press
hover:rotate-90Icon rotation
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