Il rullo delle ore
Selettori, 3D, Fisica
NuovaGratis
Tutti i componenti
Lo striscione sul bastone
Il caricamento di uno striscione di stoffa in una tipografia online: lo striscione è appeso agli anelli di un bastone, raccolto a sinistra in pieghe come una tenda tirata da parte, e mentre il file sale gli anelli scorrono lungo il bastone e la stoffa si apre piega dopo piega, finché la stampa pende piatta. È una stoffa vera in tre dimensioni, punti e bastoncini con la gravità, e ogni triangolo è disegnato con la stampa sopra e illuminato dalla sua normale, così le pieghe hanno la loro ombra e dentro si vede il rovescio. Se la connessione cade l’ultimo anello si sgancia e l’angolo cade finché Retry non lo riaggancia; alla fine un soffio di vento attraversa lo striscione e Upload another lo raccoglie di nuovo.
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 banner on the rail</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the banner on the rail: a print shop uploading a fabric banner, and the banner hangs from rings on a rail,
gathered at the left in pleats. As the file goes up the rings slide out along the rail and the fabric opens,
pleat by pleat, until the whole print hangs flat. The cloth is a real cloth in 3D (points, sticks, gravity),
printed and lit triangle by triangle on the canvas by script.js -->
<section class="bn" aria-labelledby="bn-title" data-banner>
<div class="bn__head">
<div class="bn__words">
<h2 class="bn__title" id="bn-title"><span class="bn__swap" data-title>Fabric banner</span></h2>
<p class="bn__meta"><span class="bn__swap" data-meta>night-market.pdf · 48 MB</span></p>
</div>
<p class="bn__figure" aria-hidden="true">
<span class="bn__pct" data-pct>0%</span>
<svg class="bn__tick" viewBox="0 0 28 28" data-tick><path d="M6.5 14.8l5 5 10-11.4" pathLength="1"/></svg>
</p>
</div>
<div class="bn__rail" role="progressbar" aria-labelledby="bn-title" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="0" aria-valuetext="Not started" data-bar>
<canvas class="bn__canvas" aria-hidden="true" data-cloth></canvas>
</div>
<div class="bn__foot">
<span class="bn__status"><span class="bn__swap" data-status>200 × 110 cm · polyester</span></span>
<button class="pill" type="button" data-btn data-autoclic>
<span class="pill__fill" aria-hidden="true"></span>
<span class="pill__label" data-label>Upload</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.
35 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 «Lo striscione sul bastone» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, da solo al centro: in alto Fabric banner e sotto night-market.pdf · 48 MB, a destra 0%; sotto, un bastone grigio sottile con un pomello a ogni capo, e appeso a nove anelli uno striscione color crema raccolto tutto a sinistra in pieghe strette, come una tenda tirata da parte: fra una piega e l’altra si intravedono pezzi della stampa, lettere blu e un sole arancio. In fondo 200 × 110 cm · polyester e la pillola chiara Upload. Entrando gli anelli arrivano un poco aperti e tornano indietro su una molla, e le pieghe oscillano e si fermano. Premuto Upload, gli anelli scorrono lungo il bastone su molle, allargandosi tutti insieme, e la stoffa si apre: le pieghe si aprono una dopo l’altra, ognuna con la faccia in luce e quella in ombra, il rovescio più scuro dentro la piega, e la stampa si legge un poco alla volta, NIGHT MARKET, il sole, Fridays · Pier 9 · 7 pm. Sotto, i megabyte salgono, 22.4 of 48 MB, e la percentuale con loro; la pillola diventa un anello con Pause, che ferma gli anelli, e Resume. Una volta su due la connessione cade: l’ultimo anello diventa rosso e lascia la stoffa, l’angolo destro cade e oscilla, il titolo dice in rosso Connection lost e sotto 30.0 MB kept; Retry riaggancia l’angolo, che sale verso il suo anello, e gli anelli ripartono. Alla fine lo striscione pende piatto con piccole onde fra un anello e l’altro, un soffio di vento lo attraversa da sinistra a destra gonfiandolo un poco, la percentuale lascia il posto a una spunta verde, il titolo dice Ready for print e sotto We will email you a proof. Upload another fa tornare gli anelli a sinistra e la stoffa si raccoglie di nuovo nelle sue pieghe.
Come funziona
Una stoffa di punti e bastoncini
Lo striscione è una griglia di 17 per 11 punti in tre dimensioni, legati da bastoncini lungo le righe e le colonne, sulle diagonali (più morbidi) e, verso il basso, a due punti di distanza, così pende come una stoffa e non come una catena. Ogni passo (1/120 di secondo, al massimo sei per fotogramma) muove i punti con Verlet, con la gravità e un piccolo smorzamento, e poi sette volte rimette ogni bastoncino alla sua lunghezza. Non c’è il bastoncino a due punti di distanza in orizzontale: spingerebbe le pieghe ad aprirsi e lo striscione si allargherebbe a ventaglio in fondo.
Gli anelli e le pieghe
Un anello ogni due colonne tiene il punto di cima sotto di sé; gli anelli vanno verso il loro posto su una molla, e il posto dipende dall’avanzamento: distanza GATHER quando lo striscione è raccolto, un ottavo della larghezza quando è aperto. Stretta fra due anelli, la colonna in mezzo deve uscire in avanti o indietro: la posa di partenza è calcolata a mano, una colonna sì e una no avanti e indietro quanto basta per tenere i bastoncini della loro lunghezza, e una spinta leggera verso quella posa (la memoria delle pieghe, più forte mentre si raccoglie) fa sì che si pieghi a fisarmonica e non a mucchio.
La stampa su ogni triangolo
La stampa è un canvas a parte, disegnato al doppio della misura. Ogni quadrato della griglia sono due triangoli, proiettati in prospettiva e ordinati dal più lontano al più vicino; per ogni triangolo si calcola la trasformazione affine che porta i suoi tre punti della stampa nei suoi tre punti sullo schermo, si ritaglia il triangolo, allargato di quasi un pixel lontano dal suo centro perché fra i vicini non resti una riga, e si disegna la stampa intera con quella trasformazione.
La luce delle pieghe
La normale di ogni triangolo, girata verso la camera, dà la sua luce, che viene dall’alto a sinistra e davanti. L’ombra si misura rispetto allo striscione piatto: un triangolo piatto non ha ombra, quindi sullo striscione aperto non si vede nessuna giuntura, e solo le facce girate via scuriscono, quelle girate verso la luce schiariscono un poco. Il verso dei punti sullo schermo dice se si vede il dritto o il rovescio, che dentro una piega è più semplice e più scuro.
La connessione persa e il vento
Quando la connessione cade l’ultimo anello lascia il suo punto, che cade libero; Retry lo riaggancia tirandolo verso l’anello di un tanto a ogni passo, finché è di nuovo tenuto. Alla fine il vento è una spinta all’indietro, a campana, che corre lungo lo striscione da sinistra a destra in poco più di un secondo, più forte verso l’orlo. Quando gli anelli sono fermi e i punti non si muovono più, il ciclo esce dal ticker di GSAP e non ridisegna niente.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SIZE_MB | script.js | 48 | Quanto pesa il file, in megabyte. |
SECONDS | script.js | 6 | Quanti secondi dura il caricamento nella demo. |
RINGS | script.js | 9 | Quanti anelli tengono lo striscione. |
GATHER | script.js | 6 | Quanto stanno vicini gli anelli con lo striscione raccolto, in pixel. |
STIFF | script.js | 0.5 | Quanto è rigida la stoffa quando pende, da 0 (seta) a 1 (tela). |
GRAVITY | script.js | 1400 | Quanto tira giù la gravità, in pixel al secondo quadrato. |
WIND | script.js | 1 | Quanto è forte il soffio di vento alla fine (0 niente). |
WORDS | script.js | ['NIGHT', 'MARKET', 'Fridays · Pier 9 · 7 pm'] | La stampa dello striscione: due righe grandi e una piccola. |
FAIL_EVERY | script.js | 2 | Un caricamento ogni quanti perde la connessione (0 mai). |
FAIL | script.js | 0.62 | Dove si perde la connessione, da 0 a 1. |
PREVIEW | script.js | 1.4 | Nel giro dell’anteprima: quante volte più veloce. |
LABELS | script.js | ['Upload', 'Pause', 'Resume', 'Retry', 'Upload another'] | Le parole della pillola, stato per stato. |
--fabric | style.css | #efe8da | Il colore della stoffa. |
--print-sun | style.css | #ff5a36 | Il sole della stampa. |
Quando usarla
Per il caricamento di un file da stampare in una tipografia online (striscioni, poster, tende, magliette), per l’invio di un progetto o di un’opera in un’app creativa, per ogni caricamento in cui quello che sale è una cosa da appendere e da guardare.
Sul telefono
Il pannello prende tutta la larghezza meno i margini e la scena si rimpicciolisce con lui, perché è disegnata in unità della sua scatola: la stoffa e i suoi movimenti sono gli stessi. La pillola risponde al tocco come al mouse.
Con il movimento ridotto
Niente fisica: lo striscione prende ogni volta la posa calcolata per l’avanzamento, raccolto, mezzo aperto o piatto, senza oscillare, senza molle negli anelli e senza vento; l’angolo sganciato si piega in giù invece di cadere. Le scritte cambiano senza spostarsi.
Trappole
- Con i bastoncini a due punti di distanza anche in orizzontale le pieghe si spingevano ad aprirsi e lo striscione raccolto si allargava a ventaglio in fondo, fino a uscire dal pannello: ora ci sono solo in verticale.
- Riempiendo l’ombra su ogni triangolo, anche lo striscione piatto aveva una riga scura su ogni diagonale, dove i triangoli allargati si sovrappongono: ora l’ombra si misura rispetto allo striscione piatto, che non ne ha, con una piccola zona morta.
- I triangoli erano allargati spostando ogni punto di mezzo pixel in x e in y a seconda del segno: sulla diagonale di ogni quadrato i due punti si spostavano lungo la diagonale stessa e la riga restava. Ora ogni punto si allontana dal centro del suo triangolo.
- Tornando a riposo gli anelli stringevano la stoffa troppo in fretta e si accartocciava in un mucchio storto: ora una spinta leggera verso la posa a pieghe la guida, più forte mentre si raccoglie e spenta mentre soffia il vento o un angolo pende sganciato.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile, assi wght e wdth) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
