Scramble Text

A text reveal animation where random characters scramble and resolve into the final text, triggered when the element scrolls into view.

When to Use

• Hero section stats ($1.5B, 12M+, 99.9%)
• Counter/metric displays
• Headlines that need dramatic reveal
• Any text that benefits from a "decoding" feel

Props

Usage

import ScrambleText from './ScrambleText';

<ScrambleText
  text="$1.5B"
  className="text-6xl font-extrabold text-white"
  duration={1200}
/>

How It Works

1. Element enters viewport (IntersectionObserver, threshold 0.2)
2. All characters start as random symbols from scrambleChars
3. Characters resolve left-to-right with staggered timing
4. Punctuation (., ,, $, ) resolve immediately for clean appearance
5. Uses requestAnimationFrame for smooth 60fps animation

Reference Implementation

See reference/ScrambleText.tsx for the complete component.