Scrambled Text
Letters near the pointer break into symbols for a moment, then settle back.
import { ScrambledText } from "pleate/effects/scrambled-text";Paragraph
Run your pointer across this paragraph. The letters close to it break into symbols and settle back once you move on.
Props
- text
The text.
string- radius
Pixels around the pointer that scramble.
numberdefault 90- duration
Seconds a letter stays scrambled.
numberdefault 0.8- characters
Pool of symbols.
string- scrambledClassName
Classes for scrambled letters.
stringdefault "text-accent-ink"
Accessibility
- Assistive tech always gets the real text.
- Off on touch screens and with reduced motion.