L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
Lo slider del metronomo
Il cursore del tempo di un’app per esercitarsi con la musica, nello stile minimal: sopra una barra sottile un metronomo disegnato a linee oscilla al tempo scelto, col peso che sale sull’asta per i tempi lenti e scende per quelli veloci, un segno vermiglio a ogni battito e la cifra grande che rotola le sue cifre e si allarga col 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>The metronome slider</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the tempo field of a practice app: a slider for the beats per minute, and above it a metronome drawn in
hairlines that swings at the tempo chosen. As in a real metronome the weight slides up the rod for a slow
tempo and down for a fast one. The real range input underneath carries the value, the keys and the screen
reader; a tap on the metronome stops it and starts it again -->
<div class="tempo" data-tempo>
<button class="tempo__metro" type="button" aria-pressed="true" aria-label="Pause the metronome" data-metro>
<svg class="metro" viewBox="0 0 200 220" aria-hidden="true">
<!-- the two ticks that light at the ends of the swing -->
<path class="metro__arc" data-arc />
<path class="metro__tick" data-tick-l />
<path class="metro__tick" data-tick-r />
<!-- the case: a tall pyramid in a hairline, with its foot and the face of the scale -->
<path class="metro__case" d="M74 18 h52 l38 176 h-128 z" />
<path class="metro__foot" d="M30 194 h140 l6 10 h-152 z" />
<path class="metro__face" d="M88 40 h24 l20 120 h-64 z" />
<g class="metro__marks" data-marks></g>
<!-- the pendulum: rod, weight and pivot; the script turns it round the pivot -->
<g class="metro__arm" data-arm>
<line class="metro__rod" x1="100" y1="172" x2="100" y2="26" />
<g data-weight>
<path class="metro__weight" d="M91 -7 h18 l3 14 h-24 z" />
<path class="metro__shine" d="M94 -4 h4 l1 8 h-5.5 z" />
</g>
</g>
<circle class="metro__pivot" cx="100" cy="172" r="3.2" />
</svg>
</button>
<div class="tempo__read" aria-hidden="true">
<p class="tempo__num" data-num></p>
<div class="tempo__side">
<span class="tempo__unit">BPM</span>
<span class="tempo__name"><span class="tempo__name-text" data-name>Andante</span></span>
</div>
</div>
<div class="tempo__track" data-track>
<svg class="track" aria-hidden="true" data-track-svg></svg>
<input class="tempo__range" type="range" id="tempo-range" min="40" max="208" step="1" value="92" aria-label="Tempo, beats per minute" data-range>
</div>
</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.
32 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 «Lo slider del metronomo» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco c’è un metronomo disegnato a linee sottili grigie: la cassa a piramide, il piede e la faccia con le tacche dei tempi. Dentro, l’asta nera oscilla dal perno in basso, col peso bordato di vermiglio; a ogni fine dell’oscillazione è un battito, e sul lato dove arriva il pendolo si accende per un attimo un trattino vermiglio, mentre l’asta fa un piccolo salto di un pixel. Sotto, grande, la cifra dei battiti al minuto, per esempio 92, con accanto BPM e il nome del tempo in corsivo grigio, Andante. Sotto ancora la barra: una riga sottile, nera fino al pomello e grigia dopo, con le tacche dei tempi (Largo, Andante, Allegro, Presto scritti sotto) e il pomello, una barretta vermiglia ritta. Trascinando il pomello, o toccando dove si vuole sulla barra, il tempo cambia: il peso scivola sull’asta, in su per i tempi lenti e in giù per quelli veloci, su una molla che lo fa arrivare con un piccolo rimbalzo, e il pendolo accelera o rallenta senza mai saltare. Le cifre rotolano ognuna nella sua colonna, la cifra si allarga col tempo e il nome del tempo scorre quando si passa in uno nuovo. Toccando il metronomo si ferma e l’asta si posa al centro; toccandolo di nuovo riparte. Se nessuno lo tocca, una mano finta trascina il cursore da sola fra tempi diversi.
Come funziona
La fase che non salta
Il pendolo non segue un orologio ma una fase che cresce a ogni passo di 2π per la frequenza (il tempo diviso 120, perché a ogni oscillazione intera ci sono due battiti) per il tempo trascorso. Cambiando tempo cambia solo quanto cresce la fase, quindi il pendolo accelera o rallenta dov’è, senza scatti. L’angolo è SWING per il seno della fase, per quanto il metronomo è acceso.
Il battito alle due estremità
Un battito è il momento in cui la fase passa un quarto di giro più un mezzo giro intero: lì il pendolo è al massimo da una parte. Il segno vermiglio di quel lato si accende e si spegne in TICK secondi con una curva al quadrato, e l’asta salta di KICK pixel e torna: il colpo del meccanismo.
Il peso sull’asta
Come in un metronomo vero il peso sta più in alto per i tempi lenti e più in basso per quelli veloci: la sua distanza dal perno va da 136 a 50 unità del disegno lungo il cursore. Lo porta lì una molla (WEIGHT_SPRING) che lo fa arrivare con un rimbalzo; le tacche sulla faccia segnano dove sta il peso per ogni tempo con un nome.
Le cifre a colonne
La cifra è fatta di tre colonne, ognuna con le dieci cifre una sopra l’altra in una maschera alta una riga: cambiando numero ogni colonna scorre alla sua cifra con back.out, e la colonna delle centinaia si stringe a zero sotto i 100. La larghezza della cifra (font-stretch di Roboto Flex) va da WIDTH[0] a WIDTH[1] lungo il cursore.
Le molle sul ticker
Pomello, peso e accensione del pendolo sono molle calcolate sul ticker di GSAP a passi di 1/240 di secondo, col passo limitato a 1/30. Quando il metronomo è fermo e niente si muove più, il ticker si toglie, e un tocco lo rimette.
Il cursore vero e la mano finta
Sotto il disegno c’è un input range vero, invisibile, che tiene il valore, i tasti (frecce, Pagina su e giù, Inizio, Fine) e il lettore di schermo con un aria-valuetext come 92 beats per minute, Andante. Dopo IDLE secondi senza tocchi una timeline di GSAP fa da mano finta e trascina il pomello fra sei tempi; il primo tocco vero la ferma.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
MIN_BPM | script.js | 40 | Il tempo più lento. |
MAX_BPM | script.js | 208 | Il tempo più veloce. |
START_BPM | script.js | 92 | Il tempo all’apertura della pagina. |
SWING | script.js | 24 | Quanto oscilla il pendolo da ogni lato, in gradi. |
WEIGHT_SPRING | script.js | [140, 0.62] | La molla del peso che scorre sull’asta: quanto è rigida e quanto è frenata. |
KNOB_SPRING | script.js | [260, 0.82] | La molla del pomello che segue la mano: quanto è rigida e quanto è frenata. |
TICK | script.js | 0.32 | Quanto resta acceso il segno vermiglio di ogni battito, in secondi. |
KICK | script.js | 1 | Di quanto salta il pendolo a ogni battito, in pixel del disegno. |
WIDTH | script.js | [40, 140] | L’asse della larghezza della cifra al tempo più lento e al più veloce (da 25 a 151). |
IDLE | script.js | 2.6 | Dopo quanti secondi senza un tocco la mano finta muove il cursore. |
TEMPI | script.js | [[60, 'Largo'], [76, 'Adagio'], [108, 'Andante'], [120, 'Moderato'], [168, 'Allegro'], [208, 'Presto']] | I nomi dei tempi: fino a questo tempo, questo nome. |
Quando usarla
Per il tempo di un metronomo o di un’app per esercitarsi, la velocità di riproduzione di un lettore, il ritmo di un allenamento o qualunque cursore dove il valore è un ritmo e conviene vederlo battere mentre lo si sceglie.
Sul telefono
Il metronomo si misura sull’altezza dello schermo (al massimo il 30%) e la cifra si rimpicciolisce con lui; la barra prende la larghezza meno un margine. Col dito si trascina di lato mentre la pagina scorre ancora in su e in giù (touch-action: pan-y), e un tocco sul metronomo lo ferma e lo fa ripartire.
Con il movimento ridotto
Il pendolo sta fermo al centro e non ci sono segni dei battiti; il peso è subito al suo posto, le cifre cambiano senza scorrere e il nome del tempo cambia di colpo. Il cursore funziona come sempre.
Trappole
- Calcolando l’angolo come seno del tempo trascorso per la frequenza, a ogni cambio di tempo il pendolo saltava in un punto nuovo: serve una fase che si accumula passo per passo.
- Il battito contato quando il seno cambia segno cadeva al centro dell’oscillazione, dove nei metronomi veri non batte niente: il battito si conta alle due estremità, un quarto di giro più in là.
- Con il peso legato direttamente al tempo, trascinando veloce il peso si teletrasportava sull’asta: segue il pomello su una molla sua, più morbida.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,7 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 24 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.
