Scramble Text

A scramble reveal: every character churns at once, then locks in from left to right while the rest keep going until the last one settles. Fires when it scrolls into view.

Installation

npx stepwise-ui add scramble-text

Default intensity is 0.45. Pass intensity={0.9} for the old storm, or speed={96} to stretch the resolve even further.

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

// Default - a softer letter decode (intensity 0.45)
<ScrambleText>Stepwise Interface Kit</ScrambleText>

// Dial up the chaos, or slow the resolve
<ScrambleText intensity={0.9} speed={42}>
  Stepwise Interface Kit
</ScrambleText>

// Binary glyph pool + replay each time it re-enters the viewport
<ScrambleText charset="01" intensity={0.7} replayInView>
  10110101
</ScrambleText>

Props

PropTypeDescription

children

string

Final resolved text.

charset

string

Glyph pool cycled before each character locks.

speed

number

Baseline frame budget per character. Default 72. Higher = longer resolve.

intensity

number

Chaos level, 0–1. 0 = subtle letter decode, 1 = aggressive symbol storm. Default 0.45.

replayInView

boolean

Replay every time it re-enters the viewport. Default false (once).

className

string

Extra classes on the root - font size, weight, color, tracking, etc. Inherited by the scramble layer.