I metronomi che si accordano

Fisica, SVGGSAP, Solo CSSMediaPeso compresso: Demo 6,8 KBGSAP 28 KBGratisScarica lo zip

Animazione di fisica in stile minimal: cinque metronomi disegnati a filo su una mensola appoggiata su due rulli partono fuori tempo, ognuno col suo ritmo, e spingendo la mensola avanti e indietro si mettono piano piano a battere insieme. Allora i pesi prendono l’accento e sotto si compone la parola. «Scatter» li rimescola.

Il codice

Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.

Scarica lo 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

Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.

17 valori da cambiare

Apri il Playground

Oppure chiedila a Claude Code

Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:

Prendi «I metronomi che si accordano» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Una stanza bianco caldo e vuota. Dal basso arrivano una riga di pavimento sottile, due rulli e sopra una mensola, poi cinque metronomi disegnati a filo, a piramide, ognuno con la sua finestrella, l’asta e un piccolo peso nero; sopra ogni metronomo una scala ad arco con una tacca in fondo alla corsa da ogni parte. Una mano invisibile li fa partire uno dopo l’altro, da sinistra a destra: ogni asta prende il suo ritmo, di pochissimo diverso da quello delle vicine, e quando arriva in fondo alla corsa la sua tacca si accende per un attimo. All’inizio battono in disordine e la mensola trema appena. Poi, perché ogni asta che va da una parte spinge la mensola dall’altra e la mensola spinge tutte, le aste cominciano a cercarsi: due battono insieme, poi tre, la mensola scivola sempre più ampia avanti e indietro sui rulli, che girano. In una decina di secondi battono tutte e cinque insieme: i pesi passano dal nero al vermiglio e sotto la parola «in time», che aspettava larga, leggera e quasi invisibile, si compone lettera per lettera stringendosi e prendendo peso, con un piccolo rimbalzo. In basso a sinistra «Out of step» diventa «Beating together». Il tasto «Scatter» (o Invio) sposta le aste in fasi nuove, la parola torna leggera e il racconto riparte.

Come funziona

Le fasi e il loro ordine

Ogni metronomo è una fase che gira col suo ritmo, ω = 2π · TEMPO, più o meno TEMPO_SPREAD fra il primo e l’ultimo. L’angolo dell’asta è SWING · sin(fase). L’ordine di Kuramoto dice quanto battono insieme: la media dei punti (cos fase, sin fase), lunga 1 quando sono tutti nella stessa fase e quasi 0 quando sono sparsi; la sua direzione è la fase media.

La mensola che li lega

A ogni passo ogni fase corre col suo ritmo più COUPLING · R · sin(fase media − fase): è il modello di Kuramoto, il più semplice per la sincronizzazione. La mensola si muove come vuole la quantità di moto: all’opposto della somma delle aste, quindi quasi ferma quando sono sparse e sempre più ampia man mano che si accordano; i rulli fanno metà della sua strada e girano di quella strada diviso il raggio. La simulazione va a passi fissi di 1/240 di secondo, così il banco la rallenta senza cambiarla.

Partenze con un seme

Le fasi di partenza vengono da un generatore con un seme fisso (mulberry32): con i sette semi della lista i cinque metronomi si accordano fra 8 e 11 secondi, ogni volta allo stesso modo. «Scatter» passa al seme dopo e sposta le fasi verso le nuove in 0,7 secondi, a poco a poco, tenendo ferma la prima, come una mano che le rimette in disordine.

Il battito e l’accordo

Quando cos(fase) cambia segno l’asta è in fondo alla corsa: la tacca di quella parte si accende e si spegne con un esponenziale. Se l’ordine resta sopra 0,97 per sei decimi di secondo, i pesi passano al vermiglio con gsap.utils.interpolate e la parola si compone: ogni lettera è uno span che va da larghezza 125% e peso 220 a 100% e 720 con back.out, una dopo l’altra. Sotto 0,9 si scompone.

Il disegno

