L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
Il lettore a cassetta
Un lettore musicale con una musicassetta trasparente vista da vicino, e nessun suono: il nastro è il lettore. Plastica fumé con i riflessi, viti, etichetta scritta a mano; suonando le bobine girano, il nastro marrone passa dall'una all'altra e la bobina che si svuota gira sempre più veloce, come vuole la fisica dei raggi. Avanti e indietro mandano il nastro a tutta velocità fino al brano, con le bobine sfocate dal movimento. Girando una bobina col dito si va avanti e indietro, e il nastro si allenta in un'ansa che pende e poi si ritende.
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 cassette player</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 cassette player: a music player whose top is a clear smoked cassette seen close up, sitting on the deck.
The reels, the tape and the deck's head are painted on a canvas every frame; the shell, the label and the
screws are SVG. The packs of tape grow and shrink with the time, a reel turned by hand pulls the tape or lets
it go slack, and the keys go down like a deck's piano keys. No sound -->
<section class="player" aria-label="Cassette player" data-player>
<div class="deck" data-deck>
<svg class="slot" viewBox="0 0 352 252" aria-hidden="true" data-slot></svg>
<svg class="shell" viewBox="0 0 352 252" aria-hidden="true" data-back></svg>
<canvas class="inside" aria-hidden="true" data-inside></canvas>
<svg class="shell" viewBox="0 0 352 252" aria-hidden="true" data-front></svg>
<div class="grip" role="slider" tabindex="0" aria-label="Position on side A" aria-valuemin="0" data-grip></div>
</div>
<ol class="card" aria-label="Side A" data-list></ol>
<div class="times" aria-hidden="true"><span data-at>0:00</span><span data-left>0:00</span></div>
<div class="keys">
<button class="key" type="button" aria-label="Previous song" data-key="rew"><span class="key__body"><span class="key__cap"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11.5 6.5v11L4 12zM20 6.5v11L12.5 12z"/></svg></span></span></button>
<button class="key key--play" type="button" aria-label="Play" aria-pressed="false" data-key="play" data-autoclic><span class="key__body"><span class="key__cap"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l10.5-6.5z"/></svg></span></span></button>
<button class="key" type="button" aria-label="Pause" data-key="pause"><span class="key__body"><span class="key__cap"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 6h3.6v12H7zM13.4 6H17v12h-3.6z"/></svg></span></span></button>
<button class="key" type="button" aria-label="Next song" data-key="ff"><span class="key__body"><span class="key__cap"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.5 6.5v11L20 12zM4 6.5v11L11.5 12z"/></svg></span></span></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.
34 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 a cassetta» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco un lettore di alluminio spazzolato largo 380 pixel. In alto una musicassetta di plastica fumé trasparente, vista da vicino: dentro si vedono le due bobine di nastro marrone sui loro mozzi bianchi coi denti, il perno del registratore in ogni mozzo, i rullini negli angoli, il feltrino sulla molla di bronzo e il nastro che corre dalla bobina di sinistra lungo il bordo di sotto fino a quella di destra. Sopra c'è l'etichetta di carta con la striscia arancio di Aubade, la A del lato e il titolo scritto a penna, Long drive, June; la plastica ha la finestrella, la cornice in rilievo, la grana opaca, cinque viti e due riflessi che si spostano col puntatore. Sotto la cassetta, nella fessura del lettore, la testina cromata, il capstan e il rullo pressore. Poi il cartoncino del lato A scritto a mano su carta a righe (cinque brani con la loro durata), il tempo passato e quello che manca, e quattro tasti a pianoforte: indietro, play arancio, pausa e avanti. Premendo play il tasto resta giù, la testina e il rullo salgono nella cassetta e spingono il nastro sul feltrino, e il nastro comincia a correre: prima passa la coda trasparente, poi la giunta bianca e il nastro marrone, e la musica parte. Le bobine girano a velocità diverse: quella piena lenta, quella vuota svelta, e man mano che il lato va avanti si scambiano. Avanti e indietro abbassano il loro tasto, ritirano la testina e mandano il nastro a tutta velocità fino al brano dopo o all'inizio di quello in corso: le bobine si sfocano, quella che si riempie cresce a vista, e arrivati il tasto risale con un rimbalzo e la musica riparte. Pausa fa saltare su il tasto di play e la testina scende. Un clic su un brano del cartoncino ci va col nastro veloce e lo suona; il brano che suona è scritto più marcato e un evidenziatore giallo lo copre man mano che passa. Le bobine si prendono col mouse o col dito: girando una bobina nel verso che avvolge, il nastro si tende, passa sotto la testina (il tempo va avanti o indietro) e trascina l'altra bobina, che lasciata a sé gira ancora un poco e lascia un'ansa di nastro; girandola nell'altro verso il nastro si allenta e pende in un'ansa che urta le bobine e la plastica, finché la frizione lo riavvolge e lo ritende.
Come funziona
Il tempo è il nastro
Tutto parte da un numero solo, x, i secondi di nastro passati sotto la testina. Il lato è la coda trasparente, i brani con tre secondi di silenzio fra uno e l'altro e un po' di nastro vuoto in fondo; il nastro corre a 4,76 centimetri al secondo, che nel disegno sono 167 unità. Il tempo del brano, il brano che suona, l'evidenziatore e il punto della giunta fra coda e nastro marrone vengono tutti da x.
I raggi delle bobine
Una bobina è nastro avvolto, quindi la sua area cresce con la lunghezza: r² = r₀² + k·L, con r₀ il mozzo e k scelto perché il nastro intero faccia una bobina piena di 79 unità. La bobina di sinistra ha il nastro che manca, quella di destra quello passato. Siccome il nastro passa sotto la testina sempre alla stessa velocità, ogni mozzo gira di v / r: all'inizio quello vuoto gira più del doppio di quello pieno, e alla fine del lato si scambiano. Il nastro libero va lungo le tangenti esterne fra le bobine e i rullini, ricalcolate a ogni fotogramma.
Il lasco del nastro
Ogni tratto libero, da una bobina al suo rullino, sa quanto nastro ha in più della linea dritta. Una bobina che lascia andare nastro lo aggiunge al suo tratto; una che avvolge prima si prende il lasco e poi, col tratto teso, tira il nastro sotto la testina (x cambia) e toglie lasco all'altro tratto, che se va sotto zero trascina l'altra bobina. Le bobine hanno una loro velocità che l'attrito spegne in COAST secondi: quando il tiro si ferma di colpo continuano a girare e fanno un'ansa. Poi la frizione la riavvolge in TENSION secondi.
L'ansa che pende
Un tratto lento è una catena di Verlet di 26 punti fra le sue due estremità, lunga quanto la linea dritta più il lasco: il peso, 16 passate di vincoli di lunghezza, due vincoli di rigidezza (due e tre anelli più in là non si avvicinano oltre una curva minima: il nastro si arriccia, non si piega a zigzag), e gli urti con le bobine, i rullini e i bordi della plastica. Quando il lasco si spegne la tensione la tira dritta in fretta e la catena si ferma. Si disegna con una curva di Catmull-Rom.
Il mozzo mosso
Il mozzo coi suoi denti, il fermo del nastro e il perno del registratore sono disegnati una volta e girati; la luce sul mozzo e sulla bobina invece non gira. Nell'avvolgimento veloce un mozzo fa anche due giri per fotogramma e a 60 fotogrammi sembrerebbe fermo o all'indietro: si disegna più volte sull'angolo che ha fatto in quel fotogramma, con trasparenza 1, 1/2, 1/3… che dà la media giusta, cioè la sfocatura di movimento vera.
Tasti, testina e anteprima
I tasti sono pulsanti veri con una variabile CSS --press che GSAP porta da 0 a 1: il tappo scende e la faccia davanti si accorcia; play resta giù a 0,8 con aria-pressed, avanti e indietro restano giù finché il nastro arriva e risalgono con un rimbalzo elastico. La testina e il rullo salgono in 0,24 secondi, poi il capstan prende velocità. La cassetta è un role slider (frecce 5 secondi, pagine 30), Spazio fa play e pausa. Un clic da script su play (l'anteprima della libreria) fa il giro: suona, va al brano dopo, allenta e ritende il nastro, torna indietro con la bobina di sinistra, pausa e riavvolge.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SIDE | script.js | [['Cinder Blue', '3:41'], ['Coastline FM', '4:05'], …] | I brani del lato A, scritti sul cartoncino: il titolo e quanto dura (minuti:secondi). Il nastro e le bobine si fanno su questa lunghezza. |
TITLE | script.js | Long drive, June | Il titolo scritto a mano sull'etichetta della cassetta. |
BRAND | script.js | AUBADE | La marca del nastro, stampata sulla striscia dell'etichetta. |
WIND | script.js | 1.5 | I secondi che l'avanti veloce impiega ad arrivare al brano dopo. |
SLACK | script.js | 1 | Quanto il nastro può allentarsi girando una bobina a mano: 0 mai, 2 tanto. |
WEIGHT | script.js | 420 | Quanto pesa un'ansa di nastro lento, in pixel al secondo quadrato. |
TENSION | script.js | 0.32 | I secondi che le bobine impiegano a ritendere un'ansa. |
COAST | script.js | 0.14 | Quanto una bobina continua a girare da sola quando il nastro smette di tirarla, in secondi. |
LIGHT | script.js | 1 | Quanto il puntatore sposta i riflessi sulla plastica (0 = non li sposta). |
Quando usarla
Per il sito di un musicista o di un'etichetta indipendente, la pagina di una ristampa in cassetta, una playlist fatta come una compilation di una volta, una radio o un podcast dall'aria analogica: un lettore che sembra un oggetto vero da tenere in mano.
Sul telefono
Il lettore è largo al massimo 380 pixel e la cassetta si stringe con lui (a 390 è larga 330): il canvas si ridisegna alla misura giusta. Col dito si prende una bobina (la metà sinistra o destra della cassetta) e la si gira senza far scorrere la pagina: touch-action none solo sulla cassetta. I tasti sono larghi un quarto della fila e alti 46 pixel, le righe del cartoncino 30. I riflessi seguono il dito mentre tocca il lettore.
Con il movimento ridotto
Le bobine non girano e il nastro non si allenta mai: le bobine cambiano solo misura col tempo, che corre lo stesso mentre suona. L'avanti veloce arriva in un attimo con una dissolvenza, i tasti e la testina cambiano posizione subito, il lettore entra in dissolvenza senza la cassetta che cade. Girare una bobina a mano sposta ancora il tempo, avanti o indietro.
Trappole
- Nell'avvolgimento veloce i mozzi fanno più di un giro per fotogramma, e disegnati una volta sola sembravano fermi o giravano all'indietro: ora si disegnano più volte sull'angolo fatto in quel fotogramma, con trasparenze 1, 1/2, 1/3… che fanno una media giusta.
- Anche a velocità normale il mozzo vuoto, disegnato due volte, sembrava fuori fuoco: la sfocatura parte solo sopra 0,11 radianti per fotogramma.
- La catena del nastro, con tutto il lasco ripreso, non tornava mai dritta: il peso la faceva sempre pendere un poco e i vincoli da soli non bastavano. Ora il peso cresce col lasco (un nastro quasi teso è tenuto su dalla tensione) e sotto le 5 unità di lasco i punti vengono tirati verso la linea dritta.
- Gli urti con le bobine avevano un margine di un pixel, e la linea tangente alla bobina ne era sempre dentro: i punti venivano spinti fuori e la catena non si fermava mai. Gli urti ora sono al raggio esatto.
- Un tratto che si allentava di colpo si piegava a zigzag: ora appena diventa lento prende una curva leggera da un lato, e due vincoli di rigidezza (due e tre anelli) non lasciano piegare il nastro più di un ricciolo.
- La bobina trascinata smetteva di girare insieme al tiro, perché la sua velocità seguiva il nastro anche in frenata: ora la sua velocità la toglie solo l'attrito, e il nastro può solo accelerarla, così quando il tiro si ferma di colpo la bobina va avanti e fa l'ansa.
- Tenendo una bobina in mano mentre suona, il motore la faceva girare lo stesso sotto le dita: ora il nastro che arriva a una bobina tenuta si ammucchia lento davanti a lei, fino al lasco massimo.
- L'angolo della tangente sul rullino di sinistra a volte usciva come −180° invece di +180°, e l'arco del nastro faceva il giro dalla parte sbagliata del rullino: l'angolo si porta fra 0 e 360 prima di disegnare.
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 20 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 17 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.
