CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/scrambleshuffle-text

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.

ReactFont#scramble#shuffle#typography

Usage

import ScrambleShuffleText from '@crazygl/hero-scrambleshuffle-text';

export default function Page() {
  return (
    <ScrambleShuffleText
      phrase="CRAZYGL"
      scrambleColor="#ff5c8a"
      textColor="#ffffff"
      loop
    />
  );
}

Customise

  • Content — phrase and the alphabet of glyphs cycled during the scramble.
  • Playback — loop (replay vs. hold the final phrase) and shuffle (skip the position-shuffle phase and lock straight from scramble).
  • Timing — scrambleMs, shuffleMs, holdMs for each phase.
  • Typography — textColor, scrambleColor, fontSize, headingFontFamily, headingFontWeight.
  • Backdrop — transparentBackground and bgColor.

Best for

  • Brand wordmarks and product names that want a "decode" intro.
  • Developer-tool and terminal-flavoured landing pages.
  • Looping hero headlines where motion should feel mechanical and precise.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-scrambleshuffle-text
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 ScrambleShuffleText from '@crazygl/hero-scrambleshuffle-text';

export default function Landing() {
  return (
    <ScrambleShuffleText />
  );
}
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 ScrambleShuffleText from '@crazygl/hero-scrambleshuffle-text';

export default function Page() {
  return (
    <section>
      <ScrambleShuffleText
        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.

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.

Gradient Text

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

Text Illuminate

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

Magnet Text

Letters are pulled toward the cursor with falloff — close letters attract strongly, distant letters barely tug. Springs return them to the line.

Proximity Text FX

Letters near the cursor scale up and brighten; letters further away dim and shrink — an inverse-distance attention effect.Live customizer

Scramble Shuffle Text

Loop animationWhen off, the timeline plays once and holds the final phrase indefinitely.Shuffle phaseWhen off, letters lock straight from scramble to their target — the position shuffle is skipped.Scramble (ms)700msShuffle (ms)700msHold (ms)1800msLocked colourScramble colourFont size140pxFontWeight800Transparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.