Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
I barattoli da abbattere
Il tiro ai barattoli delle fiere, per vincere un codice sconto: sei barattoli di latta dipinti a smalto in piramide su una mensola di legno, sopra un banco a strisce, e una palla di stoffa in una fionda. Si tira indietro la palla e la si lascia, o la tira il pulsante; da lì è tutta fisica a corpi rigidi vera: i barattoli girano, si urtano, rimbalzano e cadono. Tre palle: se la mensola resta vuota esce il biglietto col codice.
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>Knock them all down</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the tin can alley of a shop's promotion: six painted tins stacked on a fairground shelf, a cloth ball in a
slingshot. Pull the ball back and let go, or press Throw; the tins are rigid bodies that tumble, knock into
each other, bounce and fall. Three balls: clear the shelf and the ticket with the code comes out -->
<section class="game" aria-labelledby="game-title" data-game data-autoclic>
<header class="game__head">
<h2 class="game__title" id="game-title">Knock them all down</h2>
<p class="game__rule">Three balls. Clear the shelf for 15% off.</p>
</header>
<div class="booth" tabindex="0" role="application" aria-roledescription="tin can alley"
aria-label="Six tins on a shelf and a ball in a slingshot. Drag the ball back and let go to throw. With the keys: up and down aim, left and right set the strength, Enter throws."
aria-describedby="game-say" data-booth>
<canvas class="booth__scene" aria-hidden="true" data-scene></canvas>
<canvas class="booth__fade" aria-hidden="true" data-fade></canvas>
<!-- the prize: a fairground ticket that comes up when the shelf is clear -->
<div class="ticket" data-ticket hidden>
<div class="ticket__paper">
<svg class="ticket__star ticket__star--l" viewBox="-10 -10 20 20" aria-hidden="true"><path d="M0-9l2.6 5.6 6 .7-4.4 4.1 1.2 6L0 4.4-5.4 7.4l1.2-6-4.4-4.1 6-.7z"/></svg>
<svg class="ticket__star ticket__star--r" viewBox="-10 -10 20 20" aria-hidden="true"><path d="M0-9l2.6 5.6 6 .7-4.4 4.1 1.2 6L0 4.4-5.4 7.4l1.2-6-4.4-4.1 6-.7z"/></svg>
<p class="ticket__kicker">Shelf cleared</p>
<p class="ticket__prize" data-prize>15% off</p>
<p class="ticket__line" data-prize-line>your whole order</p>
<button class="ticket__code" type="button" data-copy>
<span class="ticket__code-text" data-code>TINCAN15</span>
<span class="ticket__copy" data-copy-label>Copy</span>
</button>
</div>
</div>
</div>
<div class="bar">
<div class="say" aria-live="polite" id="game-say">
<p class="say__big" data-say>Pull the ball back and let go</p>
<p class="say__small" data-say-small>Three balls left</p>
</div>
<button class="throw" type="button" data-throw><span class="throw__face"><span class="throw__label" data-throw-label>Throw</span></span></button>
</div>
</section>
</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.
45 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 barattoli da abbattere» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco il titolo Knock them all down e la regola (Three balls. Clear the shelf for 15% off.), poi la scena disegnata su un canvas: a destra un banco da fiera a strisce rosse e crema fra due colonnine dorate, con la mantovana a festoni e sopra una mensola di pino; sulla mensola sei barattoli di latta in piramide, tre, due e uno, ognuno dipinto a smalto in un modo diverso (strisce, zigzag, stelle, losanghe, fasce, onde), con l'orlo di latta, il coperchio che si vede dall'alto e qualche graffio. A sinistra una fionda di legno con la palla di stoffa nella tasca e altre due palle per terra. Si afferra la scena col dito o col mouse e si tira indietro: la palla va con la tasca, gli elastici si tendono e si assottigliano, e una fila di trattini mostra la strada che farà. Lasciata, la palla parte e la tasca vuota sbatte avanti e indietro; Throw fa lo stesso con una mano finta che mira al barattolo più basso. Da lì i barattoli sono corpi rigidi veri: la palla li colpisce, girano su se stessi e intorno al loro asse, si urtano fra loro, rimbalzano sulla mensola e per terra, cadono di lato o volano via sfumando; la palla si schiaccia nell'urto e la scena trema appena. Quando tutto è fermo la riga dice quanti ne sono caduti (Three down, three to go) e la palla dopo salta da terra nella fionda. Se la mensola resta vuota sale il biglietto della lotteria con le stelle che girano, 15% off scritto largo e il codice TINCAN15 da copiare, mentre stelline di carta volano da dietro; se dopo tre palle resta qualcosa in piedi la riga dice quanti barattoli resistono e il pulsante diventa Try again. Play again o Try again rimettono i barattoli in piramide con un arco e un piccolo rimbalzo.
Come funziona
Un piccolo motore di corpi rigidi
Ogni barattolo è un rettangolo con massa e inerzia, la palla un cerchio, mensola, banco e pavimento corpi fermi. A ogni passo di 1/120 di secondo la gravità tira, poi si cercano i contatti: fra due rettangoli si prende la faccia che si sovrappone meno, si taglia lo spigolo dell'altro contro i suoi lati e restano fino a due punti; per la palla il punto del rettangolo più vicino al suo centro. Ogni contatto ha una chiave fatta degli spigoli da cui viene.
Impulsi che si ricordano
Dodici giri su tutti i contatti: un impulso lungo la normale che non tira mai (solo spinge) e uno lungo la superficie limitato dall'attrito, con una piccola spinta in più che toglie la sovrapposizione. Gli impulsi del passo prima ripartono dalla stessa chiave, ed è questo che tiene ferma la piramide. Un urto forte rimbalza (BOUNCE), la palla di stoffa quasi no; quello che resta fermo mezzo secondo si addormenta, e si risveglia quando qualcosa in moto lo tocca o quando gli manca il sostegno.
Il barattolo, un cilindro vero
L'etichetta è dipinta una volta su un canvas lungo due giri e poi avvolta in 24 strisce: ogni striscia prende il pezzo di etichetta all'angolo asin(x / raggio), così ai lati il disegno si stringe come su una latta vera, e scende di un poco col coseno per seguire la curva del bordo vista dall'alto. Lato in luce, lato in ombra e il riflesso netto si calcolano dalla normale di ogni punto contro la luce, con l'angolo del barattolo in quel momento; il coperchio compare dalla parte che guarda in su.
La fionda e la strada della palla
Tirando, la tasca segue il dito, limitata a PULL pixel, mai giù fra le palle che aspettano né fuori dalla scena; la palla parte con una velocità di POWER per ogni pixel tirato. I trattini sono la stessa integrazione della fisica, passo per passo, quindi la palla fa proprio quella strada finché non tocca qualcosa. Throw e i tasti cercano l'angolo che porta la palla sul barattolo scelto, provando un quarto di grado alla volta.
Il biglietto, la tastiera e l'anteprima
Mensola vuota: il biglietto sale con elastic.out, le stelle girano, il prezzo si allarga con l'asse wdth di Anybody e stelline di carta cadono con gravità e attrito d'aria. Con la scena in primo piano le frecce mirano e dosano la forza, Invio tira. Un clic da script (l'anteprima della libreria) fa due tiri sempre uguali, perché i passi della fisica sono fissi e il risultato è lo stesso a ogni giro: la piramide cade, esce il biglietto, poi tutto torna a posto.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BALLS | script.js | 3 | Quante palle per partita, da una a quattro. |
GRAVITY | script.js | 1500 | Quanto forte cade tutto, in pixel al secondo al quadrato. |
POWER | script.js | 14.2 | Quanto veloce parte la palla per ogni pixel di elastico tirato. |
PULL | script.js | 66 | Quanto si può tirare indietro l'elastico, in pixel. |
BOUNCE | script.js | 0.3 | Quanto rimbalzano i barattoli fra loro, sulla mensola e per terra: 0 per niente. |
GRIP | script.js | 0.42 | Quanto i barattoli fanno presa su quello che toccano mentre scivolano. |
HEAVY | script.js | 5 | Quante volte la palla di stoffa pesa più di un barattolo. |
AIM | script.js | 5 | Di quanti pixel Throw può sbagliare il barattolo a cui mira. |
TINS | script.js | [['#d8333b', '#f8ecd4', 'stripes'], …] | La pittura dei sei barattoli, dalla fila in basso in su: il colore, il secondo colore e il disegno (stripes, zigzag, stars, diamonds, bands, waves). |
Quando usarla
Per la promozione di un negozio online, la pagina di una fiera o di una sagra, il popup che regala uno sconto, una newsletter con un premio, il sito di un locale che fa giocare i clienti: ovunque un codice sconto si possa vincere giocando invece che riceverlo e basta.
Sul telefono
La scena è larga al massimo 340 pixel e si stringe con lo schermo, ma la fisica lavora sempre nelle sue misure (340 per 320), quindi tira e cade uguale. Il dito afferra la scena e tira la fionda senza far scorrere la pagina (touch-action none), e la palla non esce mai dai bordi.
Con il movimento ridotto
Niente volo né caduta da guardare: il tiro si calcola tutto in un colpo e la scena sfuma da com'era a come finisce; la palla nuova compare nella fionda con una dissolvenza, il biglietto appare senza salti e la piramide torna a posto sfumando. La fionda si tira ancora a mano, coi trattini.
Trappole
- Senza ricordare gli impulsi del passo prima la piramide trema e si affloscia da sola: ogni contatto ha una chiave fatta degli spigoli da cui viene, e riparte dall'impulso che aveva.
- La piramide ferma deve restare ferma per sempre: i barattoli dormono finché qualcosa in moto non li tocca, ma un barattolo che dorme sopra uno che è volato via deve svegliarsi, altrimenti resta sospeso in aria.
- Una palla di stoffa che rotola su un barattolo coricato non si ferma mai e tiene svegli tutti quelli che tocca: a contatto con qualcosa perde subito rotazione e velocità, come un sacchetto di fagioli.
- Con lo stesso rimbalzo dei barattoli la palla tornava indietro dalla base della piramide come una pallina di gomma: fra due corpi in moto vale il rimbalzo più basso.
- Per l'anteprima i due tiri devono finire sempre allo stesso modo: la fisica fa passi fissi di 1/120 di secondo, qualunque sia la velocità dello schermo, e i giri a caso (la rotazione dell'etichetta, il tremolio) non toccano la fisica.
- Tirata a fondo verso il basso la palla finiva fra quelle per terra e fuori dal bordo sinistro: la tasca ha un limite in basso e uno a sinistra, e la mira di Throw scarta gli angoli che li supererebbero.
Librerie
GSAP 3.15.0, Anybody (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 21 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 17 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.
