This demo keeps the animation exactly the same, but remixes the layout into a louder editorial playground with stacked panels, rotated labels, and oversized rhythm.
Why it pops
Big type, crisp timing, and just enough blur to make the reveal feel tactile.
Step 01
Mount the component
Drop BlurText anywhere in your JSX.
Step 02
Pick a variant
Choose fade, up, down, left, or right.
Step 03
Scroll and watch
Animation fires once as the text enters the viewport.
Variants Up + Down
Motion can strut, dip, and still stay readable.
These two variants now live inside asymmetrical poster panels so the page feels more like an artboard than a documentation column.
Variant Up
poster 01
Variant Down
poster 02
Variant Left
Words with a sidewind feel more cinematic.
This section leans into contrast: dark slab, gold signals, and a staggered prop wall that makes the documentation feel designed rather than merely arranged.
prop
blur
default:10px
prop
duration
default:0.5s
prop
delay
default:0s
prop
variant
default:fade
Lateral motion reads with confidence, especially when the rest of the layout gives it enough asymmetry to feel alive.
Variant Right
End on a flourish, not a whisper.
The final panel keeps the rightward reveal for the closing line, but reframes the call to action as a glossy, magazine-like signoff.
