Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il tornio del disco
L’esportazione del master di un album come un tornio da incisione visto dall’alto: il piatto prende velocità, il carrello porta la testina sul bordo della lacca nera e la puntina scende e scava il solco verso il centro. Il raggio inciso è l’avanzamento: dove il solco è scavato la lacca accende un ventaglio di luce iridescente che resta fermo mentre il disco gira, dove è ancora vergine resta nera, lucida e piatta. Alla fine la testina si alza e si parcheggia e il piatto frena; se il disco di destinazione si scollega la puntina salta su e Retry la riabbassa nello stesso solco.
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, viewport-fit=cover">
<title>The mastering lathe</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/caveat@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the export panel of a music app: the master is cut into a lacquer disc on a lathe seen from above. The stylus
comes down at the edge and cuts the groove inwards as the file is written: the cut part catches the light in
a fan of colours, the blank part stays black and glossy. The disc, the head and the light are painted on the
canvas; the words and the button are HTML -->
<section class="lathe" aria-labelledby="lathe-title" data-lathe>
<div class="lathe__deck" role="progressbar" aria-labelledby="lathe-title" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-bar>
<canvas class="lathe__paint" aria-hidden="true" data-paint></canvas>
<div class="lathe__top" aria-hidden="true">
<p class="lathe__phase">
<span class="lathe__swap" data-phase>Ready to export</span>
<svg class="lathe__tick" viewBox="0 0 24 24" data-tick><path d="M5.5 12.6l4.1 4.1L18.6 7.4" pathLength="1"/></svg>
</p>
<p class="lathe__note"><span class="lathe__swap" data-note></span></p>
</div>
<div class="lathe__bottom" aria-hidden="true">
<p class="lathe__big"><span class="lathe__swap" data-big></span></p>
<p class="lathe__time"><span class="lathe__swap" data-time>24-bit WAV · 96 kHz</span></p>
</div>
</div>
<div class="lathe__foot">
<div class="lathe__file">
<h2 class="lathe__title" id="lathe-title">Night Swim (Master).wav</h2>
<p class="lathe__meta" data-meta></p>
</div>
<button class="lathe__btn" type="button" data-action data-autoclic><span class="lathe__label" data-label>Export master</span></button>
</div>
<p class="sr" role="status" 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.
37 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 tornio del disco» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, da solo al centro, il pannello di esportazione di un programma musicale. A sinistra un piatto di metallo scuro con le tacche dello stroboscopio sul bordo e sopra un disco di lacca nera, ancora vergine: lucido come uno specchio, ci si vede riflessa la finestra di luce dello studio. In mezzo il perno e il fermo di metallo tornito con tre viti, e intorno, scritto a matita grassa, SIDE A · NIGHT SWIM · 24/96. A destra due guide cromate e, sopra, il carrello con la testina d’incisione parcheggiata fuori dal disco. Accanto, Ready to export, 4 tracks · Side A, la durata 16:27 e 24-bit WAV · 96 kHz; sotto, Night Swim (Master).wav con Stereo · 569 MB e il pulsante Export master. Premuto, il piatto prende velocità (le tacche si fondono in un anello), il carrello corre verso il disco e si ferma sul bordo con un piccolo rimbalzo, la testina scende, tocca la lacca e si assesta, e l’ombra le si stringe sotto. Poi la puntina incide: il solco cresce dal bordo verso il centro e, dove è scavato, la lacca prende la luce in un ventaglio fermo, una riga bianca verso la luce e una più debole dalla parte opposta, con i colori dell’arcobaleno ai lati, mentre la musica incisa gira con il disco come raggi appena visibili. Fra un brano e l’altro il passo si allarga e la testina corre più in fretta: resta un anello liscio e scuro con una riga sottile, come nei dischi veri. Accanto cambiano il brano che si sta incidendo (Undertow, Night Swim, Pale Harbour, Last Ferry), la percentuale e il tempo del lato (8:01 of 16:27). Pause alza la puntina e frena il piatto; Resume lo riporta a velocità e la riabbassa nello stesso solco. In fondo la puntina incide il solco d’uscita e il solco chiuso, si alza, il carrello torna al parcheggio con un rimbalzo e il piatto frena piano: Master ready con un segno di spunta disegnato, Saved to Masters e 569 MB · 16:27. Export again rimette una lacca nuova (il solco sfuma nel nero lucido mentre il piatto gira) e ricomincia. Una volta su due, nella demo, verso il 58% il disco di destinazione si scollega: la puntina salta su con un sobbalzo, il piatto si ferma, e in rosso compare Drive offline con Masters disconnected e il punto in cui si è fermato; Retry riporta il piatto a velocità, riabbassa la puntina dove si era alzata e l’incisione continua.
Come funziona
La luce dipende solo dal posto sullo schermo
Un solco è quasi un cerchio, quindi come riflette non dipende da quanto il disco ha girato ma solo da dove sta sullo schermo: il ventaglio resta fermo mentre il disco gira. Per questo la lacca incisa si dipinge una volta sola, pixel per pixel con getImageData, nello spazio dello schermo, e a ogni fotogramma si ritaglia solo l’anello inciso, fra la puntina e il bordo, con due archi e clip().
Un riflesso per fibre (Kajiya-Kay)
Per ogni pixel la direzione del solco è T = (−sin θ, cos θ) e H è il vettore a metà fra la luce (alta 50°, in alto a sinistra) e l’occhio. Il riflesso di una fibra è (1 − (T·H)²) elevato a una potenza: con T·H = |H| sin(θ − φ) si accende solo lungo la retta che passa per la luce e per il centro, da tutte e due le parti, stretto con l’esponente 520 e largo con 30. Dalla parte della luce pesa di più.
I colori del reticolo
Intorno al nucleo bianco i solchi fanno da reticolo di diffrazione: il colore va con l’angolo, dal blu vicino alla riga al rosso più lontano, preso da una tabella di 65 lunghezze d’onda fra 410 e 690 nanometri. Ogni brano ha un passo un po’ diverso, quindi i suoi colori stanno un po’ più dentro o più fuori. Negli anelli lisci fra i brani e nel solco d’uscita la lacca torna specchio: una riga sottilissima, pochi colori e il riflesso della finestra di luce.
Il lato è una spirale a pezzi
Il lato si divide in solco d’entrata, brani, pause e solco d’uscita, ognuno lineare sia nell’avanzamento sia nel raggio: i brani prendono raggio in proporzione alla durata, le pause poco raggio ma un po’ di tempo, così la testina fra un brano e l’altro corre più in fretta e lascia l’anello liscio. Dallo stesso elenco vengono il raggio della puntina, il nome del brano e il tempo del lato.
La musica gira col disco
Quello che gira è una maschera nello spazio del disco: passaggi più forti e più piani lungo il raggio e il ritmo come raggi appena visibili, cos((3 + k)·θ + 0,22·r). A ogni fotogramma si disegna ruotata in un canvas di lavoro, il ventaglio ci entra con source-in e il risultato si somma alla lacca con lighter. Girano con lei anche la scritta a matita, messa lettera per lettera lungo un arco, e le viti del fermo; la luce sugli anelli del fermo invece resta ferma.
Testina, piatto e chi non vede
Il piatto ha inerzia (GSAP porta la velocità su e giù, l’angolo si somma a ogni fotogramma); la puntina segue chi scrive il file con una molla smorzata che non torna mai indietro, e dove tocca la lacca il raggio inciso si accorcia. Alzata, la testina si avvicina all’occhio del 6% e la sua ombra si allontana e si sfoca. Il pannello è un role=progressbar con aria-valuenow e aria-valuetext («48 percent, Pale Harbour, 8:01 of 16:27»), aria-busy mentre lavora e una riga aria-live; un clic da script, quello dell’anteprima, non mette mai in pausa.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SECONDS | script.js | 9 | Quanto dura un’esportazione nella demo, in secondi (una vera segue chi scrive il file). |
TRACKS | script.js | [['Undertow', '4:12'], ['Night Swim', '3:48'], ['Pale Harbour', '5:06'], ['Last Ferry', '3:21']] | I brani del lato A, dal bordo verso il centro: titolo e durata. Le durate decidono quanto raggio prende ognuno, la durata del lato e la misura del file. |
RPM | script.js | 33.33 | La velocità del piatto mentre incide, in giri al minuto (45 per un singolo). |
SPINUP | script.js | 1.1 | I secondi che il motore impiega a portare il piatto a velocità. |
BRAKE | script.js | 2.4 | I secondi che il piatto impiega a fermarsi alla fine. |
FAIL_EVERY | script.js | 2 | Nella demo, un’esportazione su quante va storta (0 mai). |
FAIL_AT | script.js | 0.58 | Fin dove arriva l’esportazione che va storta, da 0 a 1. |
DRIVE | script.js | 'Masters' | Il disco che si scollega allora, e dove si salva il master. |
STALLS | script.js | 1 | Quanto spesso chi scrive il file si ferma un attimo: 0 mai, 1 ogni tanto, 2 spesso. |
FOLLOW | script.js | 0.3 | Quanto ci mette la puntina a raggiungere chi scrive il file, in secondi. |
SHEEN | script.js | 1 | Quanto è luminoso il ventaglio di luce sui solchi: 0 niente, 1 come appena inciso. |
RAINBOW | script.js | 1 | Quanto colore tirano fuori i solchi dalla luce: 0 niente, 1 come un disco. |
LIGHT | script.js | 225 | Da dove viene la luce, in gradi intorno al disco (0 a destra, 90 in basso, 225 in alto a sinistra). |
Quando usarla
Per un’attesa di qualche secondo o di qualche minuto in un’app che lavora col suono: esportare un master o un mix, il bounce di una sessione, la conversione di un album, il caricamento di un disco su una piattaforma di distribuzione. Il solco che si scava dice «sto scrivendo il tuo brano dall’inizio alla fine» meglio di una barra, e i brani che passano dicono a che punto si è; per un’attesa breve o senza esito è troppo.
Sul telefono
Il pannello prende la larghezza dello schermo meno 32 pixel (358 su 390): il disco passa da 200 a 186 pixel, così accanto restano 118 pixel per le scritte, e il carrello parcheggiato sta ancora dentro le guide. Le pitture della lacca si rifanno alla densità vera dello schermo, fino a due volte, solo quando cambia la misura del disco. Una scritta lunga va a capo (sopra) o finisce coi puntini (sotto). Il pulsante è una pillola alta 36: col dito si schiaccia e rimbalza, e la scritta si allarga sull’asse della larghezza solo sotto il mouse.
Con il movimento ridotto
Il piatto non gira e il carrello non corre: la testina compare già sul bordo, sale e scende senza rimbalzi, e da lì la puntina segue l’avanzamento, perché è lei a dire a che punto si è. Il ventaglio di luce e i colori restano, fermi come sono comunque. La lacca nuova arriva in dissolvenza, e le parole nuove entrano in dissolvenza senza spostarsi.
Trappole
- Ridisegnare ogni pixel della lacca a ogni fotogramma costava troppo: siccome il riflesso dei solchi non cambia girando, si dipinge una volta sola nello spazio dello schermo, e a ogni fotogramma gira solo la maschera della musica, unita al riflesso con source-in.
- Il riflesso della finestra di luce sulla lacca vergine, con i bordi molto sfumati, sembrava una macchia di grasso: ora ha i bordi netti, è più chiaro dalla parte della luce e ha solo un alone leggero, e si legge come uno specchio.
- Fra un brano e l’altro il nome cambiava due volte in un decimo di secondo (prima «il prossimo», poi il brano): ora nella pausa si mostra già il brano che arriva, e la scritta cambia una volta sola.
- Con l’arcobaleno pieno al 55% i solchi sembravano un adesivo olografico: il colore è sceso al 44% e il lobo bianco largo è salito, così il ventaglio è soprattutto argento con i colori ai lati.
- Durante il ritorno della lacca nuova e il ricollegamento sotto restavano scritti la misura del file o il punto in cui si era fermata: ora anche quella riga torna subito al tempo del lato.
- L’ombra del piatto con shadowBlur e le guide si ridisegnavano a ogni fotogramma: non cambiano mai, quindi stanno in un canvas dipinto una volta sola e disegnato con un drawImage.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0, Caveat (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 17 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 8 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.
