ElyriScrambleText
Characters flicker as glowing glyphs, then lock into the real text one by one for a decoding effect. Triggers on viewport entry or hover.
Customize
Accent color
#22d3eeProps
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | — | Text to decode |
trigger | 'view' | 'hover' | 'view' | Play on viewport entry, or on pointer hover / focus |
speed | number | 40 | How often scrambled glyphs refresh, in milliseconds |
stagger | number | 60 | Delay between adjacent characters settling, in milliseconds |
characters | string | 'A-Z 0-9 !<>-_…' | Characters used for the scramble |
accentColor | string | '#22d3ee' | Color and glow of scrambled glyphs, also overridable via --elyri-scramble-accent |
glow | number | 1 | Glow strength multiplier for scrambled glyphs, 0 disables it; also overridable via --elyri-scramble-glow |
once | boolean | true | In view mode, only trigger the first time it enters the viewport |
className | string | — | Extra class name |
Dependencies
IntersectionObserver