Scramble Text

Use it like any other component. Choose a theme with preset; any prop you pass as well overrides the preset.

import { ScrambleText } from '@/components/effects/scramble-text/scramble-text'

export function Hero() {
  return (
    <>
      {/* Decodes when it scrolls into view, once */}
      <ScrambleText as="h1" preset="Editorial" trigger="view" size={72}>
        Meaning finds its place.
      </ScrambleText>

      {/* Typewriter with a caret, in the surrounding font and colour */}
      <ScrambleText as="p" mode="type" font="inherit" color="inherit" accent="#e0562e">
        Built in the open, shipped on Fridays.
      </ScrambleText>

      {/* Hover any word to shuffle it, with your own glyphs */}
      <ScrambleText as="h2" mode="shuffle-on-hover" glyphs="·•◦○" trigger="none">
        Hover these words
      </ScrambleText>
    </>
  )
}

// Imperative replay, and a callback when it has settled:
//   const ref = useRef<ScrambleTextHandle>(null)
//   <ScrambleText ref={ref} onDone={() => console.log('resolved')}>Hello</ScrambleText>
//   <button onClick={() => ref.current?.replay()}>Replay</button>
// The stage above is <ScrambleTextShowcase />, also exported, if you want the same specimen page.

<ScrambleText preset="Editorial" mode={"decode"} />

• Terminal
• Editorial
• Neon
• Mono
• Gold

What the command adds to your project, and where.

• components/effects/scramble-text/scramble-text.tsx

  The component.

• components/effects/scramble-text/text.tsx

  The component.

• components/effects/scramble-text/showcase.tsx

  The component.

• components/effects/scramble-text/engine.ts

  The component.

• components/effects/scramble-text/look.ts

  The component.

• components/effects/scramble-text/styles.ts

  The component.

• components/effects/scramble-text/stage-styles.ts

  The component.

• lib/effect-runtime.ts

  Shared by every shader effect: resizing, pausing, reduced motion, context loss and the no-WebGL fallback. Installed once.

• The real text is always in the DOM. A visually hidden copy carries it for screen readers (headings also get an aria-label); the letters you see are aria-hidden. Selecting and copying gets the real text.
• Server and first client render show the settled text, so there is no hydration mismatch. With trigger 'mount' or 'view' the text is held back until it plays (and appears by itself after a moment if scripts never run); with 'hover' or 'none' it simply sits there.
• Every letter is a cell with the width of its real glyph; the scrambling glyph floats centred inside it. The line, its wrapping and the page never move while a word resolves. Narrow letters scramble through narrow marks.
• One requestAnimationFrame loop per instance, running only while letters are moving. It changes a data attribute when a letter changes state and a glyph when it swaps: no layout reads, no layout-affecting writes.
• Modes: decode sweeps left to right behind a soft band of noise, random locks letters in random order, wave follows a sine ripple, type is a typewriter with a blinking caret, and shuffle-on-hover re-scrambles the word under the pointer (or finger) and resolves it again.
• Triggers: on mount, on entering the viewport (once or every time, with once={false}), on hover, or only through ref.replay(). Changing mode, glyphs, duration, stagger or delay plays it again.
• Under prefers-reduced-motion the text just shows, replay() resolves immediately and the caret stays out of sight.

See all effects