Scramble Text

ProNew

Text that cycles each character through random glyphs before settling on the final string, on mount, in view or on hover.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/scramble-text

Prop	Type	Default	Description
`children`	`string`	-	The final text.
`as`	`"span" \| "p" \| "div" \| "h1" \| "h2" \| "h3" \| "h4" \| "code"`	`"span"`	Element to render.
`trigger`	`"mount" \| "inView" \| "hover"`	`"mount"`	When to play. `hover` also plays on keyboard focus.
`duration`	`number`	`900`	Milliseconds until the last character settles.
`delay`	`number`	`0`	Milliseconds to wait before starting.
`speed`	`number`	`40`	Milliseconds between frames.
`characters`	`string`	letters, digits, symbols	Glyphs to cycle through.
`mono`	`boolean`	`false`	Use a monospace font so the width never changes.
`onComplete`	`() => void`	-	Called after the text has fully resolved.

Also accepts all <span> props except children.

Screen readers get the final text from a visually hidden copy; the animated glyphs are aria-hidden.
An invisible copy of the final text reserves the layout, so surrounding content does not shift.
Frames are written to the DOM directly, without React re-renders. Under reduced motion the final text shows immediately.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/scramble-text

Prop	Type	Default	Description
`children`	`string`	-	The final text.
`as`	`"span" \| "p" \| "div" \| "h1" \| "h2" \| "h3" \| "h4" \| "code"`	`"span"`	Element to render.
`trigger`	`"mount" \| "inView" \| "hover"`	`"mount"`	When to play. `hover` also plays on keyboard focus.
`duration`	`number`	`900`	Milliseconds until the last character settles.
`delay`	`number`	`0`	Milliseconds to wait before starting.
`speed`	`number`	`40`	Milliseconds between frames.
`characters`	`string`	letters, digits, symbols	Glyphs to cycle through.
`mono`	`boolean`	`false`	Use a monospace font so the width never changes.
`onComplete`	`() => void`	-	Called after the text has fully resolved.

Also accepts all <span> props except children.

Screen readers get the final text from a visually hidden copy; the animated glyphs are aria-hidden.
An invisible copy of the final text reserves the layout, so surrounding content does not shift.
Frames are written to the DOM directly, without React re-renders. Under reduced motion the final text shows immediately.