Motion
Purposeful animation. Every transition communicates state change, not decoration. All
animations respect prefers-reduced-motion.
Duration
Three speeds mapped to interaction weight.
Micro
150ms
Color, opacity, border changes. Feels instant.
Standard
250ms
Position, scale, shadow transitions. The default.
Exit
200ms
Elements leaving the screen. Slightly faster than enter.
Easing
Three curves. Soft variants use overshoot-free beziers tuned for dark surfaces.
ease-out
Enter animations — fast start, soft landing.
ease-in
Exit animations — gentle start, quick end.
ease-in-out
State changes — symmetric, smooth.
Enter animations
Utility classes for elements entering the viewport.
.animate-fade-in
fade-in
.animate-scale-in
scale-in
Glow pulse
Continuous attention cue. Use sparingly — only on the primary CTA or a live indicator.
Skeleton / Loading
Shimmer animation signals content is loading. Match the shape of the content it replaces.
Motion rules
Do
- Use
ease-outfor enter,ease-infor exit - Keep durations under 300ms for UI interactions
- Use
animation-delayfor stagger in lists - Respect
prefers-reduced-motion
Don't
- Don't animate layout properties (width/height)
- Don't use glow-pulse on more than one element per view
- Don't animate color alone — pair with transform or opacity
- Don't block interaction during animation