motion-blur

Animates slotted content with filter:blur + opacity + translateY, driven directly by scroll position. Three directions: in (reveals as it enters), out (blurs as it exits), and both (in and out as it crosses the viewport).

Blur in — default

Content sharpens as it scrolls into the center of the viewport. Scroll down to this demo to see it reveal.

Scroll-driven

Blur reveal

Sharpens as it enters the viewport

Blur out

Starts sharp and blurs out as it scrolls past the center of the viewport. Scroll past this demo to see the effect.

Scroll down

Disappears on exit

Blurs and fades as it leaves the viewport

Both directions

Blurs in on entry and out on exit — visible only while centered in the viewport.

"Motion that follows the scroll"

Blurs in and out as you scroll

Tuning the blur

Compare blur and y values side by side — scroll to this row to see them all reveal.

blur=3

blur=10

blur=24

Wrapping content blocks

Works around any block content. Stagger the effect naturally by giving each card a slightly higher blur value.

◆

Scroll-driven

Animation tied directly to scroll position.

◈

Zero layout shift

Animates opacity and filter only.

◉

Accessible

Respects prefers-reduced-motion.

Properties

Property	Type	Default	Description
direction	string	'in'	`'in'` — reveals on entry \| `'out'` — blurs on exit \| `'both'` — in and out
blur	number	10	Blur radius in px at the start (`in`) or end (`out`) of the scroll range
y	number	12	Vertical offset in px — shifts down on entry, up on exit
once	boolean	true	For `direction="in"`: latch at fully-visible state and stop scroll tracking. Has no effect on `out` or `both`.

Methods

Method	Type	Default	Description
replay()	void	—	Reset to initial state and re-bind scroll tracking.

Accessibility

Respects prefers-reduced-motion: content appears immediately at its final visible state with no blur or translation.