Scramble Reveal
Characters cycle through random symbols before resolving to the final text on viewport entry.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| text | string | UILORA | Final text to reveal after scrambling |
| duration | number | 1.8 | Seconds to complete the full decode from left to right |
When to Use
Ideal for tech dashboards, developer tools, security-themed sites, and any headline where you want a moment of intrigue before the message lands.
Best Practices
Use short uppercase words (4-8 chars) for maximum readability during the scramble phase. Monospace font is applied automatically for stable character widths.
Why This Component Matters
The scramble-to-reveal creates anticipation and reward — the user watches chaos resolve into order, making the final word feel earned and memorable.
FAQ
QDoes it replay on scroll?
No — it fires once via IntersectionObserver when 30% of the element enters the viewport.
QDoes it need any library?
No — pure React with requestAnimationFrame. No Framer Motion dependency.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.