Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il pass col sigillo di sabbia
La generazione del pass di un festival, con il sigillo del biglietto che non viene disegnato ma cresce: è un mucchio di sabbia abeliano. I granelli cadono uno dopo l’altro al centro di una griglia e una cella che ne tiene quattro frana e ne dà uno a ogni vicina, che può franare a sua volta, in valanghe che corrono fino al bordo. Nessuno disegna il motivo: è quello che lasciano migliaia di valanghe, un merletto quadrato di triangoli e righe, e le celle raggiunte per la prima volta si accendono. I granelli caduti sono l’avanzamento. Se la connessione cade il sigillo si ferma e si raffredda finché Retry non lo riscalda dal centro; alla fine una luce lo attraversa e si compone il suo codice, poi Add to Wallet, e Start over lo fa scolare nel suo centro.
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 sandpile pass</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the sandpile pass: a festival pass whose seal is grown while it is generated. Grains are dropped one by one on
the middle of a grid; a cell holding four topples and gives one to each neighbour, which may topple in turn.
The avalanches build a pattern that no one drew, and the number of grains dropped is the progress. The seal is
drawn by script.js -->
<section class="sp" aria-labelledby="sp-title" data-pass>
<div class="sp__head">
<div class="sp__words">
<h2 class="sp__title" id="sp-title"><span class="sp__swap" data-title>Your festival pass</span></h2>
<p class="sp__meta"><span class="sp__swap" data-meta>Lumen Festival · 3-day pass</span></p>
</div>
<p class="sp__figure" aria-hidden="true">
<span class="sp__pct" data-pct>0%</span>
<svg class="sp__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="pass" data-ticket>
<div class="pass__seal" role="progressbar" aria-label="Pass seal" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="0" aria-valuetext="Not started" data-bar>
<canvas class="pass__canvas" aria-hidden="true" data-seal></canvas>
<span class="pass__empty" data-empty>Seal</span>
</div>
<dl class="pass__info">
<div><dt>Holder</dt><dd>Mara Quint</dd></div>
<div><dt>Dates</dt><dd>12–14 June</dd></div>
<div><dt>Entry</dt><dd>Gate B · General</dd></div>
<div><dt>Seal</dt><dd class="pass__code" data-code>Not yet grown</dd></div>
</dl>
</div>
<div class="sp__foot">
<span class="sp__status"><span class="sp__swap" data-status>Every seal is grown once</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>Generate pass</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.
42 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 pass col sigillo di sabbia» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, da solo al centro: in alto Your festival pass e sotto Lumen Festival · 3-day pass, a destra 0%; sotto, un biglietto grigio scurissimo con gli angoli tondi, diviso da una perforazione a piccoli fori con un intaglio tondo in cima e in fondo. A sinistra il quadrato del sigillo, vuoto, con la parola SEAL; a destra i dati del pass in colonna: Holder Mara Quint, Dates 12–14 June, Entry Gate B · General, Seal Not yet grown. In fondo Every seal is grown once e la pillola chiara Generate pass. Entrando, il biglietto sale di pochi pixel e i dati arrivano uno dopo l’altro. Premuto Generate pass, al centro del sigillo comincia a crescere un mucchio di sabbia a pixel: ogni granello che cade al centro fa franare le celle che ne hanno quattro, e le valanghe allargano il mucchio in un ottagono pieno di triangoli, righe e merletti, in tre toni: corallo per una cella con un granello, crema per due, grigio scuro per tre. Le celle raggiunte per la prima volta si accendono di bianco caldo e si spengono nel loro colore, così il bordo che cresce brilla. Sotto, il conto dei granelli sale, 9,381 of 32,768 grains, e la percentuale con lui; la pillola diventa un anello con Pause, che ferma la caduta, e Resume. Una volta su due la connessione cade: il sigillo si ferma e diventa grigio, il titolo dice in rosso Connection lost e sotto 10,276 grains kept; Retry lo riscalda con un’onda di colore dal centro verso il bordo e i granelli ricominciano a cadere. Alla fine una banda di luce attraversa il sigillo in diagonale, la percentuale lascia il posto a una spunta verde, il titolo dice Your pass is ready e il codice del sigillo, LMN 7F3K 2QX9, si compone in corallo lettera dopo lettera. Add to Wallet fa fare al biglietto un piccolo cenno su una molla e il titolo dice In your Wallet; Start over fa scolare il mucchio dal bordo verso il centro finché il sigillo è di nuovo vuoto.
Come funziona
Il mucchio di sabbia abeliano
È il modello di Bak, Tang e Wiesenfeld: una griglia di celle con dentro dei granelli; una cella con quattro o più granelli frana, ne perde quattro e ne dà uno a ognuna delle quattro vicine, che possono franare a loro volta. I granelli cadono sempre sulla cella centrale. Il mucchio stabile ha in media poco più di due granelli per cella, quindi il suo raggio è circa la radice di N diviso 2,05π: la griglia si fa di quella misura più tre celle di margine, così le valanghe non arrivano mai al bordo.
Tutti i granelli di un fotogramma insieme
Il mucchio è abeliano: l’ordine delle frane non cambia il risultato, quindi i granelli di un fotogramma si mettono tutti insieme al centro e si fanno franare insieme. Una cella con v granelli ne dà v diviso quattro a ogni vicina in una volta sola e tiene v modulo quattro; le celle da far franare stanno in una pila di interi. Così 32.768 granelli e decine di milioni di frane stanno dentro i fotogrammi, su un Uint32Array.
Il tempo dei granelli
I granelli caduti sono N per l’avanzamento alla potenza EASE_IN: a 2, siccome l’area del mucchio cresce coi granelli, il raggio del sigillo cresce in modo uniforme e si legge come una barra di avanzamento. L’avanzamento è un orologio nel ticker di GSAP con un passo di al massimo 1/30 di secondo, che la pausa e la connessione persa fermano.
Un pixel per cella
Ogni fotogramma la griglia diventa un ImageData di un pixel per cella, disegnato su un canvas grande un numero intero di pixel del dispositivo per cella, senza sfumatura, così ogni cella è netta. Nello stesso passaggio si mescolano il bianco caldo delle celle appena raggiunte (che si spegne in SPARK secondi), il grigio del sigillo freddo fuori dal raggio che si sta riscaldando, la banda di luce finale in diagonale e il bordo oltre il quale il mucchio è già scolato via.
Il giro dell’anteprima
Un clic da script sulla pillola (detail 0) fa partire il giro intero, più veloce di PREVIEW: la connessione persa, Retry, il pass pronto, Add to Wallet e Start over, con un finto tocco sulla pillola a ogni passo; i tempi fra i passi sono delayedCall di GSAP. Un clic vero ferma il giro e prende il comando. Quando niente cresce e niente brilla il ciclo esce dal ticker.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
GRAINS | script.js | 32768 | Quanti granelli fanno crescere il sigillo: più granelli, un motivo più grande e più fine. |
SECONDS | script.js | 6.5 | Quanti secondi dura la generazione del pass nella demo. |
EASE_IN | script.js | 2 | Come arrivano i granelli: a 2 il sigillo si allarga in modo uniforme, sotto si riempie in fretta all’inizio. |
SPARK | script.js | 0.45 | Quanti secondi brilla una cella raggiunta per la prima volta. |
CODE | script.js | 'LMN 7F3K 2QX9' | Il codice del sigillo, che si compone quando è cresciuto. |
FAIL_EVERY | script.js | 2 | Un pass ogni quanti perde la connessione per strada (0 mai). |
FAIL | script.js | 0.56 | Dove si perde la connessione, da 0 a 1. |
PREVIEW | script.js | 1.5 | Nel giro dell’anteprima: quante volte più veloce. |
LABELS | script.js | ['Generate pass', 'Pause', 'Resume', 'Retry', 'Add to Wallet', 'Start over'] | Le parole della pillola, stato per stato. |
--sand-1 | style.css | #ff5b3a | Le celle con un granello: il colore d’accento, anche del codice. |
--sand-2 | style.css | #f4f1ea | Le celle con due granelli. |
--sand-3 | style.css | #2e2d31 | Le celle con tre granelli. |
Quando usarla
Per la generazione di un biglietto, di un pass o di un abbonamento in un’app di eventi, di concerti o di un festival, per un oggetto da collezione unico, per un avatar o un motivo generato al momento, per ogni attesa che finisce con qualcosa di solo tuo.
Sul telefono
Il biglietto prende tutta la larghezza meno i margini, il sigillo resta largo 172 pixel e i dati si stringono accanto; la griglia del mucchio non cambia, quindi il motivo è lo stesso. La pillola risponde al tocco come al mouse.
Con il movimento ridotto
Il mucchio cresce lo stesso, perché è l’avanzamento, ma le celle raggiunte non brillano, la luce finale non passa, il colore torna senza onda, le scritte cambiano senza spostarsi e il biglietto non fa il cenno.
Trappole
- Con il corallo sulle celle da tre granelli il sigillo era quasi tutto corallo e rumoroso, perché le zone piene da tre sono le più grandi: ora le celle da tre sono il tono più scuro e il corallo e il crema disegnano il merletto.
- Con 16.384 granelli e una cella di un pixel e mezzo il motivo si vedeva poco e i pixel non erano tutti uguali: ora sono 32.768 granelli e ogni cella è un numero intero di pixel del dispositivo, senza sfumatura.
- Con i granelli che arrivavano come avanzamento alla 1,6 il sigillo restava piccolo a lungo e poi si allargava di colpo: l’area cresce coi granelli, quindi ora l’esponente è 2 e il raggio cresce in modo uniforme.
- Alla fine del giro un fotogramma doveva fare più di quattrocentomila frane, quasi venti millisecondi su un computer e troppi su un telefono: ora le frane sono al massimo 150.000 a fotogramma e una valanga grande continua nei fotogrammi dopo, con le celle ancora instabili nel colore della scintilla; la pila mette una cella solo quando diventa instabile, così non la contiene mai due volte e non trabocca, e la percentuale aspetta a 99 finché l’ultima valanga non si ferma.
- Le celle che franano a ogni fotogramma sono quasi tutte, quindi far brillare le celle che franano accendeva tutto il mucchio: brillano solo le celle raggiunte per la prima volta, cioè il bordo che cresce.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile, assi wght e wdth) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,9 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.
