ScrambledText
scrambled-textTemporarily scrambles characters before resolving the original text.
Usage
Basic usage
Move the pointer over the text, and the characters within the radius will roll over one by one into garbled characters and then converge back to the original characters.
<ScrambledText>
Move the pointer over this text — Hover scrambles the glyphs.
</ScrambledText>Effective radius
radius controls how close the pointer is to the characters in px before triggering the roll. The larger the pointer, the wider the range.
<ScrambledText radius={160}>
HULIAN UI · Scramble On Hover
</ScrambledText>Custom character set
scrambleChars Determine the characters used for random replacement during the garbled process, and replace them with full-width block characters for a more deconstructed feel.
<ScrambledText scrambleChars="█▓▒░">
HULIAN UI · Scramble On Hover
</ScrambledText>Fast convergence
When speed is turned up and duration is turned down, the garbled characters flash faster and the words return more rapidly, like binary decay.
<ScrambledText duration={0.6} speed={0.9} scrambleChars="01">
0101 binary decay 1010
</ScrambledText>When to use
Use ScrambledText when moving the pointer across a title or subtitle should make nearby glyphs scramble and then resolve. Use FuzzyText for a persistent pixel-noise texture, or ScrollFloat and Reveal for entrance animations. ScrambledText keeps the final copy readable and limits the effect to characters inside the pointer radius.
Import
import { ScrambledText } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| radius | number | 100 | Pointer radius in px. A character scrambles only when its center falls within this radius. |
| duration | number | 1.2 | Maximum scramble duration per character in seconds; characters nearer the pointer approach this value. |
| speed | number | 0.5 | Replacement speed from 0–1; higher values change glyphs more frequently and resolve faster. |
| scrambleChars | string | ".:" | Characters sampled as temporary replacements. |
| className | string | — | Additional root class name, merged with cn. |
| style | CSSProperties | — | Inline styles for the root element. |
Slots
| Slot | Type | Description |
|---|---|---|
| children* | ReactNode | Text to be scrambled word by word (plain text only, internally split into single-character spans) |
Example
// Default: .: character set
<ScrambledText>Move the pointer over this text — Hover scrambles the glyphs.</ScrambledText>
// Large radius + full width symbol set
<ScrambledText radius={160} scrambleChars="█▓▒░">
HULIAN UI · Scramble On Hover
</ScrambledText>Usage guidelines
childrenmust be plain text. The component splits it into per-character spans, so nested element structure cannot be preserved.- Radius is measured from each character's center. Characters far from the pointer in a long passage may barely move; this is intentional.
- With reduced motion enabled, the original text renders directly without scrambling.
Related
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
<ScrambledText
radius={100}
duration={1.2}
speed={0.5}
scrambleChars=".:"
>
Move the pointer over this text — Hover scrambles the glyphs.
</ScrambledText>