Gli oggetti senza peso
Fisica, 3D, Hover
NuovaGratis
Torna alla libreria
Il labirinto da inclinare
Il vecchio gioco di legno col labirinto e la biglia d’acciaio, tutto in CSS 3D: il puntatore inclina la tavola sui due assi e la biglia rotola con la fisica vera (gravità sul piano inclinato, urti coi muretti, attrito). I buchi la inghiottono con un piccolo vortice, la coppa d’ottone in fondo fa volare coriandoli di carta. Da sola, la tavola si inclina e guida la biglia lungo la linea.
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 tilt maze</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<header class="shop">
<p class="shop__name" data-shop>Marlow & Pip Toyworks</p>
<p class="shop__line">The tilt maze, hand-cut in maple</p>
</header>
<!-- the toy: a box that stays still, the maze board that tilts inside it, the steel ball on the board -->
<div class="scene" data-scene>
<div class="fit" data-fit>
<div class="intro" data-intro>
<div class="table" data-table role="img" aria-label="A wooden tilt maze with a steel ball, holes along the way and a brass cup at the end">
<div class="box" data-box>
<div class="lift" data-lift>
<div class="board" data-board>
<div class="board__top" data-top>
<svg class="art" data-art aria-hidden="true"></svg>
<div class="holes" data-holes></div>
<svg class="whirl" data-whirl viewBox="-30 -30 60 60" aria-hidden="true">
<path d="M0 -22 C14 -22 22 -12 20 0 C18 10 8 14 0 12"/>
<path d="M19 11 C12 23 -2 25 -12 17 C-19 10 -16 0 -9 -3"/>
<path d="M-19 11 C-25 -2 -18 -16 -6 -20 C3 -23 9 -15 7 -8"/>
</svg>
<i class="shadow" data-shadow></i>
</div>
<div class="ball" data-ball><i class="ball__shine"></i></div>
</div>
</div>
</div>
<!-- the knobs that turn the two axles (they are moved onto the front of the box by the script) -->
<span class="knob" data-knob><i class="knob__cap"></i></span>
<span class="knob knob--right" data-knob><i class="knob__cap"></i></span>
</div>
</div>
</div>
</div>
<p class="hint" data-hint aria-live="polite"></p>
<!-- what flies when the ball reaches the cup -->
<div class="confetti" data-confetti aria-hidden="true"></div>
<div class="win" data-win>
<p class="win__shop" data-shop>Marlow & Pip Toyworks</p>
<p class="win__title" data-win-title>Rolled home!</p>
<p class="win__line">Hand-cut maze boards. Steel balls included.</p>
</div>
</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.
41 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 labirinto da inclinare» da Animorio e adattala al mio sitoCosa fa
Su un tavolo color lino c’è una scatola di noce, vista dal davanti e un po’ dall’alto, con il nome di un negozio di giocattoli inventato, Marlow & Pip Toyworks, scritto in ottone fra due manopole. Dentro la scatola c’è la tavola d’acero con le venature, i muretti di betulla, nove buchi, una linea stampata che attraversa il labirinto, un cerchio con la scritta START in alto a sinistra e una coppa d’ottone in basso a destra. All’apertura la scatola sale e si posa con un rimbalzo, la tavola scende al suo posto, i muretti spuntano dal legno uno dopo l’altro, la linea si disegna, i buchi si aprono e le manopole fanno un giro elastico. Poi la biglia d’acciaio cade dall’alto sulla partenza e rimbalza sul legno, con l’ombra che si stringe mentre arriva. Muovendo il puntatore la tavola si inclina verso di lui (fino a 6 gradi per lato), le manopole girano con lei e la biglia rotola dalla parte che scende: prende velocità, sbatte sui muretti perdendo un po’ di spinta (la tavola dà un piccolo sussulto quando l’urto è forte) e rallenta per l’attrito. Vicino a un buco il bordo la tira dentro: la biglia gira a spirale verso il centro, rimpicciolisce e si scurisce, un piccolo vortice di tre tratti chiari ruota sul buco, la frase sotto la scatola dice «Swallowed!» e una biglia nuova cade sulla partenza. Se arriva nella coppa, la biglia si assesta, l’anello d’ottone vibra con un elastico, dalla coppa esplode un getto di strisce di carta colorata che ricadono girando su se stesse, e sopra la tavola arriva un cartellino del negozio con il titolo «Rolled home!», le lettere che saltano su una dopo l’altra. Dopo qualche secondo il cartellino se ne va e una biglia nuova cade sulla partenza. Senza nessuno a guidarla, la tavola si inclina da sola: la prima biglia di ogni giro va dritta nel buco della colonna di sinistra, la seconda segue tutta la linea fino alla coppa. Funzionano anche le frecce della tastiera; lasciata la tavola, dopo due secondi il pilota riprende la biglia da dove si trova.
Come funziona
Una scatola vera in CSS 3D
Ogni muretto è un blocco con cinque facce (il sopra e i quattro lati), fatte con dei div ruotati di 90 gradi intorno a un bordo e con backface-visibility nascosta: quelle girate dall’altra parte non si disegnano. La scatola di noce è fatta allo stesso modo e resta ferma; la tavola, con i muretti e la biglia, sta in un contenitore con transform-style: preserve-3d che ruota con rotateX e rotateY. Tutto è misurato in unità della tavola (580 per 400), le stesse della fisica; uno scale sul contenitore esterno la adatta allo schermo e la prospettiva cresce con lui.
La gravità proiettata sul piano
La fisica avanza a passi fissi di 1/240 di secondo dentro il ticker di GSAP. A ogni passo la biglia riceve la parte della gravità che scorre lungo la tavola: il seno dell’inclinazione su ognuno dei due assi, per i 5/7 di una sfera che rotola. Poi si toglie l’attrito di rotolamento (una frenata costante) e un poco di resistenza, e la biglia si sposta. Dentro il bordo di un buco una forza in più la tira verso il centro, come il legno che scende: se il centro passa oltre, la biglia è dentro.
Gli urti coi muretti
Per ogni muretto si cerca il punto del rettangolo più vicino al centro della biglia; se è più vicino del raggio, la biglia viene rimessa fuori lungo quella direzione e la parte della velocità che va contro il muro si rovescia, smorzata da BOUNCE, mentre quella lungo il muro perde un 4%. I passi così piccoli impediscono alla biglia di passare attraverso un muretto anche quando corre. L’urto più forte di ogni fotogramma dà alla tavola un sussulto elastico di qualche decimo di grado, solo nel disegno.
La biglia che guarda sempre noi
La biglia è un cerchio con un gradiente d’acciaio, il riflesso caldo del legno sotto e una finestra in alto. Sta dentro la tavola inclinata, alla sua altezza col translate3d, ma ha le rotazioni della tavola e della scatola applicate al contrario (rotateY e rotateX con il segno cambiato, nell’ordine inverso): così resta sempre rotonda verso di noi e i muretti davanti la coprono come farebbero con una sfera. L’ombra invece è disegnata sul legno, più lontana e più sfumata quando la biglia cade dall’alto.
Il pilota e la regia
Il pilota ha un elenco di punti, il centro di ogni casella della linea spostato lontano dai buchi vicini. A ogni passo calcola un’accelerazione come una molla verso il punto più uno smorzatore sulla velocità, la trasforma nell’inclinazione che la darebbe (arcoseno, con il limite di MAX_TILT) e la tavola la segue con un piccolo ritardo, come su due perni veri. Vicino al punto passa al successivo. La prima biglia del giro ha come ultimo punto il buco: così il video mostra anche il vortice. Il vortice, la caduta, la coppa, i coriandoli e il cartellino sono timeline GSAP; tutto parte sempre dallo stesso stato, quindi ogni giro è identico al precedente.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
MAX_TILT | script.js | 6 | Quanto si può inclinare la tavola, in gradi: poco è un gioco calmo, tanto è nervoso. |
GRAVITY | script.js | 1 | Quanto pesa la biglia: 0.6 lenta e leggera, 1.6 veloce. |
FRICTION | script.js | 1 | Quanto il legno frena la biglia: 0 è ghiaccio, 3 è feltro. |
BOUNCE | script.js | 0.34 | Quanta velocità tiene la biglia dopo un urto con un muretto (0 si ferma, 0.9 rimbalza tanto). |
VIEW | script.js | 34 | Quanto la scatola è inclinata all’indietro, in gradi (0 = vista dritta dall’alto). |
SHOP | script.js | Marlow & Pip Toyworks | Il nome del negozio, sulla scatola e sul cartellino. |
TITLE | script.js | Rolled home! | Il titolo quando la biglia arriva nella coppa. |
CONFETTI | script.js | 72 | Quante strisce di carta escono dalla coppa. |
Quando usarla
Per il sito di un negozio di giocattoli o di una falegnameria, una pagina 404 da giocare, la schermata d’attesa di un’app, un concorso o un regalo a sorpresa che si apre arrivando alla coppa, il sito di uno studio che vuole mostrare cosa sa fare il CSS 3D. La fisica (gravità proiettata, urti con i rettangoli, buchi col bordo) serve per ogni gioco da tavolo con una pallina.
Sul telefono
La stessa scatola, la stessa fisica e lo stesso pilota, con le misure adattate: la scatola si rimpicciolisce per stare nella larghezza dello schermo e la prospettiva con lei. Si inclina la tavola trascinando il dito: dove sta il dito rispetto al centro della scatola, lì scende la tavola; staccato il dito, il pilota riprende.
Con il movimento ridotto
Niente movimento: la scatola compare in dissolvenza già col gioco finito, la tavola dritta, la biglia ferma nella coppa d’ottone, e il cartellino «Rolled home!» arriva anche lui in dissolvenza. Niente coriandoli e niente inclinazione.
Trappole
- L’opacità su un contenitore con preserve-3d lo appiattisce: durante la dissolvenza d’entrata i muretti si disegnavano nell’ordine sbagliato. La dissolvenza sta sulla scena (quella con la prospettiva), il movimento sul figlio.
- Un cerchio piatto dentro la tavola inclinata diventa un’ellisse: la biglia ha le rotazioni della tavola e della scatola applicate al contrario, nell’ordine inverso, così resta rotonda.
- I muretti verticali e orizzontali si incrociano nello stesso punto con il sopra alla stessa altezza: due piani uguali sovrapposti sfarfallano. I verticali sono più alti di sei decimi di unità.
- Il video dell’anteprima si chiude quando un’immagine in movimento torna uguale a una di prima: con un pilota a caso il giro non tornava mai uguale. Il pilota non ha niente di casuale, quindi la biglia nuova dopo la coppa cade identica a quella dopo il buco e il video si chiude lì, con tutto il giro dentro (entrata, buco, coppa, coriandoli, biglia nuova).
- Con passi di tempo calcolati dal fotogramma l’accumulatore cambiava di poco da un giro all’altro e i giri non erano più identici: i passi si contano con un piccolo margine e l’accumulatore torna a zero a ogni biglia nuova.
- La fisica gira nel ticker di GSAP ma il video aspetta le animazioni GSAP in programma: a ogni biglia parte un richiamo vuoto di trenta secondi che tiene aperta la regia.
- Con la tavola inclinata l’angolo che scende andava più in basso del fondo della scatola: il fondo tagliava la tavola in 3D e ne copriva un pezzo con un trapezio scuro. Ora la scatola è profonda quanto serve all’angolo più basso con l’inclinazione massima sui due assi (più lo spessore della tavola), e la profondità si calcola da MAX_TILT.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 15 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.
