Text Scramble Pro React component
Cycling phrases that decrypt from scrambled characters into readable text, left-to-right, right-to-left, or random reveal order, with a scramble-out transition and blinking cursor.
About the Text Scramble Pro component
Text Scramble Pro is a free decoding effect for rotating taglines. Each phrase starts as random symbols that resolve character by character into the real text, holds, scrambles back out and hands over to the next phrase, with a blinking cursor at the end.
Pass phrases, then set revealMode (left-to-right, right-to-left or random), framesPerChar (animation frames per character, default 10), holdDuration and pauseDuration in milliseconds, and scrambleOut, loop and showCursor. fontColor colors resolved letters and scrambleColor the random ones. fontFamily defaults to a monospace stack so the width does not jump. The font shrinks automatically so the longest phrase fits the container width minus padding.
When to use it
Use it for security, AI and developer-tool heroes, product taglines and terminal-style intros that rotate between two and five short phrases.
For a one-time, word-by-word reveal of a sentence as it scrolls into view, use Word Reveal.
Installation
Add the Text Scramble Pro component to your project with the shadcn CLI. It lands in components/text-scramble-pro.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/text-scramble-proOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<TextScramblePro /> accepts 19 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| phrases | string[] | DEFAULT_PHRASES |
| fontSize | number | 32 |
| fontWeight | number | 400 |
| letterSpacing | number | 0.04 |
| fontColor | string | "#ffffff" |
| scrambleColor | string | "#555555" |
| framesPerChar | number | 10 |
| holdDuration | number | 2200 |
| pauseDuration | number | 400 |
| fontFamily | string | '"Courier New", Courier, monospace' |
| textAlign | "left" | "center" | "right" | "center" |
| background | string | "transparent" |
- phrasesstring[]Default: DEFAULT_PHRASES
- fontSizenumberDefault: 32
- fontWeightnumberDefault: 400
- letterSpacingnumberDefault: 0.04
- fontColorstringDefault: "#ffffff"
- scrambleColorstringDefault: "#555555"
- framesPerCharnumberDefault: 10
- holdDurationnumberDefault: 2200
- pauseDurationnumberDefault: 400
- fontFamilystringDefault: '"Courier New", Courier, monospace'
- textAlign"left" | "center" | "right"Default: "center"
- backgroundstringDefault: "transparent"
Show all 19 propsShow fewer
| padding | number | 40 |
| revealMode | "left-to-right" | "right-to-left" | "random" | "left-to-right" |
| scrollTrigger | boolean | false |
| scrambleOut | boolean | true |
| loop | boolean | true |
| showCursor | boolean | true |
| fadeInDuration | number | 600 |
- paddingnumberDefault: 40
- revealMode"left-to-right" | "right-to-left" | "random"Default: "left-to-right"
- scrollTriggerbooleanDefault: false
- scrambleOutbooleanDefault: true
- loopbooleanDefault: true
- showCursorbooleanDefault: true
- fadeInDurationnumberDefault: 600
Collections
Use-case pages that compare Text Scramble Pro with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Text Scramble Pro FAQ
- Can it wait until it is scrolled into view?
- Yes. With scrollTrigger it waits until 25% of the element is visible, then fades in over fadeInDuration and starts. Without it, it starts right after mount.
- How do I play the phrases once and stop?
- Set loop={false} and scrambleOut={false}, and the last phrase stays readable. With scrambleOut on, the final phrase scrambles out before the animation stops.
- Is it accessible?
- Characters change every frame, and there is no live region or hidden label, so screen readers read whatever symbols are on screen. Keep important copy in regular text nearby and treat the effect as decoration.
- Why is the text smaller on mobile?
- It measures the longest phrase at fontSize and scales the size down when that phrase would be wider than the container minus padding on each side (default 40px).
