Il pavimento che si alza
SVG, Hover, Fisica
NuovaGratis
Torna alla libreria
La buca col mulino a vento
Una buca di minigolf vista dall’alto in leggera prospettiva: la mazza segue il puntatore, si carica e colpisce, e la pallina rotola con la fisica vera fra sponde di legno, le pale del mulino che chiudono il tunnel a tempo, un ponticello e una rampa. In buca fa un giro sul bordo, cade e la bandierina salta.
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 windmill hole</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@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="campo">
<header class="testa">
<p class="sopra">Breezeway Mini Golf</p>
<h1 class="titolo">Beat the windmill</h1>
<p class="riga">Aim with the pointer: the farther away it is, the harder the putt. Click the green to swing, and time it between the sails.</p>
</header>
<!-- the hole is drawn by the script: turf, wooden rails, the windmill, the bridge, the ramp, the cup and the putter -->
<div class="buca" data-buca>
<svg class="buca__svg" data-svg role="img" aria-label="A mini golf hole seen from above: a windmill guards the tunnel, then a wooden bridge, a ramp and the cup with its flag"></svg>
</div>
<div class="piede">
<div class="conti">
<p class="conto"><span class="conto__nome">Strokes</span> <span class="conto__num" data-colpi>0</span></p>
<p class="conto"><span class="conto__nome">Par</span> <span class="conto__num">3</span></p>
<p class="conto"><span class="conto__nome">Holed</span> <span class="conto__num" data-fatte>0</span></p>
<p class="stato" aria-live="polite"><span class="stato__testo" data-stato>Tee is set</span></p>
</div>
<button type="button" class="tiro" data-tiro data-autoclic>
<span class="tiro__fondo" aria-hidden="true"></span>
<span class="tiro__testo">Caddie putt</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 buca col mulino a vento» da Animorio e adattala al mio sitoCosa fa
Al Breezeway Mini Golf, un minigolf inventato, la buca si costruisce da sola: le sponde di legno spuntano una dopo l’altra con un rimbalzo, il ponticello si inarca sul ruscello, il mulino sale dal prato e le sue pale si aprono e cominciano a girare, i cespugli e il cartello saltano fuori, la bandierina esce dalla buca e la pallina cade sul tappetino della partenza rimbalzando. Il percorso è una U: su per la corsia di sinistra e dentro il tunnel sotto il mulino, sulla sponda inclinata dell’angolo, sopra il ponticello, giù per l’altra sponda inclinata, su e giù per la rampa fino alla buca. La mazza segue il puntatore: gira con dolcezza e più il puntatore è lontano più si tira indietro, e una linea sul prato mostra la direzione. Al clic carica, si ferma un attimo e colpisce. La pallina rotola davvero (la riga stampata gira con lei), rallenta sul prato, rimbalza sulle sponde schiacciandosi un poco, sale e scende sul ponte e sulla rampa, e se arriva sotto il mulino mentre passa una pala torna indietro con una schicchera di schegge di legno. Una riga racconta il tiro: nel mulino, sul ponte, sulla rampa. Se arriva piano sulla buca ci gira intorno sul bordo, sprofonda, la bandierina salta fuori e ricade rimbalzando, e il contatore dice com’è andata (buca in uno, birdie, par). Il tasto del caddie gioca da solo: legge il green provando in anticipo centinaia di tiri, poi aspetta il momento giusto fra una pala e l’altra; il suo primo tiro dalla partenza, come lezione, prende la pala.
Come funziona
Una prospettiva scritta a mano
Niente WebGL: ogni punto della buca ha tre coordinate (x, y sul prato, z in altezza) e una piccola funzione lo porta sullo schermo come lo vedrebbe una camera inclinata di mezzo radiante, con le cose lontane un po’ più piccole. Sponde, mulino, ponte e mazza sono prismi: si disegnano solo le facce che guardano la camera, poi il coperchio. Per sapere dove ha cliccato il puntatore si fa il conto al contrario, dallo schermo al prato.
Chi sta davanti a chi
Ogni pezzo in rilievo ha una chiave, la sua y più lontana, e i pezzi stanno nell’SVG dal più lontano al più vicino. A ogni fotogramma la pallina e la mazza vengono infilate al loro posto in quella fila: così la pallina sparisce dentro il tunnel, passa dietro la ringhiera vicina del ponte e davanti a quella lontana, e la bandierina la copre quando è dietro.
La fisica a passi fissi
La pallina avanza a passi di un centoventesimo di secondo, divisi in passi più piccoli quando corre: la pendenza del ponte e della rampa la spinge, il prato la frena (un attrito costante più uno che cresce con la velocità), e ogni sponda è un segmento da cui la pallina viene spinta fuori e rimbalza. Le pale sono segmenti che si muovono: dove la pala taglia l’altezza della pallina c’è un muro che scorre di lato, e il rimbalzo tiene conto della sua velocità.
Il caddie che prova in anticipo
Proprio perché la fisica va a passi fissi, un tiro si può giocare tutto in anticipo con lo stesso codice. Il caddie prova tutte le direzioni e le forze senza le pale, poi affina le migliori finché trova la buca, lavorando pochi millisecondi per fotogramma (è un generatore). Col tiro pronto e la mazza carica, a ogni fotogramma rigioca il tiro con le pale come saranno al colpo, e colpisce quando passa. La pallina parte dopo un numero fisso di passi, così la previsione è esatta.
Il giro sul bordo e la bandierina
Quando la pallina è sopra la buca abbastanza piano esce dalla fisica e una timeline GSAP la fa girare intorno al bordo nel verso in cui correva, accelerando, poi la fa sprofondare dentro un clipPath che taglia tutto quello che sta sotto il bordo vicino. La bandierina salta con power2.out e ricade con bounce.out, mentre la stoffa sventola con un elastic.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
POTENZA | script.js | 1500 | La velocità della pallina col colpo più forte, in unità del percorso al secondo (il percorso è largo 1000). |
ATTRITO | script.js | 150 | Quanto il prato frena la pallina. |
SPONDA | script.js | 0.72 | Quanto rimbalza la pallina sulle sponde di legno (1 = senza perdere niente). |
PENDENZA | script.js | 1 | Quanto sono ripidi il ponte e la rampa (0 = piatti). |
VENTO | script.js | 0.9 | Quanto gira veloce il mulino, in radianti al secondo. |
PALE | script.js | 4 | Quante pale ha il mulino: più pale, meno spazio per passare. |
GUIDA | script.js | true | La linea di mira sul prato. |
Quando usarla
Per la pagina di un minigolf, di un parco o di un locale, per una pagina 404 da giocare o per un momento di svago dentro un sito: è un gioco, e va messo dove chi arriva ha tempo.
Sul telefono
La buca resta grande e la camera segue la pallina scorrendo di lato. Senza hover, il tocco fa tutto insieme: mira verso il dito e tira, con la forza data dalla distanza. Il tasto del caddie gioca come sul computer.
Con il movimento ridotto
Niente movimento: le pale stanno ferme col tunnel aperto, il tiro si calcola tutto in un colpo e la pallina si dissolve e ricompare dove si ferma; se va in buca sparisce e il contatore si aggiorna, poi ricompare sulla partenza.
Trappole
- Per prevedere un tiro la fisica deve andare a passi fissi, uguali nel gioco e nella prova: con passi legati al tempo dei fotogrammi lo stesso tiro finisce ogni volta in un punto diverso e il caddie sbaglia.
- Se la pallina parte quando finisce l’animazione del colpo, il tempo di GSAP e quello della fisica si staccano sui computer lenti e le pale non sono dove il caddie pensava: la pallina deve partire dopo un numero fisso di passi della fisica.
- Cercare il tiro giusto prova migliaia di tiri: fatto tutto insieme blocca la pagina per un secondo. Come generatore lavora pochi millisecondi per fotogramma, e comincia mentre la pallina sta ancora rotolando verso il punto dove si fermerà.
- Una sponda tagliata a pezzi per seguire la rampa mostra le facce dei tagli come righe scure: si disegnano solo le due facce lunghe, e i coperchi hanno un filo dello stesso colore che chiude le fessure.
- Caricando il colpo vicino a una sponda la testa della mazza la attraversa: si misura lo spazio dietro la pallina e la carica si ferma prima del legno (la forza del tiro non cambia).
- Con l’attrito proporzionale la velocità scende senza arrivare mai a zero: sotto una soglia la pallina si ferma davvero, ma solo se la pendenza non è più forte dell’attrito, altrimenti resterebbe appesa a metà rampa.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 21 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.
