Locomotive / Text effects
Hover shuffle
Four permutations over 0.25s, restored on leave.
Type
Each character flickers once, then settles.
Move one letter
One random letter changes place on each step.
About this effect
scramble text is four treatments for the same word box. a glyph decode, a hover shuffle, a single letter moving, and a line typed in behind a block cursor.
the decode starts every character as a random glyph and rewrites it five times, 16ms apart, before settling. The stagger between characters is a prop, 40ms for the heading and 5ms for the intro. the shuffle mode permutes each word four times over 250ms and restores the original on pointer leave, so word count and spacing survive.
type adds characters one interval at a time and holds a block cursor that blinks on a stepped 1000ms animation. the real string stays on the span’s aria-label while the scrambling characters are hidden from screen readers, so the copy is announced once instead of every frame. sick.