Gli oggetti senza peso
Fisica, 3D, Hover
NuovaGratis
Torna alla libreria
La torre di blocchi
Una torre di blocchetti di legno a strati incrociati, in isometrico: a ogni clic una pinza a ventosa sfila un blocco a piccoli scatti e lo posa in cima, la torre ondeggia; al terzo turno crolla con una fisica vera, i blocchi si sparpagliano sul vassoio e poi tornano al loro posto in volo.
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>The tower of blocks</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena" data-stage data-autoclic aria-label="A wooden tower of blocks: click to pull one out">
<header class="testa">
<p class="sopra" data-head>The Wobbly Table, board game café</p>
<h1 class="titolo" data-head>One more pull</h1>
</header>
<!-- the tray and the tower live in a CSS 3D world, seen from above at an angle: the script builds every block -->
<div class="palco" data-view>
<div class="asta" data-arm></div>
<div class="mondo" data-world></div>
</div>
<footer class="piede">
<button type="button" class="tira" data-pull data-autoclic>
<svg class="tira__segno" viewBox="0 0 28 24" aria-hidden="true">
<rect class="tira__blocco" x="3" y="2" width="18" height="5.5" rx="1.2" />
<rect class="tira__blocco tira__blocco--fuori" x="3" y="9.25" width="18" height="5.5" rx="1.2" />
<rect class="tira__blocco" x="3" y="16.5" width="18" height="5.5" rx="1.2" />
</svg>
<span class="tira__testo">Pull a block</span>
</button>
<p class="nota" aria-live="polite"><span data-hint>Stacking the tower</span></p>
</footer>
</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.
25 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 torre di blocchi» da Animorio e adattala al mio sitoCosa fa
Nel caffè dei giochi inventato The Wobbly Table c’è un vassoio di panno verde col bordo di legno, visto dall’alto in isometrico; sopra, una torre di quattordici piani di blocchetti di legno, tre per piano, ogni piano girato di traverso rispetto a quello sotto. All’apertura i blocchi cadono dall’alto piano per piano, rimbalzano appena e la torre trema. A ogni clic (sulla scena o sul pulsante Pull a block) una pinza scende dall’alto con un braccio di metallo, appoggia la ventosa rossa sulla testa di un blocco, la ventosa si schiaccia, e lo sfila a piccoli strattoni: a ogni strattone la torre ondeggia e torna con un elastico, e il piano sopra viene trascinato un poco dall’attrito. Il blocco sale lungo la torre, gira se serve e viene posato in cima con un rimbalzino; la pinza si stacca e se ne va. Al terzo turno, a metà dello sfilamento, la torre ondeggia sempre di più, la pinza molla la presa e la parte sopra il buco ruota sullo spigolo e cade: i blocchi si staccano, rimbalzano, rotolano e si fermano sul vassoio contro il bordo. Dopo un attimo ogni blocco si solleva dal mucchio e torna al suo posto in volo, dal basso verso l’alto.
Come funziona
Scatole in CSS 3D
Ogni blocco è un div con sei facce (backface-visibility hidden) dentro un mondo con transform-style preserve-3d, girato con rotateX e rotateY(-45deg) e senza prospettiva: è una vista isometrica vera, e il browser mette da solo in ordine le facce davanti e dietro. Le venature sono gradienti CSS ripetuti, diversi per ogni blocco.
Una posa per blocco
Ogni blocco ha un modo (in torre, preso dalla pinza, libero, in volo) e a ogni giro del ticker di GSAP una sola funzione ne calcola posizione e rotazione e le scrive in un matrix3d. La stessa rotazione dice quanto è in ombra ogni faccia rispetto a una luce fissa: un blocco che rotola cambia luce da solo.
La pinza e gli strattoni
Il turno è una timeline: la pinza scende con un back.out, si avvicina e la ventosa si schiaccia; poi tanti tween corti con ease power3.out spostano il blocco verso fuori, e a ognuno l’oscillazione della torre riceve un colpo che torna con elastic.out. Il blocco sale, ruota di 90 gradi se il piano in cima è di traverso, e scende al suo posto.
Il crollo
La parte sopra il buco ruota prima con GSAP intorno allo spigolo verso cui cade, con un power2.in che accelera come la gravità. Poi ogni blocco diventa un corpo rigido con la velocità che aveva in quella rotazione: gravità, urti con impulsi, attrito e rimbalzo, a passi fissi di 1/300 di secondo. Gli spigoli del blocco urtano il vassoio e i bordi; fra due blocchi urtano dodici sfere messe dentro ognuno.
Il sonno e il ritorno
Un blocco appoggiato e quasi fermo per 0,3 secondi si addormenta e diventa un appoggio fisso: così i mucchi non tremano. Quando dormono tutti, o dopo quattro secondi, la fisica si ferma; dopo una pausa ogni blocco vola a casa su una curva, con la rotazione interpolata (slerp) verso la più vicina delle quattro pose uguali di una scatola, e atterra con un rimbalzino.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PIANI | script.js | 14 | I piani della torre all’inizio, tre blocchi ciascuno. |
TURNI | script.js | 3 | A quale turno la torre crolla mentre la pinza sfila il blocco. |
STRATTONI / OSCILLAZIONE | script.js | 4 / 1 | In quanti scatti esce un blocco e quanto ondeggia la torre a ogni scatto. |
GRAVITA / RIMBALZO | script.js | 1 / 0.22 | La forza di gravità del crollo (1 è un poco più lenta del vero) e quanto rimbalzano i blocchi. |
PAUSA | script.js | 1.4 | I secondi col mucchio fermo prima che la torre si rifaccia. |
VISTA | script.js | 30 | Di quanti gradi guardiamo il vassoio dall’alto. |
--legno, --panno, --gomma | style.css | #e2b877, #2f6b5e, #d9482b | Il legno dei blocchi, il panno del vassoio, la ventosa e il pulsante. |
Quando usarla
Per la pagina di un caffè dei giochi, di un negozio di giocattoli o di un falegname, per un 404 («è crollato tutto») o per una pagina che parla di rischio e di equilibrio. È un gioco da guardare: il contenuto vero va accanto.
Sul telefono
Stesse animazioni e stessa fisica: le misure si prendono dallo schermo, quindi sul telefono vassoio e torre stanno in larghezza. Basta un tocco sulla scena o sul pulsante; l’ondeggiamento al passaggio del mouse sul telefono non c’è.
Con il movimento ridotto
La torre è già in piedi. A ogni clic il blocco sparisce in dissolvenza dal suo piano e ricompare in cima; al turno del crollo la fisica si calcola tutta in un colpo e il mucchio compare già fermo, in dissolvenza. Il clic dopo rimette la torre.
Trappole
- In CSS 3D gli elementi che si toccano su facce coincidenti sfarfallano: fra un blocco e l’altro c’è mezzo pixel d’aria, le ombre stanno appena sopra il panno e il panno appena sotto i blocchi.
- Il CSS ha la Y in giù, il mondo della fisica in su: la matrice di rotazione va girata (S·R·S con S = diag(1, −1, 1)) prima di scriverla in matrix3d, altrimenti i blocchi ruotano al contrario.
- Una torre lasciata alla fisica così com’è resta in piedi o trema per sempre: la parte che cade parte già ruotata e con la sua velocità, e chi resta in piedi è una scatola ferma, non un corpo.
- I blocchi appoggiati gli uni sugli altri tremano: un corpo quasi fermo per un attimo si addormenta e un cane da guardia fatto con gsap.delayedCall chiude la fisica dopo quattro secondi.
- La fisica avanza dal ticker di GSAP a passi fissi, non da un requestAnimationFrame suo: così si ferma e rallenta con le timeline, e un blocco veloce non attraversa un altro in un passo solo.
- Un piano 3D altissimo (il braccio della pinza che sale fuori dal palco) a volte il browser non lo disegna o lo disegna sopra il titolo: in isometrico una sbarra verticale resta verticale sullo schermo, quindi il braccio è un div piatto messo dove cade la proiezione della testa della pinza.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 16 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 11 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.
