The title built from toy bricks

Text, PhysicsGSAP, CanvasAdvancedCompressed weight: Demo 13 KBGSAP 28 KBFreeDownload the zip

A title made of interlocking toy bricks, seen from above at an angle, with the studs on top: the bricks rain down layer after layer, bounce and click into place. Then a faceless little figure jumps onto the baseplate, walks along the title and takes it apart letter by letter. A click on a letter makes it burst into its bricks, which then jump back into place.

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 title built from toy bricks</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fredoka@5.2.8/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena" data-scene>
    <header class="marca">
      <!-- the shop's mark: a little two-stud brick drawn in svg -->
      <svg class="marca__segno" viewBox="0 0 40 30" aria-hidden="true">
        <path class="marca__lato" d="M4 13 L20 21 L20 28 L4 20 Z"/>
        <path class="marca__fronte" d="M20 21 L36 13 L36 20 L20 28 Z"/>
        <path class="marca__sopra" d="M4 13 L20 5 L36 13 L20 21 Z"/>
        <ellipse class="marca__bottone" cx="14" cy="11" rx="3.6" ry="1.9"/>
        <ellipse class="marca__bottone" cx="26" cy="15" rx="3.6" ry="1.9"/>
      </svg>
      <span class="marca__nome" data-brand>Tumblebox Toys</span>
    </header>

    <!-- the title, for screen readers: the bricks are painted on the canvas -->
    <h1 class="leggibile" data-reader>PLAY</h1>
    <!-- the baseplate, the bricks and the little figure: all painted on this canvas -->
    <canvas class="tavolo" data-stage aria-hidden="true"></canvas>
    <p class="nota" data-hint>Click a letter to knock it down</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.

23 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 title built from toy bricks” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a green baseplate covered in studs, seen from above and a little from the side, the title of a made-up toy shop, Tumblebox Toys, is born: «PLAY», one colour per letter. The bricks fall from above one at a time, left to right, one layer after another: as they drop they are slightly crooked and their shadow below shrinks and darkens; they touch, bounce once, sink a hair too far and come back up, locked in, with two little marks snapping from the corners like the real click. When the title is finished, the middle letter bursts by itself into its bricks, which fly spinning, land on the baseplate in front of the letters and then jump back one at a time, from the bottom, each with its own click. Then the little figure arrives: a faceless brick figure that drops from the sky, lands with its arms in the air, walks along the title swinging legs and arms, turns to each letter, raises its arms, hops and the letter comes apart from the top: the bricks pull loose with a little tug and fly away upwards, spinning. In the end the figure turns to us, waves and jumps out of the picture; the title starts building again. With the pointer on a finished letter its layers lift a little, with an elastic; a click (or a tap) makes it burst and rebuild.

How it works

Letters made of squares

Every letter is drawn on a grid of five rows, one square per stud. The script reads the rows from the bottom and splits every solid run into 2-stud bricks (with a 3 at the end), and odd layers start with a 1, so the seams stagger as in a real wall. A brick that would have nothing under it is joined to its neighbour: nothing hangs in mid-air while the layers go up.

A small perspective on canvas

The world is measured in studs: x along the title, y towards us, z up. An orthographic projection (the camera turned by ANGLE degrees and tilted by 33) takes every point to the canvas. A brick is a box with three axes: only the faces turned towards the viewer are drawn (the normal against the viewing direction), lit by the normal against a fixed light. A stud is a cylinder: two ellipses, taken from the projected axes, and the band between their outermost points.

Fall, bounce, lock in

Every brick has a few numbers: how high it still is (f, from 1 off screen to 0 in place), the offsets, the rotations and the time since landing. The round's timeline brings f down with power2.in; after landing a function makes the bounce, the little push past the stud and the return with back.out, and draws the marks of the click. Bricks are drawn in order: the farthest first, then the low layers, then left to right.

The figure that takes it apart

The figure is made of boxes and cylinders in the same perspective: legs and arms turn around the hip and the shoulder, the whole figure turns around z to face another way. The step is a number that grows by one every half step: its sine gives the swing of legs and arms and the little bob. At every letter the timeline turns it, raises its arms, makes it hop and sends the bricks away from the top, with a tug and a flight that speeds up.

The burst on click

The click does not touch the round's timeline: it takes a number of the letter from 0 to 1, and every brick's position is worked out from it, with a real parabola towards a spot on the baseplate chosen in advance (in two staggered lines, so they don't overlap), a few spins, a bounce, the pause and the way back from the bottom up with the click. If the click comes just before the figure, the round waits for the letter to be whole again. With reduced motion only fades are left.

Values to change

Name	File	Default	What it changes
`TITLE`	script.js	`'PLAY'`	The title made of bricks: letters, digits, ? and full stop. Short is best: every letter is four studs wide.
`BUILD_SPEED`	script.js	`1`	How fast the bricks rain down: 2 is twice as fast, 0.5 half as fast.
`BOUNCE`	script.js	`1`	How high a brick bounces before it locks in (0 = it just clicks).
`HOLD`	script.js	`1.6`	How many seconds the finished title stays on show before the figure comes.
`ANGLE`	script.js	`28`	How many degrees the camera is turned: 0 is straight on, 45 is a true isometric corner.
`FIGURE`	script.js	`true`	With the little figure taking the title apart; off, the letters pop away by themselves, one after another.

Try them in the Playground

When to use it

For the opening title of a toy shop, a children's workshop, a games fair, a building app or anything about putting things together and taking them apart; also as the intro of a video. It works best with short words, three to six letters.

On phones

The same animation with the sizes adapted: on a tall screen the frame holds only the letters and the figure's lane, and the baseplate runs off the sides, so the bricks stay big. A tap on a letter makes it burst.

With reduced motion

Nothing falls and nothing flies: the bricks fade in where they belong, layer after layer, and fade out from the top when the title comes apart; there is no figure. The click fades the letter out and back in.

Pitfalls

With a wall one brick thick, sorting the bricks by the distance of their centre goes wrong: the long brick below ends up on top of the short one above and its top face covers it. They are sorted by layer first and then along the title; pieces flying towards us come after.
A stud's band drawn in the same path as the base ellipse runs the other way round: with the nonzero rule the overlap stays empty and the stud has a hole. They are filled as two separate paths.
Rounded letters (O, S, C made of squares with empty corners) left bricks hanging in mid-air while the layers went up: the letters are square and a brick with nothing under it is joined to its neighbour.
A click on a letter just before the figure arrived left the letter in pieces in front of it: if the burst is not over, the round's timeline pauses and goes on when the letter is whole.
Where the bricks start depends on the window (they must start off screen): the timeline only holds f from 1 to 0, and how many studs 1 is worth is worked out again on every resize, without rebuilding the round.
To record the full video the round must come back identical: all the randomness (tilts, flights, spots on the baseplate) is decided once at the start, from a fixed seed.

Libraries

GSAP 3.15.0, Fredoka (font variabile) 5.2.8.

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

Testing

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