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.