The tower of blocks

Physics, 3DGSAP, CSS onlyAdvancedCompressed weight: Demo 16 KBGSAP 28 KBFreeDownload the zip

A tower of wooden blocks in crossed layers, in isometric view: on every click a suction-cup claw pulls a block out in little tugs and lays it on top while the tower sways; on the third turn it falls with real physics, the blocks scatter across the tray and then fly back to their places.

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 tower of blocks</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena" data-stage data-autoclic aria-label="A wooden tower of blocks: click to pull one out">
    <header class="testa">
      <p class="sopra" data-head>The Wobbly Table, board game café</p>
      <h1 class="titolo" data-head>One more pull</h1>
    </header>

    <!-- the tray and the tower live in a CSS 3D world, seen from above at an angle: the script builds every block -->
    <div class="palco" data-view>
      <div class="asta" data-arm></div>
      <div class="mondo" data-world></div>
    </div>

    <footer class="piede">
      <button type="button" class="tira" data-pull data-autoclic>
        <svg class="tira__segno" viewBox="0 0 28 24" aria-hidden="true">
          <rect class="tira__blocco" x="3" y="2" width="18" height="5.5" rx="1.2" />
          <rect class="tira__blocco tira__blocco--fuori" x="3" y="9.25" width="18" height="5.5" rx="1.2" />
          <rect class="tira__blocco" x="3" y="16.5" width="18" height="5.5" rx="1.2" />
        </svg>
        <span class="tira__testo">Pull a block</span>
      </button>
      <p class="nota" aria-live="polite"><span data-hint>Stacking the tower</span></p>
    </footer>
  </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.

25 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 tower of blocks” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

In the made-up board game café The Wobbly Table there is a green felt tray with a wooden rim, seen from above in isometric view; on it stands a fourteen-storey tower of wooden blocks, three per storey, each storey turned across the one below. At the start the blocks drop in from above storey by storey, bounce a little and the tower shivers. On every click (on the scene or on the Pull a block button) a claw comes down on a metal arm, presses its red suction cup on the end of a block, the cup squashes, and it pulls the block out in small tugs: on every tug the tower sways and springs back, and the storey above gets dragged a little by friction. The block rises along the tower, turns if it has to and is laid on top with a little bounce; the claw lets go and leaves. On the third turn, halfway through the pull, the tower sways more and more, the claw lets go and the part above the gap pivots on its edge and falls: the blocks come apart, bounce, roll and stop on the tray against the rim. After a moment every block lifts out of the pile and flies back to its place, from the bottom up.

How it works

Boxes in CSS 3D

Every block is a div with six faces (backface-visibility hidden) inside a world with transform-style preserve-3d, turned with rotateX and rotateY(-45deg) and with no perspective: a true isometric view, and the browser sorts the front and back faces by itself. The wood grain is repeating CSS gradients, different for every block.

One pose per block

Every block has a mode (in the tower, held by the claw, free, flying) and on every tick of the GSAP ticker a single function works out its position and rotation and writes them into a matrix3d. The same rotation tells how much each face is in shadow against a fixed light: a rolling block changes its lighting by itself.

The claw and the tugs

A turn is a timeline: the claw comes down with a back.out, moves in and the suction cup squashes; then several short tweens with power3.out move the block outwards, and on each one the tower's sway gets a knock that springs back with elastic.out. The block rises, turns 90 degrees if the top storey lies across, and drops into place.

The fall

The part above the gap first pivots with GSAP around the edge it falls towards, with a power2.in that speeds up like gravity. Then every block becomes a rigid body with the speed it had in that rotation: gravity, impulse collisions, friction and bounce, in fixed steps of 1/300 of a second. The corners of a block hit the tray and the rim; between two blocks, twelve spheres placed inside each one collide.

Sleep and the way back

A block that rests almost still for 0.3 seconds falls asleep and becomes a fixed support: that way piles do not jitter. When they are all asleep, or after four seconds, the physics stops; after a pause every block flies home on a curve, its rotation interpolated (slerp) to the nearest of the four identical poses of a box, and lands with a small bounce.

Values to change

Name	File	Default	What it changes
`PIANI`	script.js	`14`	The storeys of the tower at the start, three blocks each.
`TURNI`	script.js	`3`	On which turn the tower falls while the claw pulls the block.
`STRATTONI / OSCILLAZIONE`	script.js	`4 / 1`	In how many tugs a block comes out and how much the tower sways on each tug.
`GRAVITA / RIMBALZO`	script.js	`1 / 0.22`	The gravity of the fall (1 is a little slower than real life) and how much the blocks bounce.
`PAUSA`	script.js	`1.4`	The seconds the pile lies still before the tower builds itself again.
`VISTA`	script.js	`30`	How many degrees we look down on the tray.
`--legno, --panno, --gomma`	style.css	`#e2b877, #2f6b5e, #d9482b`	The wood of the blocks, the felt of the tray, the suction cup and the button.

Try them in the Playground

When to use it

For the page of a board game café, a toy shop or a woodworker, for a 404 page (everything fell down) or a page about risk and balance. It is a toy to watch: the real content goes next to it.

On phones

The same animations and the same physics: sizes come from the screen, so on a phone the tray and the tower fit in width. A tap on the scene or the button is enough; the sway on mouse movement does not happen on a phone.

With reduced motion

The tower is already standing. On every click the block fades out of its storey and fades back in on top; on the turn of the fall the physics is worked out all at once and the pile fades in already still. The next click brings the tower back.

Pitfalls

In CSS 3D elements touching on coinciding faces flicker: there is half a pixel of air between blocks, the shadows sit just above the felt and the felt just below the blocks.
CSS has Y pointing down, the physics world up: the rotation matrix must be flipped (S·R·S with S = diag(1, −1, 1)) before writing it into matrix3d, or the blocks spin the wrong way.
A tower simply handed over to physics stays up or jitters forever: the falling part starts already tilted and with its own speed, and whatever stays standing is a fixed box, not a body.
Blocks resting on each other jitter: a body almost still for a moment falls asleep, and a watchdog made with gsap.delayedCall ends the physics after four seconds.
The physics is driven by GSAP's ticker in fixed steps, not by a requestAnimationFrame of its own: that way it stops and slows down with the timelines, and a fast block does not pass through another in a single step.
A very tall 3D plane (the claw's arm rising out of the stage) is sometimes not drawn by the browser, or drawn over the title: in isometric view a vertical bar stays vertical on screen, so the arm is a flat div placed where the claw's head projects.

Libraries

GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.

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

Testing

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