PParable
All components

Text Scramble

Text Animations

Resolves a string out of random glyphs left-to-right, each character flickering through a short scramble tail before it locks and settles from a brand accent to the inherited color. Triggers on view, mount, or hover; renders the final text statically under reduced-motion.

Inspired by Cult Pro — text effects (pattern) — independently built, not affiliated. Attribution policy

DECODING SIGNAL

Reality, rebuilt from noise

hover to re-scramble

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/text-scramble.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/text-scramble.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="flex w-full flex-col items-center justify-center gap-6 rounded-2xl bg-[#0f0f10] px-8 py-14 text-center">
    <div className="flex items-center gap-2 text-[10px] font-medium uppercase tracking-[0.25em] text-white/40">
      <Terminal className="size-3.5 text-[#22d3ee]" aria-hidden />
      <TextScramble text="DECODING SIGNAL" trigger="mount" speed={0.9} />
    </div>
    <TextScramble
      as="h3"
      text="Reality, rebuilt from noise"
      trigger="mount"
      speed={1.1}
      className="max-w-[16ch] text-2xl font-semibold tracking-tight text-white"
    />
    <TextScramble
      text="hover to re-scramble"
      trigger="hover"
      className="cursor-default font-mono text-xs text-white/50"
    />
  </div>

Props

TextScrambleProps extends Omit<React.HTMLAttributes<HTMLElement>, "children">

PropTypeDefaultDescription
text*string—The string that resolves out of the glyph noise.
trigger"mount" | "view" | "hover""view"When the decode fires. `"view"` plays once on scroll-in, `"mount"` plays once after hydration, `"hover"` replays on each pointer-enter / focus.
speednumber1Speed multiplier — 2 runs twice as fast, 0.5 half.
scrambleCharsstringDEFAULT_CHARSCharacters the scramble draws from.
colorstring"#22d3ee"Tint for characters still scrambling; they settle to the inherited color. Mirrors `--pb-cyan`.
asReact.ElementType—Element to render as. Defaults to `span`.