motion-blur-in
Viewport-triggered blur reveal. Starts blurred and translated, snaps to focus once the element enters the viewport.
Preview
Scroll to reveal
Usage
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| | number | 0.7 | Spring duration of the reveal animation, in seconds |
| | number | 10 | Initial blur in pixels; animates to 0 on reveal |
| | number | 12 | Initial vertical offset in pixels; animates to 0 on reveal |
| | number | 0.1 | IntersectionObserver threshold (0–1) at which the reveal triggers |
| | boolean | true | Animate only the first time the element enters view |
Accessibility
Respects prefers-reduced-motion: content appears immediately at full opacity with no blur or translation.