Motion
Blur
motionanimationfilterdepthentrance
An element transitions with a focus change — either blurring out or sharpening into clarity.
When to use
- Background content blurring when a modal/overlay is active
- Entrance animations pairing blur-in with a fade
- Depth transitions that mimic camera focus
Examples
- Page background blurring behind a modal
- Hero text animating from blur(4px) to blur(0) on load
See this in the wild
Analyze a site and look for blur in the breakdown.
