CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/textscrambler

Text Scrambler

Heading that scrambles into glyph soup and resolves left-to-right into the target phrase — a hacker-decode reveal that rotates through several phrases.

ReactFont#scramble#decode#typography

Usage

import TextScrambler from '@crazygl/hero-textscrambler';

<TextScrambler
  phrases={`DECODE THE FUTURE\nBUILD WHAT MATTERS`}
  revealSpeed={22}
  holdDuration={1800}
/>

Customise

  • Content: phrases (one per line, cycled in order), alphabet (the glyphs used for scrambling).
  • Timing: holdDuration (ms the resolved phrase stays), revealSpeed (chars/second the decode advances).
  • Typography: textColor (locked chars), scrambleColor (still-scrambling chars), fontSize, headingFontFamily, headingFontWeight.
  • Backdrop: transparentBackground, bgColor.

Best for

  • Hero headlines that want a terminal / cyberpunk decode feel.
  • Rotating value props or taglines that cycle through several lines.
  • Product launches and dev-tool sites leaning on a monospace, hacker aesthetic.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-textscrambler
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import TextScrambler from '@crazygl/hero-textscrambler';

export default function Landing() {
  return (
    <TextScrambler />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import TextScrambler from '@crazygl/hero-textscrambler';

export default function Page() {
  return (
    <section>
      <TextScrambler
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Scrambly Text

Heading scrambled into random glyphs that resolve in a non-left-to-right order — characters lock in scattered across the word.

Scramble Shuffle Text

A hybrid: letters first scramble into random glyphs, then physically shuffle position, then settle into their target — two effects in one timeline.

Gradient Text

Heading filled with a slowly drifting multi-stop linear gradient — three configurable colours, customizable angle, optional animation.

Text Reveal

Heading wiped in from a single direction via a hard clip-path mask, with a small per-letter delay — the foundational reveal everyone needs.

Text Illuminate

A spotlight follows the cursor across the heading — letters under the beam glow and brighten, the rest fall into shadow.

Text Masking

Headline acts as a window onto a slowly drifting photograph — large letterforms, the photograph showing through them, a clean colored hero around the cut-out.Live customizer

Text Scrambler

Hold (ms)1800msReveal speed (chars/s)22Locked colourScramble colourFont size92pxFontWeight700Transparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.