Docs·Scramble Text

Scramble Text

A stable typewriter reveal with a short scrambling edge, refined caret presets, and imperative replay controls.

Installation

$pnpm dlx shadcn@latest add @spiderui/scramble-text

Usage

API Reference

PropTypeDefault
textText revealed from left to right.
string—
scrambleSpeedMilliseconds between revealed characters.
number50
scrambledLetterCountNumber of scrambled characters shown at the reveal edge.
number2
charactersCharacter set used for the scrambled edge.
stringLowercase letters and symbols
caretCustom caret content. Passing it automatically uses custom mode.
React.ReactNode—
caretVariantBuilt-in caret treatment.
"line" | "block" | "underscore" | "custom" | "none""line"
showCaretShow or remove the caret.
booleantrue
blinkCaretApply a pulse animation to the caret.
booleantrue
hideCaretOnCompleteHide the caret when every character is revealed.
booleanfalse
autoStartStart automatically after mounting.
booleantrue
delayDelay before auto-starting, in milliseconds.
number0
scrambledClassNameClasses applied to the scrambled edge.
string—
revealedClassNameClasses applied to revealed text.
string—
caretClassNameClasses applied to the caret.
string—
onStart / onCompleteLifecycle callbacks for the reveal animation.
() => void—
refExposes start() and reset() controls.
ScrambleTextHandle—
classNameAdditional classes applied to the root span.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
Ignoring all bugsIgnoring all bugs
import { ScrambleText } from "@/components/ui/scramble-text"
export function Demo() {
  return (
    <ScrambleText
      text="Ignoring all bugs"
      scrambleSpeed={70}
      scrambledLetterCount={2}
      caretVariant="line"
      scrambledClassName="text-orange-400"
    />
  )
}