Scramble Text

New

Letters shuffle through noise, then lock into place

$ npx @hritik-sharmaa/repeat-ui add text-effect-scramble-text
Category
Text Effect
Added
Nov 1, 2026
Version
1.0.0
Packages
None
Flavors
TS · JS · Tailwind · CSS
Live preview
Customize
40ms
3000ms
40px
import TextEffectScrambleText from "@/components/repeat-ui/text-effect-scramble-text/preview";

<TextEffectScrambleText text="Copy. Paste. Repeat." characters="!<>-_/[]{}=+*^?#ABCXYZ0123456789" />

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add text-effect-scramble-text --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/text-effect-scramble-text/.

    import TextEffectScrambleText from "@/components/repeat-ui/text-effect-scramble-text/preview";

export default function Page() {
  return <TextEffectScrambleText />;
}

Props

PropTypeDefaultDescriptionOptions
textstring"Copy. Paste. Repeat."The text to reveal.-
trigger"hover" | "mount" | "loop""hover"Scramble on hover, once on load, or on a loop.hover | mount | loop
speednumber40Milliseconds per frame.-
charactersstring"!<>-_/[]{}=+*^?#ABCXYZ0123456789"Characters used for the noise.-
intervalnumber3000Milliseconds between runs when looping.-
colorstring"currentColor"Text colour.-
scrambleColorstring"#fa5f1b"Colour of letters still scrambling.-
fontSizenumber40Text size in pixels.-
monobooleantrueUse a monospace font, so the width never jumps.-
classNamestring""Extra classes for the root element.-

More text effect

See all
Flipping TextText that flips between different words
Flow TextSmooth flowing text animation
Pop TextText that pops with scale animations