Il rullo delle ore
Selettori, 3D, Fisica
NuovaGratis
Tutti i componenti
Il gomitolo del download
Il download di un kit di design come un filo di lana che arriva da sinistra, teso e oscillante, e si avvolge in un gomitolo che gira e cresce con i byte. Ogni passata è un cerchio massimo su una sfera, inclinato in modo nuovo, disegnato in 3D su canvas con la parte dietro nascosta. Se la connessione cade il filo si spezza e pende dal gomitolo fino a Retry; alla fine il capo si infila sotto, il gomitolo fa un saltello e rotola un poco.
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 yarn ball download</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the download of a design kit shown as a strand of yarn: it comes in from the left, taut and swinging, and is
wound onto a spinning ball that grows with the bytes. Every pass of yarn is a great circle on a sphere, tilted a
little more each time, drawn in 3D on the canvas. The words, the figure and the button are HTML -->
<section class="kit" aria-labelledby="kit-title" data-kit>
<div class="kit__head">
<div class="kit__words">
<h2 class="kit__title" id="kit-title"><span class="kit__swap" data-title>Field Kit</span></h2>
<p class="kit__meta"><span class="kit__swap" data-meta>Fonts, icons & textures · v2.4</span></p>
</div>
<p class="kit__figure" aria-hidden="true">
<span class="kit__pct is-quiet" data-pct>312 MB</span>
<svg class="kit__tick" viewBox="0 0 24 24" data-tick><path d="M5.5 12.6l4.1 4.1L18.6 7.4" pathLength="1"/></svg>
</p>
</div>
<div class="kit__ball" role="progressbar" aria-labelledby="kit-title" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="0" aria-valuetext="Not downloading" data-bar>
<canvas class="kit__paint" aria-hidden="true" data-paint></canvas>
</div>
<div class="kit__foot">
<p class="kit__note"><span class="kit__swap" data-note>1,208 files</span></p>
<button class="pill" type="button" data-action data-autoclic><span class="pill__label" data-label>Download</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.
28 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 gomitolo del download» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, da solo al centro, un pannello color carbone con gli angoli tondi: in alto Field Kit e Fonts, icons & textures · v2.4, a destra 312 MB; in mezzo un piccolo gomitolo di lana corallo appoggiato sul pannello, con la sua ombra, e un filo che arriva dal bordo sinistro e lo tocca in alto, un po' lento; sotto, 1,208 files e il pulsante chiaro Download. Premuto, il filo si tende con uno strattone e vibra; poi arrivano i byte e il gomitolo comincia a girare per tirarlo su: il filo scorre (si vedono i trefoli correre verso il gomitolo), oscilla a ogni pezzo che arriva e il gomitolo si ingrossa passata dopo passata, ognuna su un'inclinazione nuova, con le passate dietro nascoste e quelle sotto più scure. In alto la percentuale sale, la riga dice quanti megabyte sono arrivati e quanto manca, in basso la velocità; il pulsante diventa Pause, col bordo. In pausa il filo si allenta e il gomitolo si ferma (Resume). Una volta su due, nella demo, a metà la connessione cade: il filo si spezza, la metà dal lato del bordo viene tirata via fuori dal pannello con una frustata e l'altra metà ricade e pende lungo il fianco del gomitolo fino al pannello, col capo sfilacciato; il titolo in rosso dice Download interrupted e il pulsante diventa Retry. Retry fa rientrare il filo da sinistra, la metà che pende si rialza, i due capi si uniscono e il download riprende da dove si era fermato. Alla fine il capo del filo corre dentro, il gomitolo lo avvolge e lo infila sotto l'ultima passata, fa un saltello, si schiaccia atterrando e rotola un poco verso destra; al posto della percentuale si disegna una spunta e il titolo dice Field Kit is ready. Download again fa rimpicciolire il gomitolo, il filo ricompare e si ricomincia con un avvolgimento diverso.
Come funziona
Un filo solo su una sfera
Il gomitolo è una curva sola calcolata una volta: un punto p e la sua direzione t camminano su un cerchio massimo (p' = p cos ds + t sin ds, t' = t cos ds − p sin ds). Alla fine di ogni passata, un po' più lunga di un giro perché le passate non si incrocino tutte nello stesso punto, la direzione ruota intorno a p verso la prossima di una serie di inclinazioni sparse su tutta la sfera (una spirale aurea), al massimo di TILT gradi: così ogni passata è un cerchio massimo nuovo e il gomitolo si copre tutto invece di fare una fascia.
Il raggio va con la radice cubica
Il volume del gomitolo cresce col filo avvolto, e il filo con i byte: il raggio di ogni passata è la radice cubica di r0³ + (R³ − r0³) · s / N. Ogni passata sta su una sfera un po' più grande della precedente, quindi le vecchie restano sotto le nuove anche nel disegno.
È l'avvolgimento a far girare il gomitolo
A ogni fotogramma si cerca il punto in cui il filo che arriva dal bordo tocca il gomitolo (la tangente da un punto a un cerchio) e si costruisce la rotazione M = S·Eᵀ che porta la fine della curva esattamente lì, con la direzione rivolta indietro lungo il filo e un poco verso chi guarda. Più filo arriva, più la fine della curva avanza e più il gomitolo gira: nessuna velocità di rotazione inventata.
Dietro, il nucleo, davanti
La curva proiettata si disegna a tratti: prima la metà nascosta delle ultime passate, scura, dalla più nuova alla più vecchia; poi il nucleo, un disco a sfumatura radiale grande quanto le passate di qualche giro fa; poi la metà davanti dalla più vecchia alla più nuova, così ogni passata copre quelle di prima. Ogni tratto ha un contorno scuro sotto tutto il pezzo (niente giunture), il corpo illuminato dalla normale della sfera e più scuro quanto più è sepolto, i trefoli con un tratteggio che resta fermo sul filo e un riflesso sulle passate nuove. Si ridisegna solo mentre qualcosa si muove.
Il filo teso, lo strappo e la corda che pende
Il filo che arriva è una retta con un po' di flessione più tre modi di vibrazione smorzati (seni di una, due e tre mezze onde): la tensione cambia la loro frequenza, i pezzi grossi di byte e lo strattone iniziale li colpiscono, il giro del gomitolo li fa fremere. Quando la connessione cade il filo diventa due corde a integrazione di Verlet con vincoli di lunghezza, gravità, il pannello come pavimento e il gomitolo come ostacolo: una viene tirata fuori dal bordo, l'altra pende dal gomitolo e ci si appoggia sopra. Retry fa rientrare il filo e riporta la corda sulla retta tesa.
Per chi non vede e per chi non vuole movimento
Il gomitolo è un role=progressbar con aria-valuenow e aria-valuetext in megabyte, il pannello ha aria-busy mentre scarica e una riga aria-live dice quando il download parte, si ferma, si interrompe e finisce. Il pulsante cambia parola (Download, Pause, Resume, Retry, Download again) e la pillola prende la larghezza nuova con un rimbalzo; un clic da script, quello dell'anteprima, non mette mai in pausa.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SECONDS | script.js | 6 | Quanto dura il download della demo, in secondi (uno vero segue i suoi byte). |
SIZE | script.js | 312 | I megabyte del pacchetto. |
PACKAGE | script.js | 'Field Kit' | Il nome del pacchetto. |
FAIL_EVERY | script.js | 2 | Nella demo, un download su quanti si interrompe (0 mai). |
FAIL_AT | script.js | 0.57 | Fin dove arriva il download che si interrompe, da 0 a 1. |
BALL | script.js | 46 | Il raggio del gomitolo finito, in pixel. |
THREAD | script.js | 3.4 | Lo spessore del filo, in pixel. |
PASSES | script.js | 96 | Quante passate di filo fanno il gomitolo intero. |
TILT | script.js | 70 | Di quanti gradi al massimo si inclina ogni passata rispetto alla precedente. |
SWING | script.js | 1 | Quanto oscilla il filo teso che arriva: 0 niente, 1.5 molto. |
FOLLOW | script.js | 0.4 | Quanto ci mette il gomitolo a raggiungere i byte, in secondi. |
Quando usarla
Per un download o un'esportazione di qualche secondo con un nome e un peso: un kit di font, un pacchetto di icone, un archivio di progetto. Il gomitolo che cresce dice «si accumula» meglio di una barra, e il filo spezzato dice subito che la connessione è caduta; per un caricamento di mezzo secondo è troppo.
Sul telefono
Il pannello prende la larghezza dello schermo meno 32 pixel (358 a 390) e resta alto uguale; il gomitolo resta al 60% della larghezza e il filo si accorcia. Il canvas disegna alla densità vera dello schermo, fino a due volte. Il pulsante col dito si schiaccia e rimbalza; la scritta si allarga sull'asse della larghezza solo sotto il mouse.
Con il movimento ridotto
Niente strattoni, oscillazioni, frustate, saltelli né rotolamenti: il filo è teso o lento senza vibrare, il gomitolo cresce seguendo subito i byte (è lui che dice a che punto si è), il filo spezzato pende già fermo, alla fine il capo è già dentro e la spunta e le parole nuove arrivano in dissolvenza.
Trappole
- Con un contorno e un corpo per ogni pezzetto di filo, i contorni tondi di ogni pezzetto si vedevano sopra il corpo del precedente e il filo sembrava una fila di salsicce: ora il contorno è uno solo per tutto il tratto, e solo il corpo cambia colore a pezzetti.
- Con l'inclinazione di ogni passata scelta a caso, le passate vicine restavano vicine e il gomitolo aveva un grande vuoto liscio da un lato: ogni passata ora punta verso la prossima inclinazione di una spirale aurea sulla sfera, e il gomitolo si copre tutto.
- Con 34 passate il filo copriva poco più di metà della sfera e il nucleo si vedeva come una palla liscia: il conto della superficie (lunghezza per spessore contro 4πR²) chiedeva circa tre volte tanto filo, quindi 96 passate, disegnando solo le ultime 52 perché le altre sono sepolte.
- Il pezzo di filo spezzato che restava al gomitolo veniva lanciato sopra la cima dal rinculo e ci restava appoggiato, senza sembrare rotto: il rinculo ora è leggero e il pezzo è lungo metà filo, così ricade lungo il fianco fino al pannello.
- La metà del filo dal lato del bordo, lasciata pendere, scendeva dritta lungo il bordo del pannello, mezza fuori: ora viene tirata via fuori dal pannello, e con Retry il filo rientra da sinistra col capo sfilacciato davanti.
Librerie
GSAP 3.15.0, Anybody (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 16 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.
