ScrambleText

Options

split char

char · word · line

What each animated piece is. Characters are grouped inside their word so the text still wraps.

order forward

forward · reverse · centre · random

The order pieces arrive in. `centre` starts in the middle and works outwards. `random` keeps every piece in its place in the sentence and only changes its turn.

stagger 26

0 to 200 ms, good: 15 to 45

Milliseconds between one piece and the next. On a long heading this multiplies fast: 40ms across 60 characters is a two and a half second wait.

duration 720

100 to 3000 ms, good: 500 to 900

Milliseconds each piece takes on its own.

rise 22

-80 to 80 px, good: 12 to 34

How far each piece travels. Negative falls from above instead of rising from below.

blur 5

0 to 20, good: 0 to 8

Blur each piece starts at. Zero is cheaper and often better at small sizes, where the blur just reads as a smudge.

scale 1

0.4 to 1.6, good: 0.9 to 1.1

Scale each piece starts at. 1 is no scaling, which is usually right for text.

seed 7

0 to 9999

Seed for the random order. The same seed always gives the same order, so a recorded video and a live page match.

reducedMotionTime 999

0 to 9999 s

The single frame shown when the user prefers reduced motion. For a one-shot reveal this should be a time after the animation has finished, so the text simply appears.

What it needs

Dependencies

None at all

Browser

No WebGL

Frame budget

~0.6 ms · 0 context

Pinned to

v0.6.2

• No canvas and no WebGL. It splits the text already in the element and animates the pieces
• The original string stays in the accessibility tree as one label, so a screen reader does not read sixty separate characters
• destroy() puts the original text back, leaving the element as it was found
• One transform and one opacity per piece, composited
• The blur is dropped the moment a piece lands, because a permanent blur(0px) keeps every piece on its own layer