Premium & Brand

Scramble Text

Resolves a phrase by cycling random glyphs until it locks in.

Import

tsx

import { ScrambleText } from "@cronus-ui/ui";

bash

npx cronus-ui add scramble-text

Random glyphs lock in left-to-right. Assistive tech gets the resolved phrase immediately.

tsx

<ScrambleText className="font-display text-3xl text-fg">cronus-ui</ScrambleText>

Generated from the component's exported types.

Extends Omit<HTMLAttributes<HTMLSpanElement>, "children">

Prop	Type	Default	Description
`ref`	`Ref<HTMLSpanElement>`	—	—
`children`*	`string`	—	The phrase to resolve to.
`speed`	`number`	`40`	Milliseconds between scramble ticks.
`ticksPerGlyph`	`number`	`4`	How many ticks each glyph stays scrambled before locking.
`charset`	`string`	`DEFAULT_CHARSET`	Glyphs used while scrambling. Defaults to a Latin + digit set.
`reducedMotion`	`ScrambleTextMotionPreference`	`"respect"`	How `prefers-reduced-motion` is honoured. Defaults to `"respect"` (show the resolved phrase immediately).