Text Scramble
Text that comes in like a signal: a band of noise passes along the line, and each letter cycles a few glyphs before it settles.
Usage
import { TextScramble } from '@wdzyi/ui';
<TextScramble as='h2' text={status} className='text-[28px] font-medium' />Part of @wdzyi/ui. See setup to install it, or copy the code above.
Props
- textstring
- What it says. A new text scrambles out of the old one.
- durationnumber = 1200
- How long the line takes to resolve, in ms. A short line takes less, so its letters never crawl.
- charactersstring = '▓▒░#*+=/\\|-_'
- The glyphs the noise is made of, heaviest first: each letter starts on the heavy ones and thins out to strokes as it arrives.
- trigger'mount' | 'change' = 'mount'
- Mount decodes it as it first appears, and again whenever the text changes. Change shows the first text as it is, and only scrambles to a new one.
- as'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'strong' = 'span'
- The element it is.
- classNamestring
- Its type and anything else.
Notes
- Each letter cycles for about 320ms, through four or five glyphs of about 64ms each, unevenly, and the letters settle from left to right at most 60ms apart. A long line comes closer together, so it still resolves in its duration.
- Only what changed scrambles: a letter that’s the same in the same place stays put, and a space clears as the band reaches it, so the words keep their shape inside the noise. Where the new text is longer, letters open as the band reaches them, and where it’s shorter they close once it’s through, each over 260ms.
- Every letter is as wide as the one it’s becoming, with the noise drawn over it in mono and cut to its width, so the line holds its size in any face. A long line only breaks between words.
- Screen readers get the text itself, at once, from a copy that’s visually hidden, and never the noise.
- With reduced motion, the text just changes.