Matrix Text
マトリックステキスト
A wave that runs left to right along a string, knocking each character into a random binary digit and letting it fall back a moment later. Every character owns two absolute timers — one to drop, one to land — rather than a single chained timeout, so a long string does not accumulate drift as it goes. Each cell is fixed at 1ch↗↗ wide with tabular figures, which is what stops the line jittering as letters swap for digits. Hovering runs the sweep again. Adapted from Kokonut UI↗↗ under the MIT licence.
Installation
Copy and paste the following code into a new component file:1
How to use it2
Props
MatrixText
| Name | Default | Description |
|---|---|---|
| text | — | string The string the sweep resolves to |
| startDelay | 200 | number Milliseconds before the first character drops |
| scrambleDuration | 500 | number Milliseconds a character stays scrambled |
| stagger | 100 | number Milliseconds between one character and the next |
| replayOnHover | true | boolean Run the sweep again on pointer enter |
| dark | false | boolean Render the dark palette |