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 'motion-components/motion-blur-in'   // just this one
import 'motion-components'               // or the whole library

<motion-blur-in intensity="12" y="8" duration="0.7">
  <h1>Headline</h1>
</motion-blur-in>

Attribute	Property	Type	Default	Description
duration	duration	number	0.7	Spring duration of the reveal animation, in seconds
intensity	intensity	number	10	Initial blur in pixels; animates to 0 on reveal
y	y	number	12	Initial vertical offset in pixels; animates to 0 on reveal
threshold	threshold	number	0.1	IntersectionObserver threshold (0–1) at which the reveal triggers
once	once	boolean	true	Animate only the first time the element enters view. Set it to "false" to replay on every entry

Trigger the blur-in entrance programmatically with play() and cancel().

Blur in from JS

–

Respects prefers-reduced-motion: content appears immediately at full opacity with no blur or translation.