Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Le bobine dell’esportazione
L’esportazione di un video come una pellicola che passa da una bobina all’altra: il negativo arancio si srotola dalla bobina di sinistra, sotto una finestra accesa ogni fotogramma viene stampato a colori e la bobina di destra si riempie anello dopo anello nei colori del video, come il codice a barre di un film. Alla fine la coda della pellicola sbatte sulla bobina che rallenta; se un clip va offline la pellicola si strappa, e Retry ne unisce i due capi con un pezzo di nastro da giunta.
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 export reels</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/encode-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the export panel of a video editor: the video is a strip of film running from a reel of orange negative,
through a lit gate where every frame is printed in colour, onto a take-up reel whose pack grows ring by ring
in the colours of the video. The reels, the film and the light are painted on the canvas; the words and the
buttons are HTML -->
<section class="export" aria-labelledby="export-title" data-export>
<div class="export__deck" role="progressbar" aria-labelledby="export-title" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-bar>
<canvas class="export__paint" aria-hidden="true" data-paint></canvas>
<div class="export__readout" aria-hidden="true">
<p class="export__big"><span class="export__swap" data-big>1.4 GB</span></p>
<p class="export__phase"><span class="export__swap" data-phase>Ready to export</span></p>
<p class="export__note"><span class="export__swap" data-note>About 12 s to export</span></p>
</div>
</div>
<div class="export__foot">
<div class="export__file">
<h2 class="export__title" id="export-title">Harbour at dusk.mp4</h2>
<p class="export__meta">4K · 24 fps · 1:12</p>
</div>
<div class="export__buttons">
<button class="export__btn export__btn--ghost" type="button" data-cancel hidden><span class="export__label">Cancel</span></button>
<button class="export__btn" type="button" data-action data-autoclic><span class="export__label" data-label>Export</span></button>
</div>
</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.
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 «Le bobine dell’esportazione» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, da solo al centro, il pannello di esportazione di un programma di montaggio: due bobine con le flange di metallo scuro a tre finestre e, fra loro, una pellicola che scende dall’interno della bobina di sinistra, gira sotto un rullino, passa dritta sotto una piccola finestra d’acciaio e risale sull’altro rullino fino alla bobina di destra. A sinistra c’è il negativo arancio, avvolto in anelli bruni; a destra solo il grigio dell’inizio della pellicola. Sopra la finestra, grande, 1.4 GB, poi Ready to export e About 12 s to export; sotto, Harbour at dusk.mp4 con 4K · 24 fps · 1:12 e il pulsante Export. Premuto, la lampada dietro la finestra si scalda come un filamento, dal rosso cupo al bianco caldo, e le bobine tendono la pellicola con un piccolo strattone (Preparing). Poi la pellicola corre: ogni fotogramma arriva in negativo e, passando sotto la finestra accesa, esce stampato nei suoi colori: un molo nel pomeriggio, barche nell’ora d’oro, il tramonto, l’ora blu, le luci del paese. La bobina di destra cresce anello dopo anello in quei colori e la sinistra cala; ognuna gira alla velocità giusta per il suo raggio, la sinistra sempre più in fretta mentre si svuota, la destra sempre più piano mentre si riempie, e quando corrono le finestre delle flange si sfocano. Il numero sale (37%), sotto cambiano la fase (Rendering frames, Mixing audio, Writing file) e il tempo che manca, e accanto al nome del file i megabyte già scritti; il codificatore va a strappi e a volte si ferma un attimo, e la pellicola rallenta e riparte con lui. Pause ferma le bobine con un po’ d’inerzia e abbassa la lampada; Cancel riavvolge la pellicola in fretta, i fotogrammi stampati ripassano sotto la finestra e tornano negativo, e resta Export canceled, Nothing was saved. Alla fine la coda della pellicola lascia la bobina di sinistra, passa sotto la finestra, sale sulla destra e lì sbatte mentre la bobina gira: si alza con la velocità, schiocca contro il rullino a ogni giro, poi la bobina rallenta, si avvolge il capo e un pezzo di nastro lo ferma sul rotolo; un riflesso corre sugli anelli e il numero diventa Saved, con In Movies · 1.4 GB e il tempo impiegato, mentre la bobina vuota finisce di girare. Export again riavvolge e ricomincia. Una volta su due, nella demo, verso il 60% un clip va offline: la pellicola si strappa nella finestra, la bobina di destra si avvolge il suo capo e quella di sinistra tira indietro il suo, i due capi sbattono e si posano, la lampada resta nuda e si raffredda fino a spegnersi, e in rosso compare Boats.mov is offline, con Reconnect it and retry. Retry riporta i due capi fino alla finestra, li unisce con un pezzo di nastro da giunta e l’esportazione riprende: la giunta resta sulla pellicola, e nella bobina finita è un anello chiaro.
Come funziona
Il raggio viene dalla pellicola
Una bobina è una spirale di pellicola, quindi la sua area cresce con la lunghezza avvolta: r² = r₀² + k·L, con k scelto perché tutta la pellicola faccia una bobina di 41 pixel su un nucleo di 12. Così la bobina di sinistra cala e quella di destra cresce, e ognuna gira di ΔL ÷ r: con lo stesso passo di pellicola la bobina che si svuota gira sempre più in fretta. Un giro aggiunge π·k al raggio, e ogni giro si disegna come un cerchio a sé nel colore della pellicola che sta lì, preso dal fotogramma di quel punto: il codice a barre del film arrotolato. A sinistra gli stessi colori in negativo.
Le tangenti, a ogni fotogramma
Il percorso è una cinghia fra quattro cerchi: le due bobine, che girano in senso orario, e i due rullini, che girano al contrario. La tangente fra due cerchi si calcola coi raggi col segno: sin β = (s₂·r₂ − s₁·r₁) ÷ d, e i punti di contatto stanno a s·r dalla retta. Siccome i raggi delle bobine cambiano, segmenti, archi, lunghezza del percorso e posto della finestra si rifanno a ogni fotogramma (due volte, perché la lunghezza sul percorso cambia a sua volta quanta pellicola sta sulle bobine). Ogni punto della pellicola ha la sua coordinata di materiale: m = m_finestra + s_finestra − s.
La pellicola è una texture a fettine
Ogni fotogramma si dipinge una volta sola in un piccolo canvas, stampato e in negativo (i colori capovolti pixel per pixel attraverso la base arancio, con getImageData), e le perforazioni sono buchi fatti con destination-out. Lungo i tratti dritti un fotogramma è un drawImage solo, ruotato come la retta; sugli archi la pellicola si posa a fettine di 1,6 pixel, ognuna allargata sul bordo esterno quanto la curva. Mezzo fotogramma prima del centro della finestra i fotogrammi si prendono dalla serie stampata. Oltre i 650 pixel al secondo, nel riavvolgimento, i fotogrammi sfumano in una fascia del loro colore e le finestre delle flange si disegnano più volte lungo il giro, come mosse.
Una lampada che si scalda
La luce segue una rampa da filamento, dal rosso cupo all’arancio al bianco caldo: accendendosi passa per tutti i colori, spegnendosi torna indietro. Si somma (lighter) sotto la pellicola, su di lei intorno alla finestra e nella finestra; con la pellicola dentro si vede il fotogramma illuminato, senza pellicola la lampada nuda. Le perforazioni sono buchi veri, quindi vicino alla finestra la luce passa da lì.
Il capo che sbatte
Quando la fine della pellicola arriva a 34 pixel da una bobina diventa un capo libero, attaccato al rotolo dove se ne stacca e trascinato dal giro: una curva con un sollevamento (una molla smorzata spinta da ω², più uno sfarfallio a caso), l’arricciatura del rotolo (che torna a 1 ÷ r quando la bobina rallenta) e una flessione che nasce dagli schiocchi. Quando la punta incontra il rullino prende un colpo all’indietro e il rullino trema. La bobina rallenta per attrito; sotto 1,8 radianti al secondo si avvolge il capo fino a 13 pixel e, a fine esportazione, ci si posa sopra un pezzo di nastro. Per riavvolgere, la bobina torna indietro fino all’angolo in cui il capo aveva cominciato a sbattere (a meno di un giro) mentre il capo si raddrizza: da lì è di nuovo un pezzo del percorso.
Strappo, giunta e chi non vede
Allo strappo la pellicola diventa due pezzi, ognuno col suo materiale alla finestra: il motore di destra, senza più carico, accelera e si avvolge il suo capo, il freno di sinistra tira indietro l’altro; i capi hanno il bordo sfrangiato. Retry riporta i due capi alla finestra e li unisce; la giunta tiene il suo materiale, quindi viaggia con la pellicola e nella bobina diventa un anello chiaro. Il pannello è un role=progressbar con aria-valuenow e aria-valuetext («37 percent, rendering frames, about 6 seconds left»), aria-busy mentre lavora e una riga aria-live per l’inizio, la pausa, l’errore, l’annullamento e la fine; un clic da script, quello dell’anteprima della libreria, non mette mai in pausa.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SECONDS | script.js | 8 | Quanto dura un’esportazione nella demo, in secondi (una vera segue il codificatore). |
SIZE | script.js | 1.4 | La misura del file esportato, in gigabyte. |
FAIL_EVERY | script.js | 2 | Nella demo, un’esportazione su quante va storta (0 mai). |
FAIL_AT | script.js | 0.62 | Fin dove arriva l’esportazione che va storta, da 0 a 1. |
OFFLINE | script.js | 'Boats.mov' | Il clip che va offline allora. |
STALLS | script.js | 1 | Quanto spesso il codificatore si ferma un attimo: 0 mai, 1 ogni tanto, 2 spesso. |
FOLLOW | script.js | 0.3 | Quanto ci mette la pellicola a raggiungere il codificatore, in secondi. |
REWIND | script.js | 0.9 | I secondi che le bobine impiegano a riavvolgere la pellicola quando l’esportazione si annulla. |
FLAP | script.js | 1 | Quanto sbatte il capo della pellicola sulla bobina che gira: 0 per niente, 1 molto. |
LAMP | script.js | 1 | Quanto è forte la luce nella finestra: 0 spenta, 1 piena. |
Quando usarla
Per un’attesa di qualche secondo o di qualche minuto in un’app che lavora con le immagini: esportare un video o un’animazione, il rendering di una scena, la conversione di un archivio di foto, il caricamento di un filmato. La pellicola dice bene «sto producendo qualcosa fotogramma per fotogramma», e lo strappo dice subito che qualcosa si è rotto; per un’attesa breve o senza esito, come il caricamento di una pagina, è troppo.
Sul telefono
Il pannello prende la larghezza dello schermo meno 32 pixel (358 su 390) e resta alto 172; le bobine restano ai lati con la loro misura, la pellicola fra loro si accorcia e la scritta sopra la finestra si stringe a 166 pixel (un nome di clip lungo finisce coi puntini). Il canvas dipinge alla densità vera dello schermo, fino a due volte, e sborda di 15 pixel per lato per la luce e per il capo che sbatte, senza far scorrere la pagina di lato. I pulsanti sono pillole alte 36: col dito si schiacciano e rimbalzano, e la scritta si allarga sull’asse della larghezza solo sotto il mouse.
Con il movimento ridotto
La pellicola sta ferma e le bobine non girano: crescono e calano lo stesso, perché sono loro a dire a che punto si è, e nella finestra si vede il fotogramma che si sta stampando. Niente capo che sbatte, niente capi che volano via allo strappo, niente riavvolgimento: ogni cambio (la fine, lo strappo, la giunta, l’annullamento) arriva con una dissolvenza dal quadro di prima, e le parole nuove entrano in dissolvenza.
Trappole
- La pellicola faceva il giro di fuori delle bobine, come una cinghia sul loro bordo esterno, e a destra attraversava di sbieco la flangia: ora scende e sale dal lato interno, con le due bobine che girano in senso orario, e le tangenti si calcolano coi raggi col segno, perché i rullini girano al contrario.
- Quando la bobina si fermava, il capo libero restava steso sugli anelli colorati come una toppa grigia: ora la bobina se lo avvolge fino a lasciarne 13 pixel, e un pezzo di nastro lo ferma.
- Il colore di un anello era la media di tutto il fotogramma, e un cielo d’oro con il mare scuro dava un verde oliva spento: ora il cielo pesa di più del mare e il colore è spinto un poco, così le inquadrature si leggono come fasce.
- Sulla pellicola stampata le perforazioni erano buchi neri su un bordo quasi nero e non si vedevano: il bordo è un poco più chiaro.
- Il mozzo, un cerchio chiaro con una tacca, sembrava una lettera: ora è un perno con la presa quadra, sul nucleo con tre feritoie.
- Le fasi Mixing audio e Writing file passavano in tre decimi di secondo, illeggibili: il codificatore della demo ora va più piano sul suono e sul file, e ognuna resta sotto gli occhi circa un secondo.
- La scritta Saved aspettava che si fermasse anche la bobina vuota, che gira libera per quattro secondi: ora aspetta solo quella di destra, e la sinistra finisce di girare per conto suo.
- A velocità di riavvolgimento i fotogrammi saltavano di tre o quattro alla volta e la pellicola tremolava: oltre i 650 pixel al secondo sfumano in una fascia del loro colore, e le finestre delle flange si disegnano più volte lungo il giro.
- Quando cambiavano tutte e tre le righe insieme (all’inizio, a Saved) per un attimo sopra la finestra non c’era scritto niente: ora cambiano una dopo l’altra, a otto centesimi di secondo.
Librerie
GSAP 3.15.0, Encode Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 23 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 6 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.
