Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
Il metronomo delle sillabe
Un metronomo disegnato con linee sottili, nello stile minimal: l’asta oscilla come un pendolo vero e a ogni battito una sillaba cade sulla riga e prende peso. L’ultima sillaba della battuta è l’accento, nel colore vermiglio. Il peso sull’asta si trascina: più in alto è più lento, più in basso più veloce, e il numero dei BPM cambia larghezza e peso insieme al tempo.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Metronome</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 aria-label="A metronome. On every beat a syllable falls onto the line; the last one of the bar is accented.">
<!-- the hairlines: the line the syllables land on and the metronome, drawn by the script -->
<svg class="scene" data-scene aria-hidden="true">
<path class="rule" data-rule d="" />
<g data-ticks></g>
<g data-metro>
<path class="floor" data-floor d="" />
<g data-swing>
<path class="arc" data-arc d="" />
<path class="mark" data-mark-l d="" />
<path class="mark" data-mark-r d="" />
<path class="flash" data-flash-l d="" />
<path class="flash" data-flash-r d="" />
</g>
<path class="body" data-body d="" />
<path class="scale" data-scale d="" />
<g data-rod>
<path class="rod" data-rod-line d="" />
<path class="weight" data-weight d="" />
</g>
<path class="pivot" data-pivot d="" />
</g>
</svg>
<!-- the syllables, one span each, built by the script -->
<div class="words" data-words aria-hidden="true"></div>
<span class="probe" data-probe aria-hidden="true"></span>
<!-- the handle on the metronome: drag it up and down, or use the arrow keys -->
<div class="grip" data-grip role="slider" tabindex="0" aria-label="Tempo" aria-valuemin="40" aria-valuemax="208" aria-valuenow="72" aria-valuetext="72 beats per minute"></div>
<p class="tempo" data-tempo aria-hidden="true">
<span class="tempo__num" data-bpm>72</span>
<span class="tempo__meta">
<span class="tempo__unit">BPM</span>
<span class="tempo__window"><span class="tempo__name" data-name>Adagio</span></span>
</span>
</p>
<p class="hint" data-hint aria-hidden="true">Drag the weight to change the tempo</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
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.
21 valori da cambiare
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 «Il metronomo delle sillabe» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco caldo si disegna una riga sottile e sopra la riga, a sinistra, un metronomo fatto di sole linee: il corpo a piramide, una scala di tacche, il perno a rombo, l’asta che sale e il peso che scivola giù lungo l’asta fino al suo tempo, con un capello di rimbalzo. Il numero dei BPM conta insieme al peso. L’asta viene tirata di lato, si ferma un istante e parte: oscilla come un pendolo vero, lenta agli estremi e veloce al centro, e a ogni estremo batte un colpo che fa scattare la tacca in cima all’arco. Prima della parola compaiono sotto la riga tante tacchette quante sono le sillabe, l’ultima in vermiglio. A ogni battito una sillaba cade dall’alto, leggera e stretta, atterra esattamente sul colpo, si schiaccia, si allarga sull’asse wdth e prende peso sull’asse wght; la riga cede di un paio di pixel sotto di lei e le sillabe già posate sentono il colpo. L’ultima, sull’ultimo battito della battuta, è l’accento: la più pesante, in vermiglio, e anche la tacca in cima all’arco si accende in vermiglio. Poi le sillabe si stringono nella parola intera con un piccolo assestamento, perdono peso e salgono via; il peso scivola da solo al tempo della parola dopo e l’asta accelera o rallenta senza perdere il battito: cadenza in Adagio, syncopation in Andante, allegro in Allegro. Si può prendere il metronomo e trascinare su e giù: il peso si sposta, il tempo cambia subito, il numero si stringe e si fa più nero quando il tempo è veloce, più largo e leggero quando è lento, e il nome del tempo cambia scorrendo.
Come funziona
Una battuta misurata in battiti
Tutta la regia è una timeline GSAP in pausa dove il tempo non è in secondi ma in battiti: la sillaba numero k della parola cade fra il battito b0 + k − 0,42 e b0 + k, la parola si chiude mezzo battito dopo l’accento, la successiva parte dopo REST battiti. La timeScale della timeline è il tempo diviso 60: a 72 BPM un battito dura 0,83 secondi, a 144 la metà. Cambiando la timeScale GSAP tiene fermo il punto in cui si trova, quindi il tempo può cambiare in qualsiasi momento senza salti.
Il pendolo
L’angolo dell’asta è SWING · cos(π · t), con t il tempo della timeline in battiti: ai battiti pari l’asta è tutta a destra, ai dispari tutta a sinistra, ferma un istante agli estremi e veloce al centro, come un pendolo vero. Il colpo scatta quando t passa un numero intero; la tacca dell’arco da quella parte si accende e si spegne. L’asta è una curva che si piega di un pixel verso l’esterno agli estremi, quando l’accelerazione è massima, e di più ai tempi veloci. Perché il giro torni identico, la battuta intera ha sempre un numero pari di battiti.
Il peso e il tempo
La posizione del peso sull’asta è un numero u fra 0 (in basso, 208 BPM) e 1 (in alto, 40 BPM), e il tempo è 208 · (40 / 208)^u: una scala logaritmica, come le tacche di un metronomo vero, più fitte ai tempi veloci. Trascinando, lo spostamento verticale del puntatore diventa u; il peso lo insegue con un piccolo ritardo, quindi anche il tempo cambia morbido. Le frecce della tastiera cambiano il tempo di 2 BPM (10 con Maiuscolo).
La sillaba che prende peso
Ogni sillaba è uno span dentro un altro: quello fuori si sposta e si schiaccia, quello dentro porta gli assi wght e wdth del carattere variabile Archivo. Cade leggera (wght 150) e stretta (wdth fino a 84); sul colpo passa a wdth 118 e a un’altezza di 0,86, poi torna a 100 e 1 con una molla elastica, mentre il peso sale a 560 (860 per l’accento). La larghezza di ogni sillaba si misura già al suo peso finale, e lo span esterno ha quella larghezza con il testo al centro, così il cambio di assi non sposta la parola.
La riga che cede
La riga è un path SVG ridisegnato a ogni fotogramma: se nessuna sillaba sta atterrando è una retta, altrimenti un punto ogni 5 pixel e sotto ogni sillaba appena posata una campana di Gauss profonda un paio di pixel, che torna piatta con la stessa molla. Il metronomo è disegnato in unità sue (il corpo è alto 100) con vector-effect: non-scaling-stroke, così le linee restano sottili a ogni misura dello schermo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORDS | script.js | ['ca-den-za', 'syn-co-pa-tion', 'al-le-gro'] | Le parole, una per battuta: i trattini dividono le sillabe, ne cade una a ogni battito e l’ultima è l’accento (fino a 6 parole, 8 sillabe l’una). |
TEMPI | script.js | [72, 104, 144] | Il tempo di ogni parola in battiti al minuto, da 40 a 208: il peso ci scivola da solo prima che la parola cominci (finché nessuno lo trascina). |
SWING | script.js | 26 | Di quanti gradi oscilla l’asta da ogni parte. |
REST | script.js | 4 | Quanti battiti vuoti dopo l’accento prima della parola seguente: in questi la parola si chiude, resta da leggere e se ne va. |
LIGHT | script.js | 150 | Il peso della sillaba mentre cade (da 100 a 900). |
HEAVY | script.js | 560 | Il peso che prende quando atterra (da 100 a 900). |
ACCENT | script.js | 860 | Il peso della sillaba accentata, l’ultima della battuta (da 100 a 900). |
SPRING | script.js | 1 | Quanto è elastico ogni atterraggio: 0.4 si posa secco, 2 ondeggia più a lungo. |
Quando usarla
Per un sito che vive di ritmo: una scuola di musica, un festival, un’app per esercitarsi, un podcast, il titolo di una pagina su tempo e misura. Anche come intestazione di una lezione di dizione o di una pagina di parole che si scompongono in sillabe. Il metronomo con il peso trascinabile è anche un controllo vero: si può usare per scegliere un valore.
Sul telefono
La stessa animazione con le misure adattate: il metronomo sta in alto al centro sulla sua base, la riga con le sillabe sotto, larga quasi come lo schermo, e il tempo sotto la riga. Il peso si trascina col dito, su e giù sul metronomo.
Con il movimento ridotto
Niente oscilla e niente cade: l’asta resta dritta e a ogni battito si accende in dissolvenza la tacca da una parte e dall’altra; le sillabe compaiono in dissolvenza già al loro posto nella parola e già col loro peso, l’accento in vermiglio, e la parola sparisce in dissolvenza. Il peso si trascina lo stesso, e si sposta senza scivolare.
Trappole
- Con la timeline misurata in secondi bastava cambiare il tempo una volta e le sillabe non cadevano più sul colpo. Misurata in battiti, con la timeScale uguale a BPM / 60, il pendolo, le cadute e i colpi leggono lo stesso orologio e non si separano mai, anche trascinando il peso a metà di una caduta.
- La timeline si ripete: se la battuta intera avesse un numero dispari di battiti, al giro dopo l’asta ripartirebbe dal lato sbagliato con uno scatto. Se le parole danno un totale dispari, alla fine si aggiunge un battito vuoto.
- Al secondo giro le sillabe della prima parte di ogni parola non cadevano più e quelle del giro prima restavano sulla riga, sovrapposte: il «colpo» dato alle sillabe vicine usava overwrite: true, che uccide tutti i tween di quell’oggetto, compresi quelli della timeline (la caduta e la dissolvenza), e una timeline che si ripete non può riavvolgere un tween ucciso. Ora quello che muove l’atterraggio (peso, larghezza, schiacciamento, la riga che cede) sta in un oggetto a parte, e il colpo usa overwrite: 'auto', che toglie solo la proprietà che si pesta.
- Le tacche in cima all’arco stavano esattamente sulla linea dell’asta: nel momento del colpo sembravano un pezzo d’asta staccato. Ora arco e tacche stanno tre gradi oltre l’oscillazione.
- Ai tempi veloci la parola intera restava sulla riga per un soffio prima di andarsene (a 208 BPM un battito dura 0,29 secondi): l’uscita ora parte 1,6 battiti prima della parola seguente invece di 1,9, e le tacchette della nuova parola compaiono sotto la riga mentre la vecchia sfuma, senza toccarla.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 16 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.
