The domino word

Physics, TextGSAPAdvancedCompressed weight: Demo 8.2 KBGSAP 28 KBFreeDownload the zip

In the minimal style, with real physics: the letters of CHAIN stand on a thin line like dominoes, each inside a tall rectangle drawn with a single line. A vermilion push tips the first one over; it hits the second and leans on it, and the knock runs through the word until the last one lies flat and the others rest one on the next. At every knock the letter narrows on the width axis and warms up in vermilion; then the tiles stand up again one after another.

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Chain</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the whole room is the button: a click pushes the first letter, or the one under the pointer -->
  <main class="stage" data-stage tabindex="0" role="button" aria-label="The word CHAIN set up as dominoes. Press to push the first letter.">
    <header class="top">
      <span class="top__brand">Chain</span>
      <span class="top__note">Automations that run themselves</span>
    </header>

    <svg class="room" data-svg aria-hidden="true">
      <path class="floor" data-floor d="" />
      <g data-ticks></g>
      <g data-tiles></g>
      <path class="finger" data-finger d="" />
    </svg>

    <p class="hint" data-hint>Click to push the first letter.</p>
    <p class="read" data-readout><span class="read__label">Chain</span> <b class="read__value" data-read>0.00 s</b></p>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.

17 values to change

Open the Playground

Or ask Claude Code for it

With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:

Take “The domino word” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A warm white room, at the top the name of an invented automation service, Chain. A thin line, the floor, draws itself from the middle outwards and small marks appear under it; then the five letters of CHAIN are set down one after another, each inside a tall tile drawn with a single line: it arrives tilted back a little, touches the floor, rocks by a hair and stands upright, and the letter takes on weight for an instant. After a breath a short vermilion stroke comes in from the left, the hand, touches the first tile near the top and pushes it. The tile passes its balance point and falls over its front corner, hits the second near the top and leans on it; the second goes, hits the third, and so on: the knock runs through the word ever more firmly until the last tile lies flat on the floor with a small bounce, and the others stay leaning one on the next in a slanted row, like real dominoes. Every tile that is hit lights up in vermilion and slowly cools down, and its letter narrows on the width axis and gains weight for an instant. Bottom right a stopwatch counts the time of the chain, from the push to the last tile lying flat. After a pause the tiles stand up again one after another, from the left, settle on their base with a one pixel rock, and the hand comes back. A click pushes the first tile, or the one you touch (the ones before it stay standing); with the tiles down, a click stands them up.

How it works

A tile is a rigid body

Each tile is a slab turning on its front corner, with an angle and an angular speed. Gravity acts on its middle: while the middle is behind the corner it holds the tile up, as soon as it passes it pulls it down. The moment of inertia is that of a slab about a corner, (thickness² + height²) / 3. Everything is measured in tile heights, so the fall keeps the same pace on every screen. The physics step is a twelve-hundredth of a second, inside gsap.ticker, and a frame's time never goes over a thirtieth of a second.

The corner against the face

At every step the top corner of a tile is looked at in the frame of the next tile: if it has gone into its back face, there is a contact. Along the face's normal the relative speed of the two points is worked out and an impulse cancels it (with a small bounce, 0.12, only for real knocks), then the overlap is taken away by turning both tiles in proportion to their levers. Eight passes per step are enough for a row of leaning tiles to stay still without trembling.

The right gap

The gap between tiles is held between two limits: wide enough for a tile to reach its neighbour after it has passed its balance point (above the sine of the critical angle), narrow enough for the one before the last to still find the last one's face when that one lies flat. With a gap of 0.42 the first tile reached the second just past balance, with no swing left, and fell back: now the tiles are thinner (0.3) and further apart (0.55).

The knock in the letter

A real knock, above a speed threshold, lights the tile that is hit: the outline and the letter turn vermilion with gsap.utils.interpolate and cool down in a second; the letter narrows on the wdth axis (font-stretch) and gains weight, then comes back on an elastic. The floor stops the tile lying flat with a small bounce; the last one to touch down stops the stopwatch.

The direction: push, sleep, stand up

The hand is a GSAP timeline: a vermilion stroke comes in from behind with power2.in and at the touch gives the tile the angular speed it needs to pass its balance, times PUSH. When everything is still the physics falls asleep and the drawing stops: nothing is redrawn until something moves. The tiles stand up on another timeline, one after another, going a hair past upright onto the other corner and coming back with back.out. The loop is always the same, because every push starts with the physics clock reset.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'CHAIN'`	The word: one tile per letter, from 3 to 7 letters.
`GRAVITY`	script.js	`22`	How fast a tile falls, in tile heights per second squared: 10 is slow motion, 40 is brisk.
`SPACING`	script.js	`0.55`	The gap between two tiles, as a share of their height (0.5 to 0.6).
`SLAB`	script.js	`0.3`	How thick a tile is, as a share of its height.
`PUSH`	script.js	`1.4`	How hard the hand pushes: 1.4 is a firm nudge, 2.5 is a shove.
`HOLD`	script.js	`1.6`	How many seconds the fallen word rests before it stands up again.
`SQUASH`	script.js	`1`	How much a knock narrows the letter on the width axis (0 = not at all).
`--accent`	style.css	`#e5432a`	The colour of the hand and of the knock running through the word.
`--weight`	style.css	`720`	The weight of the letters’ typeface, from 100 to 900.

Try them in the Playground

When to use it

For the title of a product that sets things off by itself: an automation service, a workflow app, the how it works part of a landing page, the cover of a physics or type project. It works with any short word in capitals, a brand name too.

On phones

The same physics, measured in tile heights: the tiles are smaller so the whole row, the last one lying flat included, fits the width. A tap pushes the first tile, or the one tapped; with the tiles down, a tap stands them up.

With reduced motion

Nothing falls in front of you: the tiles fade in, standing. A click fades them out and back in already fallen, in the exact pose the physics finds (worked out silently to the end), with the time of the chain; another click puts them back up the same way.

Pitfalls

With thick tiles (0.4) close together (0.42) the first one reached the second at 25 degrees, just past the critical 22: it arrived with no swing, the second moved two degrees and sent it back. Thinner and further apart, every tile reaches its neighbour with the energy of thirty degrees of fall.
The floor sent every flat tile back with a fifth of its speed even when it was nearly still: the one before the last, leaning on the last, trembled by two degrees for whole seconds. The bounce only counts above a speed threshold; below it, the tile stays down.
The outline of every tile is filled with the colour of the room: so the next tile covers the corner of the one leaning on it and reads in front, as with real dominoes.
On a phone the whole row, with the last tile lying flat, was centred: standing, the word sat all to the left. Now the centre is halfway between the standing word and the fallen row.
With low gravity (8) the air, fixed at 0.8 per second, ate the first tile's swing before it reached the second, and the chain stopped at the first knock; with a push under 1.4 and a gap under 0.5 the same happened. Now the air keeps pace with the fall (it grows with the square root of gravity) and push and gap have a minimum: tried at every combination of the extremes, the chain always reaches the end.
The card's video stops when the picture stays the same with no GSAP scheduled: while the tiles move a gsap.delayedCall is always waiting, and the pauses on the floor and standing are delayedCalls too.

Libraries

GSAP 3.15.0, Anybody (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 8.2 KB; the libraries: GSAP 28 KB.

Testing

Tested on 19 October 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: To do

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.