Text Scramble

Zenora UI

Get Started

Text Scramble·Typography

npx zenora-ui-registry@latest add text-scramble

Typography

222 views•7 uses

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx zenora-ui-registry@latest add text-scramble

Writes to components/zenora-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

A cryptographic text scramble animation that decodes character strings with configurable stagger, speed, and randomized glyph sequences.

KEY FEATURES

·Imperative handle ref controls for synchronized or staggered line-by-line animations
·Dynamic random glyph substitution with smooth character-reveal progression
·Interactive tap or click to re-trigger sequence with custom speed and character pools

Props

6 properties

scrambleSpeednumber25

Speed of individual character reshuffling.

scrambledLetterCountnumber5

Number of randomized trailing characters per word.

staggerDelaynumber50

Delay in ms between sequential lines.

backgroundcolor#ffffff

Container background color.

colorcolor#111416

Resolved text color.

scrambledColorcolor#2563eb

Highlight color for actively scrambling glyphs.