The metronomes that fall into time

Physics, SVGGSAP, CSS onlyMediumCompressed weight: Demo 6.8 KBGSAP 28 KBFreeDownload the zip

A minimal-style physics animation: five metronomes drawn in hairlines on a shelf resting on two rollers start out of step, each at its own tempo, and as they push the shelf back and forth they slowly fall into beating together. Then the weights take the accent and the word composes itself underneath. ‘Scatter’ mixes them up again.

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>Tempo</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>
  <!-- five metronomes on a shelf that rolls on two rollers: they start out of step and, pushing the shelf back and
       forth, slowly fall into time; the word below composes itself when they beat together -->
  <main class="stage" data-stage>
    <svg class="scene" data-scene aria-hidden="true"></svg>

    <p class="word" data-word aria-live="polite"></p>

    <div class="foot">
      <p class="note" data-note>Five metronomes on a rolling shelf</p>
      <button class="pillola" type="button" data-scatter data-autoclic>
        <span class="pillola__scritta" data-testo="Scatter">Scatter</span>
        <svg class="pillola__segno" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 11.5c2.2-4.6 7.8-4.6 10 0M10.4 9.6l2.6 1.9.4-3.1" /></svg>
      </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.

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 metronomes that fall into time” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A warm white room, empty. From below come a thin floor line, two rollers and a shelf on top, then five metronomes drawn in hairlines, pyramid-shaped, each with its little window, its rod and a small black weight; above each one an arched scale with a tick at the end of the swing on either side. An invisible hand starts them one after the other, from left to right: each rod takes its own tempo, just a touch different from its neighbours’, and when it reaches the end of its swing its tick lights up for a moment. At first they beat in a jumble and the shelf barely trembles. Then, because every rod swinging one way pushes the shelf the other way and the shelf pushes all of them, the rods start looking for each other: two beat together, then three, the shelf slides back and forth further and further on the rollers, which turn. In about ten seconds all five beat together: the weights go from black to vermilion and underneath the word ‘in time’, which was waiting wide, light and almost invisible, composes itself letter by letter, narrowing and gaining weight with a small bounce. Bottom left, ‘Out of step’ becomes ‘Beating together’. The ‘Scatter’ button (or Enter) moves the rods to new phases, the word goes light again and the story starts over.

How it works

The phases and their order

Each metronome is a phase turning at its own pace, ω = 2π · TEMPO, give or take TEMPO_SPREAD between the first and the last. The rod’s angle is SWING · sin(phase). The Kuramoto order parameter says how much they beat together: the average of the points (cos phase, sin phase), of length 1 when they all share a phase and close to 0 when they are scattered; its direction is the mean phase.

The shelf that binds them

At every step each phase runs at its own pace plus COUPLING · R · sin(mean phase − phase): that is the Kuramoto model, the simplest one for synchronization. The shelf moves as momentum wants: opposite to the sum of the rods, so almost still when they are scattered and wider and wider as they fall into time; the rollers travel half its distance and turn by that distance over their radius. The simulation runs in fixed steps of 1/240 of a second, so the bench can slow it down without changing it.

Starts from a seed

The starting phases come from a generator with a fixed seed (mulberry32): with the seven seeds in the list the five metronomes fall into time between 8 and 11 seconds, the same way every time. ‘Scatter’ moves on to the next seed and shifts the phases towards the new ones over 0.7 seconds, bit by bit, keeping the first one still, like a hand mixing them up again.

The beat and the agreement

When cos(phase) changes sign the rod is at the end of its swing: the tick on that side lights up and fades out exponentially. If the order stays above 0.97 for six tenths of a second, the weights turn vermilion through gsap.utils.interpolate and the word composes itself: each letter is a span going from 125% width and weight 220 to 100% and 720 with back.out, one after the other. Below 0.9 it comes apart.

The drawing

Everything is an SVG as big as the window, rebuilt on resize: bodies, windows, scales and ticks are drawn once, and on every frame only the transforms of the shelf, the rollers and the rods and the colour of the weights change. With reduced motion there is no simulation: two still pictures, in step and scattered, which Scatter swaps with a fade.

Values to change

Name	File	Default	What it changes
`COUNT`	script.js	`5`	How many metronomes stand on the shelf (2 to 9): the seeds are picked for five, with another number the agreement comes sooner or later.
`TEMPO`	script.js	`0.9`	How many full swings per second the average metronome makes.
`TEMPO_SPREAD`	script.js	`0.01`	How different the tempos are: 0.01 means 1% faster or slower at the two ends. The more different, the harder they find it to agree.
`COUPLING`	script.js	`0.45`	How strongly the shelf binds the metronomes: higher and they agree sooner and tighter, much lower maybe never.
`SWING`	script.js	`20`	How far the rod swings to one side, in degrees.
`SHELF`	script.js	`0.14`	How far the shelf slides, as a share of a metronome’s width.
`WORD`	script.js	`'in time'`	The word that composes itself when they beat together.
`LIGHT`	script.js	`220`	The weight of the word while it waits.
`HEAVY`	script.js	`720`	The weight of the composed word.

Try them in the Playground

When to use it

For a page about teamwork, rhythm or synchronization: an app for working together, a service that keeps data in step across devices, a music school, a festival, a studio’s about page. Also as a section to just watch, a small physics lesson.

On phones

The same animation with the sizes adapted: the metronomes shrink so the shelf fits the width of the screen, the word gets smaller; Scatter is tapped with a finger.

With reduced motion

Nothing swings: the metronomes stand still in step on a tilt, with vermilion weights and the word already composed. Scatter fades to the metronomes scattered and shortly after back in step.

Pitfalls

The first model was the full physical one (pendulums pushing a board on rollers, after Pantaleone): with the coupling read one step late the simulation blew up, and solved exactly it only fell into time after 20 to 25 seconds, and not always. For a demo it moved to the Kuramoto phase model, with the shelf moving as momentum wants.
With a coupling strong enough to agree quickly, random starts could agree in three seconds or in fifteen: the seeds are picked among those that agree between 8 and 11 seconds, so the story always has the same breath.
The arcs of neighbouring scales overlapped: the arc is wider than the body. Now the gap between metronomes is 60% of their width and the swing is 20 degrees.
Scattering by changing the phases at once made the rods jump: the phases move towards the new ones over 0.7 seconds, and while they move the word does not compose.
With tempos 3% apart, even once in time the rods at the ends lagged by almost 20 degrees of phase and the poster looked out of step: tempos 1% apart and COUPLING 0.45 leave about 7 degrees, just enough to look real.
With the ‘clic’ autopilot the bench presses Scatter every 2.8 seconds: in the thumbnails and the video the metronomes were mixed up before they could agree, and the video stopped at 8 seconds. The autopilot is ‘loop’: the demo runs by itself to the agreement, and the video lasts 15 seconds.

Libraries

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Testing

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