Domino Lettering

Text to display. Words wrap as whole units and whitespace is preserved.

Element to render. The component inherits font, size and alignment from its parent.

Colour of the letters. Defaults to the surrounding text colour.

How letters tip over: sideways in the plane, pivoting on a bottom corner like dominoes, or backwards away from the viewer, folding flat onto the baseline.

Which way the intro chain runs, and the way the whole line falls when toppled from code.

Letters start lying down and spring upright one after another, fading in as they rise.

When the intro plays: the first time the text scrolls into view, or as soon as it mounts.

Seconds before the first letter rises.

Extra seconds between one letter rising and the next.

How quickly toppled letters fall. Higher values make the chain run faster.

Angle, in degrees, at which a toppled letter comes to rest against the next one. The last letter in a line lies flat.

Stiffness of the spring that stands letters back up.

Damping of that spring. Lower values rock back and forth more before settling upright.

Seconds toppled letters stay down before the line rebuilds. 30 or more leaves them down.

How strongly the pointer nudges the letters it passes. Faster movement pushes harder. 0 turns it off.

Tilt, in degrees, past which a nudged letter falls over and starts a chain. 90 means the pointer never topples letters.

Falling letters knock over their neighbours, like dominoes.

Clicking knocks the line down outward from the clicked letter.

How much tilted letters dim, from 0 to 1.

Topple and rebuild the line on its own every loopDelay seconds.

Seconds between automatic topples when looping.

Where the pointer is followed: anywhere over the parent element, or only over the text.

Shows the text upright and still. Reduced-motion users always get this.

Imperative controls: replay the intro, or knock the whole line over from its start.

Classes for the root element, for example font size and weight.