Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
La tavola di Galton della previsione
La previsione dei ricavi di un trimestre fatta con una simulazione Monte Carlo e mostrata come una tavola di Galton dietro un vetro: una tramoggia piena di perline d’acciaio, un cancelletto nel collo, otto file di chiodi d’ottone e nove contenitori. Ogni perlina è un pacchetto di trimestri simulati: passa dal cancelletto, rimbalza giù fra i chiodi, che si accendono quando li colpisce, e cade nel contenitore del suo risultato. Le pile crescono a campana mentre il conteggio sale; alla fine la campana si disegna sopra le pile, le perline dentro il 90% prendono il suo colore e sale la linea della mediana, letta dalle perline cadute davvero. Se i dati non arrivano il cancelletto si blocca rosso; Retry dà un colpo alla tavola e le perline ripartono.
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 Galton board forecast</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the Galton board forecast: a revenue forecast run as a Monte Carlo simulation, shown as a Galton board behind
glass. Every bead is a batch of simulated quarters: it leaves the hopper through the gate, bounces down the
brass pins (each one lights up when it is struck) and lands in the bin of its result. The piles grow into a
bell; at the end the curve is drawn over them, the 90% range lights up and the median is read off the beads
themselves. The board is painted by script.js -->
<section class="fc" aria-labelledby="fc-title" data-forecast>
<div class="fc__board" role="progressbar" aria-labelledby="fc-title" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="0" aria-valuetext="Not started" data-bar>
<canvas class="fc__canvas" aria-hidden="true" data-board></canvas>
<p class="fc__axis" aria-hidden="true">
<span class="fc__tick-label" data-axis="0"></span>
<span class="fc__tick-label" data-axis="1"></span>
<span class="fc__tick-label" data-axis="2"></span>
</p>
</div>
<div class="fc__head">
<div class="fc__words">
<h2 class="fc__title" id="fc-title"><span class="fc__swap" data-title>Q4 revenue forecast</span></h2>
<p class="fc__meta"><span class="fc__swap" data-meta>10,000 simulated quarters</span></p>
</div>
<p class="fc__figure" aria-hidden="true">
<span class="fc__pct" data-pct></span>
<svg class="fc__done" viewBox="0 0 28 28" data-tick><path d="M6.5 14.8l5 5 10-11.4" pathLength="1"/></svg>
</p>
</div>
<button class="pill" type="button" data-go data-autoclic><span class="pill__label" data-label>Run forecast</span></button>
<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.
43 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 «La tavola di Galton della previsione» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, da sola al centro, una tavola di Galton dietro un vetro: un pannello blu notte con un riflesso lungo e obliquo, in alto una tramoggia a imbuto con i bordi d’ottone piena di cento perline d’acciaio lucido, sotto un collo stretto chiuso da un cancelletto, poi un triangolo di otto file di chiodi d’ottone e in fondo nove contenitori divisi da sottili pareti, con la scala $1.0M, $1.4M e $1.8M sotto il pavimento. La prima volta le perline piovono dall’alto nella tramoggia e si assestano. Sotto la tavola ci sono il titolo Q4 revenue forecast, la riga 10,000 simulated quarters e il pulsante chiaro Run forecast. Puntando il pulsante (o arrivandoci con la tastiera, o toccandolo col dito) le perline in cima alla tramoggia sobbalzano e il cancelletto ha un piccolo scatto. Premuto, il pulsante diventa Simulating, chiaro e col bordo, a destra compare la percentuale e il cancelletto comincia a far passare le perline una alla volta, scorrendo di lato: ogni perlina cade sul primo chiodo, va a destra o a sinistra, colpisce il chiodo della fila sotto, e così fino in fondo; i chiodi sono fermi e lucidi, senza luci (GLOW, a 0, li fa accendere quando vengono colpiti). Le perline cadono nei contenitori e si ammucchiano a monticello; le pile crescono a forma di campana mentre la riga conta 4,200 of 10,000 quarters. Quando l’ultima perlina è ferma, una curva verde menta si disegna da sinistra a destra sopra le pile, la zona del 90% si colora appena, le perline che ci stanno dentro diventano verdi e le altre si scuriscono, e dal pavimento sale una linea tratteggiata fino alla curva: la mediana. Al posto della percentuale si disegna una spunta verde, il titolo diventa Forecast ready e la riga dice per esempio Median $1.40M · 90% $1.18–1.62M, calcolata dalle perline cadute davvero, quindi ogni volta un poco diversa. Run again apre il pavimento dei contenitori come nove sportelli: le perline cadono fuori, ripiovono dall’alto nella tramoggia, gli sportelli si richiudono con un rimbalzo e la previsione riparte. Una volta su due, nella demo, a metà i dati non arrivano: il cancelletto si blocca e si accende di rosso, le perline già partite finiscono la corsa, il titolo in rosso Data source timed out trema e il pulsante dice Retry, che dà un colpo alla tavola (tutto sobbalza) e fa ripartire il flusso da dove si era fermato. Un tocco sulla tavola, quando non mostra un risultato, le dà un colpetto.
Come funziona
Perline con la dinamica a posizioni
Ogni perlina ha posizione e velocità; il tempo di un fotogramma (mai più di 1/30 di secondo) si divide in quattro passi. A ogni passo le perline sveglie prendono la gravità e si muovono, poi per quattro giri si spingono via le sovrapposizioni: perlina contro perlina (metà ciascuna, tutta a quella sveglia se l’altra dorme), contro le pareti come segmenti con il loro spessore, contro il cancelletto, il pavimento e i chiodi. Alla fine la velocità è quello che la posizione ha fatto davvero, (x − x di prima) ÷ passo, ma mai più di 30 unità al secondo sopra quella di prima: così spingere via una sovrapposizione non lancia le perline e la tramoggia non bolle.
Il lancio della moneta su ogni chiodo
Un chiodo restituisce una parte della velocità che ha tolto (BOUNCE, lungo la retta fra i centri) e, la prima volta che una perlina lo tocca, sceglie un lato a caso. La spinta di lato è calcolata per portare la perlina di mezzo passo, 12 unità, alla fila sotto: il tempo di caduta è t = (−v + √(v² + 2·g·DY)) ÷ g, e la velocità di lato è 12 ÷ t per SCATTER, più o meno l’8%. Così ogni perlina fa otto lanci di moneta e la campana viene da sé. Due perline in volo fra i chiodi si passano accanto senza urtarsi: con gli urti in volo la campana si allargava troppo.
La tramoggia e il cancelletto
Il collo è largo più di due perline (12,4 unità): con un collo da una perlina e mezzo due perline si incastravano ad arco sopra il buco e il flusso si fermava. Il cancelletto trattiene ogni perlina che non ha il permesso; una timeline GSAP dice quante ne devono essere partite, e a ogni fotogramma, se ne manca una, la più bassa sul cancelletto riceve il permesso e passa, mentre il cancelletto scorre di lato e torna. Se per 0,35 secondi non arriva nessuna perlina sul cancelletto, quelle nel collo ricevono un piccolo scossone.
Pile che dormono e la campana
Una perlina quasi ferma in un contenitore per 0,3 secondi si addormenta: non si muove più e per le altre è un appoggio fisso. Le pile restano ferme e il ciclo costa poco; quando niente si muove il canvas non si ridisegna. Una perlina che si posa proprio in cima a una ferma viene spostata una volta di un poco verso il centro del contenitore, così le pile crescono a monticello e non a torri. Alla fine si contano le perline in ogni contenitore: media e dispersione danno la forma della campana, l’altezza viene dalla cima vera delle pile (minimi quadrati), e la mediana e il 90% si leggono dai conteggi interpolando dentro il contenitore.
Il disegno, la fine e chi non vede
Il pannello, i chiodi e il vetro davanti si dipingono una volta sola in due immagini a parte; a ogni fotogramma si dipingono la luce dei chiodi (uno sprite sfumato in lighter, che si spegne con e^(−3,4·t)), le ombre e le perline (sprite d’acciaio preparati alla densità dello schermo), gli sportelli del pavimento, il cancelletto e la campana con la sua ombra luminosa. Il pannello è un role=progressbar con aria-valuenow e aria-valuetext («42 percent, 4,200 of 10,000 quarters») al massimo ogni 0,6 secondi, aria-busy mentre lavora e una riga aria-live all’inizio, alla fine con la mediana e al blocco. I clic da script (quelli dell’anteprima della libreria) dopo la fine aspettano 2,4 secondi prima di ripartire.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BEADS | script.js | 100 | Quante perline ci sono nella tramoggia: ognuna è un pacchetto di simulazioni. |
SIMULATIONS | script.js | 10000 | Quanti trimestri simula la previsione: è il numero che conta sotto il titolo. |
SECONDS | script.js | 7 | Quanto dura la previsione della demo, in secondi (una vera segue il calcolo). |
RANGE | script.js | [1.0, 1.8] | Il valore del bordo sinistro e del bordo destro dei contenitori, in milioni: la scala, la mediana e il 90% si leggono da qui. |
MONEY | script.js | { before: '$', after: 'M', digits: 2 } | Come si scrivono le cifre: cosa va prima, cosa dopo e quanti decimali. |
GRAVITY | script.js | 760 | Quanto forte cadono le perline, in unità del disegno al secondo quadrato. |
BOUNCE | script.js | 0.3 | Quanto rimbalzano le perline sui chiodi: 0 niente, 0,7 molto. |
SCATTER | script.js | 1 | Quanto ogni chiodo spinge di lato la perlina: più è alto, più la campana si allarga. |
GLOW | script.js | 0 | Quanto si accendono i chiodi colpiti: 0 niente, 2 molto. |
FAIL_EVERY | script.js | 2 | Nella demo, una previsione ogni quante si blocca perché i dati non arrivano; 0 mai. |
FAIL_AT | script.js | 0.45 | A che punto della previsione arriva il blocco, da 0 a 1. |
LABELS | script.js | { busy: 'Simulating', done: 'Run again', retry: 'Retry' } | Le scritte del pulsante mentre lavora, alla fine e dopo il blocco; quella a riposo, Run forecast, si cambia in index.html. |
WORDS | script.js | { busy: 'Running simulations', done: 'Forecast ready', failed: 'Data source timed out' } | Il titolo mentre lavora, alla fine e dopo il blocco; quello a riposo, Q4 revenue forecast, si cambia in index.html. |
NOTES | script.js | { of: 'of', unit: 'quarters', median: 'Median', range: '90%', failed: 'Sales data did not respond' } | Le parole della riga sotto il titolo: il conteggio, il risultato e il blocco; quella a riposo si cambia in index.html. |
Quando usarla
Per un calcolo di qualche secondo il cui risultato è una distribuzione: una previsione dei ricavi, una simulazione di rischio, un test A/B che si chiude, la stima dei tempi di consegna, un budget con più scenari. La tavola fa vedere mentre aspetti come nasce il risultato, e alla fine il risultato è proprio la forma che hai visto crescere. Va bene in un’app di finanza, di analisi dei dati o di pianificazione. Per un caricamento qualsiasi, dove non c’è niente da distribuire, è un racconto sbagliato: meglio una barra.
Sul telefono
Il componente è largo al massimo 320 pixel, quindi a 390 entra tutto con i suoi margini; il canvas dipinge alla densità vera dello schermo, fino a due volte, e la fisica è in unità del disegno, uguale a ogni misura. Le perline e i chiodi sono piccoli ma nitidi. Il pulsante è alto 48 e col dito si schiaccia e rimbalza; il sobbalzo delle perline che col mouse arriva al passaggio, col dito arriva quando lo tocchi. Un tocco sulla tavola le dà un colpetto; lo scorrimento verticale della pagina passa sopra il canvas.
Con il movimento ridotto
Niente perline che cadono, chiodi che si accendono, colpi o sportelli che si aprono: la tramoggia è già piena e ferma. Durante la previsione la perlina più in alto nella tramoggia sparisce con una dissolvenza e un{A}altra compare con una dissolvenza al suo posto nel contenitore, scelto con otto lanci di moneta, e le pile crescono così insieme alla percentuale. Alla fine la campana, il 90% e la mediana compaiono con una dissolvenza, senza disegnarsi; Run again sfuma la tavola e la riporta piena.
Trappole
- Con il collo largo una perlina e mezza due perline si appoggiavano ognuna a una parete e si incastravano ad arco sopra il buco: il flusso si fermava dopo due perline e gli scossoni non servivano, perché l’arco si riformava. Ora il collo è largo più di due perline e il cancelletto lascia passare comunque solo quella che ha il permesso.
- Per non far uscire le perline dalla tramoggia c’era un limite che le teneva dentro a ogni passo, un poco più stretto della parete vera: parete e limite si contendevano le perline del bordo, e tutta la tramoggia bolliva senza fermarsi mai (velocità media 40 unità al secondo, a riposo). Ora il limite riporta dentro solo una perlina che ha davvero passato la parete.
- Con gli urti fra le perline in volo e una spinta fissa sui chiodi, le perline saltavano delle file e la campana veniva larga, con cinque perline nei contenitori di bordo invece di mezza. Ora la spinta porta ogni perlina di mezzo passo esatto alla fila sotto e le perline in volo non si urtano: in media otto chiodi a perlina e una campana vera.
- Le perline che si addormentavano subito nei contenitori si fermavano in equilibrio una sull’altra e le pile crescevano a torri contro le pareti. Ora una perlina si addormenta solo sotto 4 unità al secondo per 0,3 secondi, e una che si posa proprio in cima a una ferma viene spostata una volta verso il centro: le pile sono monticelli.
- Il conteggio cambiava molte volte al secondo con la dissolvenza delle scritte e restava sempre a metà: ora la dissolvenza c’è solo quando la riga cambia di senso, e il numero si scrive direttamente.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 18 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 13 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.
