Hero made by @ybouane.

@crazygl/hero-scrambleshuffle-text

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

Demo

Scramble Shuffle Text

Install

npm install @crazygl/hero-scrambleshuffle-text

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.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.