Blur Reveal Hero Text

A per-character blur-in text reveal that plays once on scroll-into-view, with tunable blur, delay, and duration ranges.

A per-character blur reveal animation. Characters start at randomized blur/offset timings and resolve crisply as the section enters the viewport. Line breaks (\n) are respected, spaces aren’t blurred, and an initial placeholder prevents layout shift.

Behavior

  • Plays once when any part of the block becomes visible.
  • Uses seeded randomness so the distribution of blur/delay/duration is stable for the same text.
  • Preserves line breaks (split by \n) and avoids blurring spaces to keep spacing natural.
  • Renders an invisible placeholder on mount to avoid layout jump, then animates.

Props

  • text — string to reveal (supports \n for multiple lines).
  • className — extra classes on the wrapper.
  • minBlurPx / maxBlurPx — blur range (px) for the initial state (defaults 2 / 18).
  • minDelay / maxDelay — per-character start delay range (s) (defaults 0 / 1).
  • minDur / maxDur — per-character animation duration range (s) (defaults 0.1 / 1).
Mars ain't the kind of place to raise your kids. In fact, it's cold as hell. And there's no one there to raise them if you did. And all the science, I don't understand. It's just my job five days a week. I'm a rocket man. A rocket man.

Cascading Hero Text

A cinematic, per-character slide-and-rise hero title- the first letter pops, there’s a brief pause, then the rest cascade while the whole word glides in from the right.

404 Page

A creative 404 page component inspired by the classic bouncing DVD player screensaver. Supports "contained" and "page" modes, with `squareSize` (px) and `colors` (hex array).