Scramble
Settles from random glyphs into the real text.
import
import { Scramble } from '@joshicodes/cock';Triggers
Asleep Hover this line. It likes the attention.
Behaviour
- Plays on scroll, on hover or whenever the text changes.
- Skips straight to the final state when the visitor has reduced motion turned on.
- Screen readers get the finished text, not the animation.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of Scramble
| Prop | Type | Default |
|---|---|---|
text required | string | — |
duration Total time until every character has settled, in milliseconds. | number | 900 |
glyphs Characters to cycle through before settling. | string | 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&*+=/<>' |
trigger When to play. Changing `text` always plays it again. | 'mount' | 'visible' | 'hover' | 'visible' |
class | string | — |