RotatingWords

Options

interval 2200

600 to 10000 ms, good: 1800 to 3200

Milliseconds each word is held, including its handover. This sets the length of the whole loop, which is the interval times the number of words, so four words at 2200ms is an 8.8 second cycle and that is what a recording has to span.

swap 520

80 to 2000 ms

Milliseconds the handover takes, clamped to the interval so one word cannot still be leaving when the next starts. Around a quarter of the interval reads as a deliberate change rather than as a flicker.

rise 0.9

0 to 2

How far a word travels as it goes, as a share of its own line height. At 0 the words cross-fade in place, which is quieter and is the right answer inside running text.

tilt 0

-20 to 20 deg

Degrees the moving words tip. Zero by default because a tilted word in the middle of a sentence reads as a mistake; it earns its place in a large display line and almost nowhere else.

blur 0

0 to 8 px

Blur on a word in motion. Zero is crisper and cheaper, and a filter costs a compositing layer whether or not it does anything, so a value of 0 is left off rather than written as blur(0px).

What it needs

Category

Type, an effect

Dependencies

None at all

Browser

No WebGL

Frame budget

~0.15 ms · 0 context

Pinned to

v0.13.0

• The box is sized to the longest word before anything moves. A list of words of different lengths swapped in place changes the width of its own line on every swap, so everything after it slides back and forth for as long as the page is open. It is the most common fault in this effect and it is entirely avoidable
• The sizing needs no measurement. Every word is placed in the same cell of an inline-grid, so the cell is as wide as the longest and as tall as the tallest, and it stays that size whichever word is showing. Nothing to recompute on resize and nothing that can be wrong before a font has loaded
• The words are the author's markup and are never replaced. Passing a list of strings and building spans means the text is invisible to anything reading the page before the script runs, and it puts copy inside a configuration object where nobody will think to translate it
• Only the first word is in the accessibility tree; the rest are aria-hidden and the element is aria-live off. A screen reader meeting eight alternatives in a row would otherwise read the sentence eight times, and a live region would announce a change nobody asked for every two seconds
• Pure in t: which word is showing and how far through its handover are arithmetic on the clock, so the recorder can seek anywhere and a live page and a take agree
• Only the arriving and leaving words are touched. Everything else is parked with no transform to compute, so twelve words cost the same per frame as two
• Two transforms and two opacities per frame during a handover, and nothing at all between them: the applied state is compared before anything is written, so a word being held writes no styles
• A blur of 0 is left off entirely rather than written as blur(0px), because a filter costs a compositing layer whether or not it does anything