Tutto è un SVG grande quanto la finestra, rifatto al resize: corpi, finestrelle, scale e tacche si disegnano una volta, e a ogni fotogramma cambiano solo i transform della mensola, dei rulli e delle aste e i colori dei pesi. Con il movimento ridotto non c’è simulazione: due quadri fermi, in fase e sparsi, che Scatter scambia in dissolvenza.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`COUNT`	script.js	`5`	Quanti metronomi stanno sulla mensola (da 2 a 9): i semi sono scelti per cinque, con un altro numero l’accordo arriva prima o dopo.
`TEMPO`	script.js	`0.9`	Quante oscillazioni intere al secondo fa il metronomo medio.
`TEMPO_SPREAD`	script.js	`0.01`	Quanto sono diversi i ritmi: 0.01 vuol dire l’1% in più o in meno ai due capi. Più diversi, più fanno fatica ad accordarsi.
`COUPLING`	script.js	`0.45`	Quanto la mensola lega i metronomi: più alto si accordano prima e più stretti, molto più basso forse mai.
`SWING`	script.js	`20`	Quanto oscilla l’asta da una parte, in gradi.
`SHELF`	script.js	`0.14`	Quanto scivola la mensola, in parte della larghezza di un metronomo.
`WORD`	script.js	`'in time'`	La parola che si compone quando battono insieme.
`LIGHT`	script.js	`220`	Il peso della parola quando aspetta.
`HEAVY`	script.js	`720`	Il peso della parola composta.

Provali nel Playground

Quando usarla

Per una pagina che parla di squadra, di ritmo o di sincronizzazione: un’app per lavorare insieme, un servizio che tiene allineati i dati fra più dispositivi, una scuola di musica, un festival, la pagina «chi siamo» di uno studio. Anche come sezione da guardare, una piccola lezione di fisica.

Sul telefono

La stessa animazione con le misure adattate: i metronomi si rimpiccioliscono perché la mensola stia nella larghezza dello schermo, la parola si fa più piccola; Scatter si tocca col dito.

Con il movimento ridotto

Niente oscilla: i metronomi sono fermi in fase su un’inclinazione, coi pesi vermigli e la parola già composta. Scatter mostra in dissolvenza i metronomi sparsi e poco dopo di nuovo in fase.

Trappole

Il primo modello era quello fisico completo (pendoli che spingono una tavola su rulli, alla Pantaleone): con l’accoppiamento letto un passo prima la simulazione esplodeva, e risolto in modo esatto si accordava solo dopo 20-25 secondi, e non sempre. Per una demo si è passati al modello delle fasi di Kuramoto, con la mensola che si muove come vuole la quantità di moto.
Con un accoppiamento abbastanza forte da accordarsi in fretta, partenze a caso potevano accordarsi in tre secondi o in quindici: i semi sono scelti fra quelli che si accordano fra 8 e 11 secondi, così il racconto ha sempre lo stesso respiro.
Gli archi delle scale dei vicini si accavallavano: l’arco è largo più del corpo. Ora lo spazio fra i metronomi è il 60% della loro larghezza e la corsa è di 20 gradi.
Rimescolare cambiando le fasi di colpo faceva saltare le aste: le fasi vanno verso le nuove in 0,7 secondi, e mentre si spostano la parola non si compone.
Con ritmi diversi del 3% anche ad accordo raggiunto le aste ai capi restavano indietro di quasi 20 gradi di fase e il poster sembrava fuori tempo: ritmi diversi dell’1% e COUPLING 0.45 lasciano circa 7 gradi, quanto basta per sembrare vero.
Con l’autopilota «clic» il banco preme Scatter ogni 2,8 secondi: nelle miniature e nel video i metronomi venivano rimescolati prima di accordarsi, e il video si fermava a 8 secondi. L’autopilota è «loop»: la demo va da sola fino all’accordo, e il video dura 15 secondi.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 6,8 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 21 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Da fare

Licenza d’uso

Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.