The word that tumbles down the stairs

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

A minimal-style text animation with real physics: the letters of a word, each in a hairline box, tumble down a thin staircase edge over edge, fly a little, land on a corner and carry on; on the floor each one stops in its place, and inside every box the letter swings like a pendulum and rights itself, so the word can be read.

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>The word that tumbles down the stairs</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <header class="top">
      <span class="brand">Landing</span>
      <span class="meta">Design studio</span>
    </header>

    <!-- the stairs, the floor and the impact marks: one SVG drawn by the script -->
    <svg class="scene" data-scene aria-hidden="true">
      <path class="stairs" data-stairs d="" />
      <g data-ticks></g>
      <g data-marks></g>
    </svg>

    <!-- the boxes: each one a hairline square with its letter hanging inside -->
    <div class="boxes" data-boxes aria-hidden="true"></div>

    <h1 class="sr-only" data-word>Landing</h1>

    <div class="foot">
      <p class="line" data-line>We take things one step at a time.</p>
      <button class="replay" type="button" data-replay data-autoclic>Replay</button>
    </div>
  </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.

19 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 word that tumbles down the stairs” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A warm white page with a hairline staircase: four steps coming down from the left onto a long floor with small ticks under it. The first box drops from above, a thin square with a light, narrow letter inside, and lands on the top step. A moment later it tips over: it turns on its front corner, past the edge of the step it stays pivoted on the rim until another corner touches the step below, and from there it goes on; it comes down the whole staircase like this, step after step, and at every knock the step gives a hair and two small vermilion strokes open where the box touched. On the floor it keeps tumbling until it reaches its place, tries one more somersault, does not make it and rocks back on its corner. Meanwhile, inside the box, the letter hangs like a pendulum: the box turns and the letter swings, lags behind and rights itself; every hard knock squeezes it for a moment. The boxes come one at a time, the last letter first because it has the farthest to go, and one by one the word ‘Landing’ forms on the floor: the letters in place gain weight and width and the box’s hairline darkens. With the last letter the strapline ‘We take things one step at a time.’ arrives below, widening along the width axis, with a Replay button; after a few seconds the boxes fade and it all starts again. With the pointer on a letter at rest, or a tap, the box lifts onto a corner and falls back, and the letter sways.

How it works

A world measured in boxes

Everything is worked out in units of one box (a box is 1 wide): the staircase is steps 1 wide and RISER tall, and the floor starts after the last step. Gravity is in units per second squared, so the motion is the same on every screen and is drawn by multiplying by the box size in pixels. One function says how high the ground is under any x, another where the surface at a given height ends (the edge of a step; the floor never ends).

Turning on a point

A moving box always turns on a point of the ground: one of its corners, or the edge of the step under its side. The equation is that of a pivoted rigid body: angular acceleration equals gravity times the distance from the pivot times the sine of the angle, over the moment of inertia about the pivot (1/6 for the square plus the distance squared). The centre comes from the pivot with sine and cosine, and the box turns along with it.

The impacts

On every step the corners moving down are checked: if one touches the ground at the same level as the pivot, the box is flat and its angle is rounded to the quarter turn; if it touches lower, on a step below, that corner becomes the new pivot. Every impact eats part of the spin (BOUNCE). A box that lands with more than half of it over the edge tips straight off.

Its place in the word

Before starting, one box is run down on its own, out of sight, to find where it first touches the floor: that point is the place of the first letter, and every somersault on the floor moves it by exactly one box. On the floor the spin never drops below what it takes to get over the corner until the box has arrived; there it is given a little less on purpose: it tries one more somersault and rocks back. The last letter, which goes farthest, leaves first.

The pendulum letter

The letter in each box has its own angle in the world and its own speed: a gravity spring brings it upright, a friction drags it along with the box’s turn and an air term damps it. It is drawn rotated by the difference between its angle and the box’s. Weight and width are axes of the variable font: light and narrow while it tumbles, full and wide in its place; hard knocks squeeze it for a moment.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'Landing'`	The word: one box per letter (up to 9 letters).
`STEPS`	script.js	`4`	How many steps the staircase has (2 to 6; on a narrow screen it uses fewer).
`RISER`	script.js	`0.55`	How tall a step is, as a fraction of a box (0.3 low steps, 0.9 tall ones).
`GRAVITY`	script.js	`1`	How heavy the world is: 0.6 slow and floaty, 1.8 quick and heavy.
`BOUNCE`	script.js	`0.55`	How much of the spin a box keeps after every impact (0.3 dead, 0.75 lively).
`SWING`	script.js	`1`	How freely the letters swing inside their boxes (0.4 stiff, 2 loose).
`LIGHT`	script.js	`280`	The weight of the letters while they tumble (100 to 900).
`HEAVY`	script.js	`700`	The weight they reach once in place (100 to 900).
`HOLD`	script.js	`3`	Seconds the finished word stays before it all starts again.

Try them in the Playground

When to use it

For the opening of a design studio, an architecture practice or an agency that wants a headline with a little play: the name coming down the stairs and lining up, with the strapline under it. It also works as a brand intro or for an about page that talks about taking things one step at a time.

On phones

The same physics with the sizes adapted: the boxes are sized on both the width and the height of the screen, and on a narrow screen the staircase has fewer steps, so the letters stay readable. A tap on a letter at rest makes it rock.

With reduced motion

Nothing tumbles: the letters fade in already lined up on the floor, one after another, then the strapline.

Pitfalls

Letting the box fly as soon as it has turned 90 degrees past the edge does not work: it lands on a corner with its centre behind and real physics makes it roll back, so it stopped on the first step. It stays pivoted on the edge until another corner touches the step below.
When a flat box starts to turn, its back corner still touches the ground: only corners moving down count as impacts (the point’s velocity pointing down), otherwise the turn ended at once.
The letters’ places cannot be chosen by hand: where a box touches the floor depends on the physics. A box run down on its own before starting gives the point, and since the world is the same for every box, they all touch there.
A box resting after a rock backwards settled one place early: the left side of a flat box is the touching corner minus one going forward, and the corner itself going back.

Libraries

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Testing

Tested on 23 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.