BlurReveal

Scroll-triggered reveal animation that transitions children from blurred to clear with staggered delays.

Basic Usage

Each direct child element animates in sequence when scrolled into view.

This paragraph fades in after the heading, with a slight delay.

And this one follows with another staggered delay.

Slower animation with a larger stagger between children.

Duration is 1.5s with 0.4s stagger between elements.

The effect is more dramatic with longer timings.

Increased blur and vertical offset for a more dramatic entrance.

40px blur with 40px vertical offset makes the reveal much more pronounced.

Great for hero sections and landing pages.

Works with any elements, including a grid of cards.

Beautiful interfaces built with care.

Clean code that scales with your needs.

Ship fast with confidence and reliability.