Scramble text

Installation

$ npx shadcn@latest add https://goodui.dev/r/scramble-text.json

The file lands in components/goodui/scramble-text.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/scramble-text works too.

Usage

import { ScrambleText } from "@/components/goodui/scramble-text"

export function BookingConfirmed({ reference }: { reference: string }) {
  return (
    <div className="rounded-xl border bg-card p-6 text-center">
      <p className="text-sm text-muted-foreground">Booking reference</p>
      <ScrambleText text={reference} trigger="view" className="font-mono text-2xl font-semibold tracking-widest" />
    </div>
  )
}

When to use

Examples

const [run, setRun] = React.useState(0)

<ScrambleText text="sk_live_••••4f2a" trigger="manual" replay={run} className="font-mono" />
<button onClick={() => setRun((n) => n + 1)}>Regenerate key</button>

<a href="/docs" className="font-mono text-sm uppercase">
  <ScrambleText text="Documentation" trigger="hover" duration={600} />
</a>

API reference

Accessibility

• •The real text is always in an sr-only span; the scrambling copy is aria-hidden, so screen readers never read random glyphs.
• •The real text is rendered on the server and before the first run; randomness only happens after mount, so there is no hydration mismatch.
• •trigger="hover" also plays on keyboard focus: the span itself is not focusable, so it listens to its closest link, button or [tabindex] ancestor (focus and pointer enter). Put it inside a link or button for keyboard users to get the same effect.

Motion

• •Characters resolve left to right over `duration` ms (900); the unresolved tail re-rolls random glyphs every `speed` ms (45). Spaces are kept.
• •The unresolved part is the current color at 60% opacity, so it keeps contrast on muted or tinted backgrounds (override with scrambledClassName).
• •Reduced motion: no scramble; the real text is shown and onComplete is not called.

• •Uses requestAnimationFrame for at most `duration` ms per run and cancels on unmount; nothing runs between plays.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related