motion-blur-in
Viewport-triggered blur reveal. Starts blurred and translated, snaps to focus once the element enters the viewport.
Preview
Scroll to reveal
Import
Usage
Properties
| Attribute | 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.