Il pavimento che si alza
SVG, Hover, Fisica
NuovaGratis
Torna alla libreria
La spaccata al biliardo
Un tavolo da biliardo visto dall’alto: la stecca prende la mira col puntatore, si tira indietro e spacca il triangolo con la fisica vera. Le palle rotolano davvero, quelle in buca girano in un piccolo vortice e finiscono nel vassoio, poi il triangolo rimette tutto a posto.
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 billiard break</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/standard.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="sala">
<header class="testa">
<p class="sopra">The Baize Room Billiard Club</p>
<h1 class="titolo">Break the rack</h1>
<p class="riga">Aim with the pointer: the farther away it is, the harder the cue hits. Click the table to shoot.</p>
</header>
<!-- the table is drawn by the script: felt, rails, pockets, fifteen numbered balls and the cue -->
<div class="tavolo" data-tavolo>
<svg class="tavolo__svg" data-svg role="img" aria-label="A billiard table seen from above, with fifteen balls racked in a triangle"></svg>
</div>
<div class="piede">
<div class="conti">
<p class="conto"><span class="conto__nome">Potted</span> <span class="conto__num" data-imbucate>0</span><span class="conto__su">/15</span></p>
<p class="conto"><span class="conto__nome">Breaks</span> <span class="conto__num" data-colpi>0</span></p>
<p class="stato" aria-live="polite"><span class="stato__testo" data-stato>Table is set</span></p>
</div>
<!-- the ball return: potted balls roll in here -->
<div class="vassoio" data-vassoio aria-label="Ball return"></div>
<button type="button" class="tiro" data-tiro data-autoclic>
<span class="tiro__fondo" aria-hidden="true"></span>
<span class="tiro__testo">Break</span>
</button>
</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 «La spaccata al biliardo» da Animorio e adattala al mio sitoCosa fa
Sul tavolo di un club inventato, The Baize Room, con il panno verde, le sponde di legno con le venature e i rombi di madreperla, il triangolo di legno scende sul punto del piede, le quindici palle numerate ci cadono dentro a file con un rimbalzo e il triangolo, dopo una spintarella per stringerle, si alza. Arriva la stecca, che segue il puntatore: gira con dolcezza, e più il puntatore è lontano dalla bianca più si tira indietro, perché il colpo sarà più forte. Una linea tratteggiata mostra dove andrà la bianca, con la palla fantasma nel punto dell’urto e la strada della palla colpita. Al clic la stecca carica, si ferma un attimo e colpisce: una nuvoletta di gesso blu, il tavolo trema all’urto col triangolo e le palle si spargono rimbalzando fra loro e sulle sponde, rallentate dal panno. Mentre corrono rotolano davvero: i numeri e le fasce girano sulla palla. Quelle che arrivano in buca girano in un piccolo vortice, rimpiccioliscono e spariscono, e una pallina uguale rotola nel vassoio sotto il tavolo; il contatore si aggiorna con un saltello. Quando tutto è fermo una riga dice com’è andata, poi il triangolo torna, le palle rimaste rotolano al loro posto, quelle in buca rispuntano e la bianca torna dietro la linea.
Come funziona
Una fisica piccola, scritta a mano
Niente librerie: per palle tutte uguali bastano poche righe. A ogni passo il panno toglie velocità (un attrito costante più uno che cresce con la velocità), poi si controllano le coppie di palle che si toccano: si separano e si scambiano l’impulso lungo la linea dei centri, con un coefficiente di elasticità. I passi sono tanti quanti servono perché nessuna palla avanzi più di un terzo del raggio: così alla spaccata nessuna attraversa le altre.
Sponde e ganasce come segmenti
Ogni sponda è un segmento, e alle buche continua con due segmenti inclinati, le ganasce. Per ogni palla si cerca il punto più vicino di ogni segmento: se è più vicino del raggio la palla viene spinta fuori e la sua velocità rimbalza lungo la normale. Così la stessa regola fa i rimbalzi sulle sponde e le palle che sbattono sullo spigolo della buca e restano fuori.
Palle che rotolano davvero
Ogni palla tiene due vettori in 3D: il polo del numero e l’asse della fascia. Quando avanza di d, ruotano di d diviso il raggio attorno all’asse orizzontale perpendicolare al moto. Numero e fasce sono calotte della sfera viste dall’alto: si campiona il loro bordo e i punti dietro la palla si spingono sul contorno, così ogni fotogramma diventa un tracciato SVG.
La stecca e il colpo
La stecca è disegnata una volta sola con la punta in zero e si muove con un solo transform: posizione della bianca, angolo di mira e distanza. L’angolo insegue il puntatore con una frenata esponenziale, e la distanza dice la forza. Il colpo è una timeline GSAP: carica, pausa, colpo secco, e solo alla fine del colpo la bianca riceve la sua velocità.
Il vortice e il triangolo
Una palla in buca esce dalla fisica e una timeline GSAP la fa girare a spirale verso il centro della buca, nel verso in cui correva, mentre rimpicciolisce e rotola. Quando tutto è fermo, una delayedCall aspetta la pausa e poi il triangolo rimette le palle: anche lì ogni palla rotola mentre torna al suo posto.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
POTENZA | script.js | 3400 | La velocità della bianca col colpo più forte, in unità del tavolo al secondo (il tavolo è lungo 1000). |
ATTRITO | script.js | 270 | Quanto il panno frena le palle: più alto, la spaccata finisce prima. |
SPONDA | script.js | 0.78 | Quanto rimbalzano le palle sulle sponde (1 = senza perdere niente). |
URTO | script.js | 0.95 | Quanto sono elastici gli urti fra le palle. |
EFFETTO | script.js | 0.3 | L’effetto sulla bianca: positivo continua in avanti dopo l’urto, negativo torna indietro. |
PAUSA | script.js | 0.9 | Secondi di attesa, a palle ferme, prima che il triangolo rimetta a posto. |
GUIDA | script.js | true | La linea di mira con la palla fantasma. |
Quando usarla
Per la pagina di un locale, di un club o di un gioco, per una pagina 404 da giocare o per un momento di svago dentro un sito: è un gioco, e va lasciato in un punto dove chi arriva ha tempo.
Sul telefono
Il tavolo si gira in verticale, così resta grande. Senza hover, il tocco fa tutto insieme: mira verso il dito e tira, con la forza data dalla distanza. Il pulsante tira lungo la mira di partenza.
Con il movimento ridotto
Niente movimento: la spaccata si calcola tutta in un colpo, le palle si dissolvono e ricompaiono dove si sono fermate; anche il triangolo rimette a posto con una dissolvenza.
Trappole
- Con un passo solo per fotogramma, alla spaccata la bianca corre più di un raggio in un fotogramma e attraversa le palle: i passi vanno divisi in base alla palla più veloce.
- Le palle ferme vanno fermate davvero sotto una soglia (qui 6 unità al secondo): con il solo attrito proporzionale la velocità scende senza arrivare mai a zero e la fine del tiro non arriva.
- Le sponde dritte con le buche come semplici cerchi lasciano palle che girano nell’angolo senza entrare: servono le ganasce inclinate, e un controllo che manda in buca chi esce comunque dal tavolo.
- La stecca segue la bianca: se dopo il colpo continua a leggerne la posizione, la insegue sul tavolo. Al colpo si fissa il punto di partenza.
- Su SVG il testo ruota col tavolo: girando il tavolo in verticale i numeri vanno ruotati al contrario, altrimenti si leggono di lato.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Mona Sans (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.
