Attrezzi che cadono
Fisica, Hover
NuovaGratis
Torna alla libreria
I blocchi che contano pi greco
Nello stile minimal, con fisica esatta: su una pagina nera un blocco piccolo aspetta fra un muro e un blocco grande che scivola verso di lui. Gli urti sono perfettamente elastici, senza attrito, e un grande numero con grazie li conta: con masse uguali sono 3, con un blocco cento volte più pesante 31, diecimila volte 314. Sono le prime cifre di pi greco, che alla fine si accendono in arancio.
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">
<title>Counting pi</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the whole room is the button: a click brings the next pair of blocks -->
<main class="stage" data-stage tabindex="0" role="button" aria-label="Two blocks slide into a wall and count their collisions: the counts are the digits of pi. Press for the next pair.">
<header class="top">
<span class="top__brand">Quanta</span>
<span class="top__note">A physics lecture series, season two</span>
</header>
<div class="count" data-count-box>
<p class="count__value" data-count>0</p>
<p class="count__label">collisions</p>
<p class="pi" data-pi aria-label="pi is 3.14159265">
<span class="pi__name">π =</span> <span data-digits>3.14159265</span>
</p>
</div>
<svg class="room" data-svg aria-hidden="true">
<g data-hatch></g>
<path class="wall" data-wall d="" />
<path class="floor" data-floor d="" />
<rect class="block block--small" data-small x="0" y="0" width="0" height="0" />
<rect class="block block--big" data-big x="0" y="0" width="0" height="0" />
<text class="mass" data-mass-small x="0" y="0">1 kg</text>
<text class="mass" data-mass-big x="0" y="0">1 kg</text>
</svg>
<p class="hint" data-hint>Click for the next pair of blocks.</p>
<p class="read" data-readout><span class="read__label">Mass ratio</span> <b class="read__value" data-read>1 : 1</b></p>
</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.
21 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 «I blocchi che contano pi greco» da Animorio e adattala al mio sitoCosa fa
Una pagina nera, in alto il nome di un ciclo di lezioni di fisica inventato, Quanta. Il pavimento, una riga sottile, si disegna dal muro verso destra; il muro sale con i suoi tratteggi corti dietro, come in un disegno tecnico; sotto un grande zero con grazie compaiono «collisions» e la riga π = 3.14159265. Arrivano due blocchi disegnati con una linea sola, con la massa scritta sotto in corsivo: uno piccolo fermo vicino al muro e uno uguale più in là, che parte e scivola verso il piccolo. Si toccano: il grande si ferma, il piccolo va al muro, torna, ridà la spinta al grande, ed escono tutti e due dalla stanza. A ogni urto il numero in alto sale di uno e prende peso per un attimo, e il blocco piccolo si accende d’arancio. Fermi gli urti, il numero, 3, diventa arancio e si accende la prima cifra di pi greco. Poi arriva una coppia nuova: il blocco grande pesa cento volte il piccolo, e il piccolo fa avanti e indietro trentuno volte fra il muro e il grande, che rallenta, si ferma e torna indietro; si accende 3.1. Infine il grande pesa diecimila volte di più: il piccolo vibra fra il muro e il grande sempre più vicini, il contatore corre fino a 314 e si accende 3.14. Poi si ricomincia. In basso a destra si legge il rapporto delle masse. Un clic porta subito la coppia dopo.
Come funziona
La fisica, urto per urto
Non c’è un passo fisso: dentro ogni fotogramma lo script calcola fra quanto il blocco piccolo tocca il muro e fra quanto tocca il grande, porta i due blocchi al primo dei due momenti, fa l’urto e ricomincia, finché il fotogramma è finito. Contro il muro la velocità del piccolo cambia segno; fra i due blocchi l’urto elastico conserva quantità di moto ed energia. Così anche i trecento urti della coppia da diecimila, che cadono fitti in pochi pixel, sono esatti, e il conto è sempre 314.
Perché escono le cifre di pi greco
Messe le velocità dei due blocchi su un piano, con gli assi scalati dalla radice delle masse, l’energia è un cerchio e ogni urto è un rimbalzo fra due rette: l’angolo fra le rette è l’arcotangente della radice del rapporto delle masse. Con un rapporto di 100 elevato a n, il numero di rimbalzi che stanno nel mezzo giro sono le prime n più una cifre di pi greco. Lo script ferma il conto quando i due blocchi vanno tutti e due verso destra e il grande è più veloce: non possono più toccarsi.
Il numero che sente i colpi
Il contatore è Fraunces, un carattere variabile con grazie, a corpo ottico 144 e peso 300. Ogni urto aggiunge un poco di peso che si spegne da solo in un decimo di secondo: quando gli urti si fanno fitti, il numero ingrassa e vibra insieme a loro. A conto finito il numero passa all’arancio e le cifre di pi greco che il conto ha trovato si accendono una dopo l’altra.
La regia
Ogni coppia è una timeline GSAP: i blocchi arrivano in dissolvenza, il numero torna a zero e il blocco grande parte con la velocità che lo porta sul piccolo in SPEED secondi. Un gsap.delayedCall tiene il risultato per HOLD secondi, poi i blocchi spariscono e arriva la coppia dopo. Il tempo di ogni fotogramma non supera un trentesimo di secondo, e quando niente si muove la pagina non si ridisegna.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
RATIOS | script.js | [1, 100, 10000] | Quante volte il blocco grande pesa più del piccolo, una coppia dopo l’altra. Le potenze di 100 danno le cifre di pi greco; un milione dà 3141 urti, molto fitti. |
SPEED | script.js | 0.9 | Quanti secondi impiega il blocco grande per arrivare sul piccolo. |
HOLD | script.js | 2.4 | Quanti secondi resta il risultato prima della coppia dopo. |
UNIT | script.js | 'kg' | L’unità scritta sotto i blocchi. |
--accent | style.css | #ff5a1f | Il colore degli urti del blocco piccolo e delle cifre trovate. |
Quando usarla
Per una pagina che racconta un’idea in un colpo d’occhio: un ciclo di lezioni o un festival della scienza, un museo, il blog di un divulgatore, la copertina di un corso di fisica o di matematica, la pagina «chi siamo» di uno studio che ama i numeri. Il numero grande fa da titolo.
Sul telefono
La stessa fisica, esatta su ogni schermo: il muro sta vicino al bordo, i blocchi e le distanze si misurano sulla larghezza, il numero è più grande in proporzione. Un tocco porta la coppia dopo.
Con il movimento ridotto
Niente scivola: il conto di ogni coppia è già fatto (lo script lo calcola in silenzio), i blocchi stanno al loro posto e il numero è già in arancio con le sue cifre di pi greco accese. Un clic passa alla coppia dopo con una dissolvenza.
Trappole
- Un passo fisso, anche piccolo, sbaglierebbe il conto della coppia da diecimila: verso la fine gli urti fra muro e blocco grande cadono a frazioni di millisecondo l’uno dall’altro, e due finirebbero nello stesso passo. Per questo il calcolo va urto per urto, senza passo, e il conto è esatto.
- Il giro non torna mai su sé stesso prima di circa venticinque secondi (tre coppie): il video della scheda deve contarle tutte, altrimenti si ferma dopo la prima.
- I tratteggi del muro, sul telefono, scendevano oltre il pavimento: l’ultimo si disegna solo se finisce sopra la riga.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,7 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.
