| Set up a consistent easing and duration token system |
Motion Design Tokens |
| Make hover, active, and focus states feel polished |
Micro-Interactions |
| Add realistic depth and shadows to cards and modals |
Elevation and Shadows |
| Animate elements in as they scroll into view |
Entrance Animations |
| Create text hierarchy with opacity and alpha |
Opacity and Visual Hierarchy |
| Know which properties are safe to animate at 60fps |
Animation Performance |
| Handle reduced motion, focus rings, and forced colors |
Accessibility and Motion |
| Apply @starting-style, @property, scroll-driven, or view transitions |
Modern CSS Craft Patterns |
| Add depth with scrolling at different speeds |
Parallax Effects |
| Create a frosted glass or blurred panel effect |
Glassmorphism and Frosted Glass |
| Apply color blending, overlays, or duotone to images |
Blend Modes and Visual Effects |
| Shape, reveal, or animate elements with clip-path |
Clip-Path and Masks |
| Create gradient text, text shadows, or knockout text |
Text Effects |
| Build card flips, perspective tilt, or 3D hover effects |
3D Transforms |
| Add springy, bouncy animations without JavaScript |
Spring Physics and Advanced Easing |
| Build skeleton loading screens and shimmer animations |
Skeleton and Loading States |
| Create mesh gradients, animated gradients, noise, or gradient borders |
Gradient Craft |
| Copy a ready-to-use token set |
Quick Reference: Recommended Defaults |
| Make components respond to their container width, not the viewport |
Container Query Craft |
| Add border beams, glows, aurora, neon, shimmer, particles, or perspective grids |
Cinematic Effects |