L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
Il lettore col giradischi
Un lettore musicale con un giradischi visto dall'alto, e nessun suono: il disco è il lettore. Il vinile ha i solchi fini, una banda per ogni brano e la luce che resta ferma mentre il disco gira sotto di lei; play fa partire il piatto con la sua inerzia, il braccio si alza, va sul solco d'entrata e scende, e mentre il lato suona segue il solco verso il centro. Il tempo è il solco stesso: tenendo il disco con la mano e tirandolo indietro si torna indietro nel brano, come uno scratch.
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 turntable player</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">
<!-- the turntable player: a music player card whose top half is a turntable seen from above. The record turns
under a light that stays still, the arm cues onto the groove and follows it inwards, and the record can be
held and scratched. The grooves, the label and the light are painted on canvases, the arm is SVG. No sound -->
<section class="player" aria-label="Turntable player" data-player>
<div class="deck" data-deck>
<div class="platter" aria-hidden="true" data-platter></div>
<canvas class="disc" aria-hidden="true" data-grooves></canvas>
<canvas class="disc disc--spin" aria-hidden="true" data-spin></canvas>
<div class="spindle" aria-hidden="true" data-spindle></div>
<svg class="arm" aria-hidden="true" data-arm-svg></svg>
</div>
<div class="info">
<p class="info__title"><span class="roll" data-title></span></p>
<p class="info__by"><span data-artist>Ines Arlow</span> · <span data-album>Slow Weather</span></p>
</div>
<div class="side" role="slider" tabindex="0" aria-label="Position on side A" aria-valuemin="0" data-side>
<div class="side__bands" data-bands></div>
<span class="side__hover" aria-hidden="true" data-hover></span>
</div>
<div class="times" aria-hidden="true"><span data-at>0:00</span><span data-left>0:00</span></div>
<div class="buttons">
<button class="btn" type="button" aria-label="Previous song" data-prev><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 6v12M18 6.5v11L9.5 12z"/></svg></button>
<button class="btn btn--play" type="button" aria-label="Play" aria-pressed="false" data-play data-autoclic><svg viewBox="0 0 24 24" aria-hidden="true"><polygon data-a/><polygon data-b/></svg></button>
<button class="btn" type="button" aria-label="Next song" data-next><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M17 6v12M6 6.5v11l8.5-5.5z"/></svg></button>
</div>
<p class="sr" aria-live="polite" data-live></p>
</section>
</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 «Il lettore col giradischi» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una scheda di lacca color avorio larga 380 pixel. In alto il giradischi visto dall'alto: il piatto d'alluminio, un disco nero con l'etichetta arancio di Slow Weather di Ines Arlow (un sole che tramonta nel mare, il titolo e l'artista scritti in tondo, Side A e 33⅓), e a destra il braccio sul suo appoggio, col perno, il contrappeso, la testina e la levetta della discesa. Sotto, il titolo del brano, l'artista e l'album, il lato srotolato in cinque bande (una per brano, larga quanto dura), il tempo passato e quello che manca, e i pulsanti indietro, play e avanti. Sul disco si vedono i solchi fini, le cinque bande con le loro parti forti e piane, gli spazi lisci e lucidi fra un brano e l'altro, il solco d'entrata, quello d'uscita e il bordo rialzato; la luce fa sui solchi due ventagli opposti che restano fermi mentre il disco gira, e si sposta un poco seguendo il puntatore. Premendo play il motore porta il piatto a 33 giri in poco più di un secondo e l'etichetta comincia a girare; il braccio si alza, la levetta scatta, il braccio va sul solco d'entrata e scende, e la sua ombra si stringe fino a toccarlo: in un secondo e mezzo la musica è partita. Da lì il tempo corre con la rotazione del disco e il braccio segue il solco verso il centro. Pausa alza il braccio dove si trova e il freno ferma il piatto in poco meno di due secondi; avanti e indietro alzano il braccio, lo portano sulla banda del brano e lo riabbassano, e il titolo scorre. Il disco si prende col mouse o col dito e segue la mano, scivolando un poco sul piatto: tirandolo indietro il tempo torna indietro, lasciandolo il motore lo riporta alla sua velocità. La testina si prende per la levetta e si porta dove si vuole, e il tempo segue il braccio; fuori dal disco torna sull'appoggio. Sulle bande sotto il titolo un clic o un trascinamento portano il braccio in quel punto. Alla fine del lato il braccio torna da solo sull'appoggio e il piatto si ferma.
Come funziona
Il lato in tempi e raggi
Il lato è una fila di tratti, ognuno con un tempo d'inizio e di fine e un raggio d'inizio e di fine: il solco d'entrata, i brani, gli spazi fra un brano e l'altro, il solco d'uscita fino al solco chiuso. Il passo del solco è costante, quindi dentro un brano il raggio cala in proporzione al tempo e ogni banda è larga quanto dura il brano; uno spazio fra i brani dura 2,5 secondi ma fa un passo largo. radiusAt(t) e timeAtRadius(r) passano dall'uno all'altro: il braccio si mette dove dice il tempo, e un braccio spostato a mano dice il tempo.
I solchi dipinti dal raggio
Un disco è uguale a sé stesso in ogni direzione, quindi si dipinge una volta dal suo raggio: per quattro campioni a pixel si calcola com'è quel raggio (quanto è chiaro, quanto riflettono i solchi, quanto riflette il vinile liscio, quanto è disco) e ogni valore si media su un pixel, così i solchi fini non fanno mai moiré. Nei brani il solco è un seno di 1,3 unità con la fase un po' irregolare, più le parti forti e piane che lo rendono più largo o più stretto; gli spazi sono lisci e scuri, il bordo e l'anello intorno all'etichetta sono rialzati. Ogni pixel prende il suo valore dalla distanza dal centro: un disco scuro e due maschere, solchi e vinile liscio.
La luce che resta ferma
Un solco tondo riflette la luce solo lungo il raggio che punta verso di lei: sul disco si vede un ventaglio verso la luce e uno più debole dalla parte opposta. Ogni ventaglio è un gradiente conico (createConicGradient) con 240 fermate di gaussiane, tagliato dalla maschera con destination-in e sommato al disco con screen: largo e granuloso sui solchi, stretto e lucido sul vinile liscio. Il disco dipinto non gira, quindi la luce resta ferma mentre l'etichetta gira; il puntatore sposta l'angolo della luce di qualche grado, e l'anello d'alluminio del piatto usa la stessa luce con un conic-gradient del CSS.
Il braccio con la sua geometria
La puntina sta su un cerchio intorno al perno, di raggio L un poco più lungo della distanza d fra perno e centro (lo sbalzo). Per un solco di raggio r l'angolo viene dal triangolo: cos θ = (d² + r² − L²) / 2dr, e da lì il punto della puntina e l'angolo del braccio. La testina è girata di un angolo calcolato perché la cartuccia stia lungo il solco a due terzi del disco, così il tubo va dal perno al collare fuori asse. Alzandosi il braccio cresce di poco e le sue due ombre (una netta, una morbida) si allontanano dalla luce; la levetta della discesa ruota. Una timeline di GSAP alza, porta e abbassa in CUE secondi.
Il piatto, il motore e la mano
Il piatto ha una velocità che il motore porta a RPM × 6 gradi al secondo con una coppia limitata e un arrivo morbido, e che il freno toglie in BRAKE secondi. Una mano sul disco dà un angolo che il disco insegue con un ritardo di SLIP secondi, e la sua velocità resta al disco quando viene lasciato. Con la puntina giù il tempo avanza di quanto gira il disco diviso per la velocità giusta: in partenza il brano va più lento, e tirando indietro torna indietro. Tutto gira sul ticker di GSAP con il passo limitato a 1/30 di secondo, e il ticker si stacca quando niente si muove.
Le bande, i tasti e l'anteprima
Le bande sotto il titolo sono un role slider: larghe quanto i brani, la parte suonata nel colore dell'etichetta, la banda che suona più alta e con la testina. Un clic o un trascinamento portano il braccio alzato in quel punto e lo riabbassano se suona; frecce e pagine si spostano di 5 e 30 secondi, Spazio fa play e pausa. Il pulsante play ha aria-pressed. Un clic da script sul play (l'anteprima della libreria) fa a turno play, uno scratch finto, il brano dopo e la pausa.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SIDE | script.js | [['Paper Moons', '3:48'], ['Glasshouse', '4:12'], …] | I brani del lato, dal bordo verso il centro: il titolo e quanto dura (minuti:secondi). Ogni banda del disco è larga quanto dura il suo brano. |
RPM | script.js | 33.33 | La velocità del disco, in giri al minuto (45 per un singolo); l'etichetta la scrive. |
SPINUP | script.js | 1.2 | I secondi che il motore impiega a portare il piatto alla sua velocità. |
BRAKE | script.js | 1.8 | I secondi che il piatto impiega a fermarsi quando la musica va in pausa. |
CUE | script.js | 0.45 | I secondi che il braccio impiega a scendere sul disco. |
SLIP | script.js | 0.05 | Quanto il disco scivola sotto la mano che lo tiene, in secondi di ritardo. |
SHEEN | script.js | 1 | Quanto luccica il vinile: 0 opaco, 1 come stampato, 2 lucido. |
LIGHT | script.js | 1 | Quanto il puntatore sposta la luce (0 = non la sposta). |
Quando usarla
Per il sito di un musicista, di un'etichetta o di un negozio di dischi, la pagina di un album o di una ristampa in vinile, una playlist curata, un podcast con l'aria di una volta: un lettore che deve sembrare un oggetto vero.
Sul telefono
La scheda è larga al massimo 380 pixel e il giradischi si stringe con lei (a 390 è largo 358). Col dito si prende il disco e lo si gira senza far scorrere la pagina (touch-action none solo sul disco, sulla testina e sulle bande); la testina risponde in un cerchio di 42 pixel e i pulsanti sono di 48 e 64. La luce segue il dito mentre tocca la scheda.
Con il movimento ridotto
Il piatto non gira e il braccio non si muove: sparisce in dissolvenza e ricompare già al suo posto, su o giù; il tempo corre lo stesso mentre suona. Il titolo cambia in dissolvenza, l'icona di play e le bande cambiano subito, e la scheda entra in dissolvenza. Il disco si può ancora girare con la mano, che lo tiene senza scivolare.
Trappole
- Un rumore a media frequenza nei solchi faceva sembrare il disco pieno di anelli, come un 78 giri, e i cinque brani non si leggevano più: i solchi ora sono un seno fine con la fase un po' irregolare, le parti forti e piane cambiano poco, e gli spazi fra i brani sono più scuri e più lucidi.
- Con la luce uguale sui solchi e sul vinile liscio si vedevano solo i trattini lucidi degli spazi fra i brani: il ventaglio dei solchi è più largo e più forte, quello del liscio più stretto.
- Il segno ⅓ non c'è nella parte latina di Archivo e il canvas lo prendeva da un altro carattere: il 33⅓ dell'etichetta è scritto a mano, un 1 e un 3 piccoli e una barretta.
- Al ritorno automatico il braccio passa sopra tutto il disco, e il tempo che lo seguiva riavvolgeva tutti i brani in un secondo: durante il ritorno il tempo resta fermo alla fine del lato, e torna a 0:00 quando il braccio è sull'appoggio.
- Col braccio verso il centro il contrappeso usciva dalla scheda in alto a destra: il perno è stato messo dove il contrappeso resta dentro anche alla fine del lato, a una distanza dal centro di una volta e mezzo il raggio del disco, come su un braccio vero da nove pollici.
- Con la testina girata verso il disco il tubo non può andare dritto dal perno alla puntina: va dal perno al collare della testina, un poco fuori asse, e l'angolo è calcolato dalla stessa geometria.
- Fra la discesa del braccio e due secondi di solco d'entrata il tempo restava fermo a 0:00 per quattro secondi dopo play, e nella miniatura il lettore sembrava spento: il braccio parte mentre si alza e comincia a scendere prima di arrivare, la discesa dura CUE = 0,45 secondi e il solco d'entrata un terzo di secondo, così la musica parte in un secondo e mezzo.
- Passando al brano dopo nello stesso secondo (tutti e due a 0:00) il tempo che manca restava quello del brano di prima: le scritte si riscrivono anche quando cambia il brano, non solo il secondo.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 20 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 7 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.
