Text Scramble

Text animation that transforms text by randomly cycling through characters before settling on the final content, creating an engaging cryptographic effect.

Text Scramble

Text animation that transforms text by randomly cycling through characters before settling on the final content, creating an engaging cryptographic effect.

Examples

Text Scramble Basic

Text Scramble

Text Scramble with custom trigger

Tyler, The Creator - I Hope You Find Your Way Home

Text Scramble with custom character and duration

Generating the interface...

Installation

npx shadcn@latest add "https://components.dylanwlim.com/c/text-scramble.json"

Component API

TextScramble

Prop	Type	Default	Description
children	string		The text content to be animated.
as	keyof JSX.IntrinsicElements	'p'	The HTML tag to render, defaults to paragraph.
duration	number	0.8	Duration of the effect.
speed	number	0.04	Speed of the effect.
characterSet	string	ABCDEF...z0123456789	Set of characters for the scramble effect
className	string	undefined	Optional CSS class for styling the component.
trigger	boolean	undefined	Controls whether the animation should be triggered.
onScrambleComplete	() => void	undefined	Callback function when the animation completes.

Text Roll Text Shimmer

On This Page

Text Scramble Examples Text Scramble Basic Text Scramble with custom trigger Text Scramble with custom character and duration Installation Component API TextScramble

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.