Attrezzi che cadono
Fisica, Hover
NuovaGratis
Torna alla libreria
La bancarella della frutta
L’intestazione di un fruttivendolo inventato, nello stile ricco: sotto un tendone a strisce rosso e crema la frutta cade nelle cassette di legno con la fisica vera, mele, pere, arance, limoni, ciliegie a coppie e un’anguria, rotola e si ammucchia; col puntatore o il dito si spinge, si prende, si lancia e si porta sulla bilancia d’ottone, la cui lancetta oscilla e si posa sul peso.
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 fruit stall</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/caveat@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stall" data-stall>
<!-- the header of a made-up greengrocer, Pippin Market: a striped awning with a scalloped fringe, wooden crates on
a counter, chalk prices on little slates and a brass grocer's scale. The fruit falls from under the awning into
the crates with real physics; push it with the pointer, grab it and throw it, or carry it onto the scale -->
<canvas class="stall__canvas" data-canvas aria-label="A fruit stall: apples, oranges, lemons, pears, cherries and a watermelon in wooden crates, with a brass scale. Drag the fruit to move it, put it on the scale to weigh it." role="img"></canvas>
<header class="stall__bar">
<span class="stall__brand">Pippin Market</span>
<span class="stall__hours">Open daily, seven to two</span>
</header>
<section class="stall__copy">
<h1 class="stall__title">Picked this <br><em>morning.</em></h1>
<p class="stall__lede">Boxes of seasonal fruit from the stall, at your door by noon.</p>
<a class="stall__button" href="#order"><span>Order a box</span></a>
</section>
<p class="stall__hint" data-hint>Drag the fruit onto the scale</p>
<p class="sr-only" aria-live="polite" data-weight-text></p>
<ul class="sr-only">
<li>Apples, 2.40 a kilo</li>
<li>Oranges, 1.90 a kilo</li>
<li>Pears and lemons, 3 for 1</li>
</ul>
</main>
<script src="https://cdn.jsdelivr.net/npm/matter-js@0.20.0/build/matter.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.
31 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 bancarella della frutta» da Animorio e adattala al mio sitoCosa fa
Sotto il tendone a strisce rosse e crema di Pippin Market, con la frangia a festoni che ondeggia appena, tre cassette di legno aspettano sul banco, ognuna con la sua lavagnetta appesa allo spago e il prezzo scritto col gesso; a lato una bilancia d’ottone col quadrante. Dall’alto, da sotto il tendone, la frutta cade nelle cassette uno pezzo alla volta: mele rosse e verdi col picciolo e la foglia, pere col collo lungo, arance con la buccia a pori e il calice, limoni a punta, ciliegie in coppia attaccate allo stesso picciolo, e per ultima un’anguria a strisce che si posa sopra il mucchio. Rotolano, rimbalzano e si ammucchiano; le assi davanti alle cassette ne coprono una parte, e dalla fessura in mezzo si vede la frutta dentro. Passando col puntatore la frutta viene spinta; tenendola premuta si prende, si porta in giro e si lancia, e ricade dove capita. Portata sul piatto della bilancia, la lancetta rossa oscilla e si posa sul peso. Lasciata sola, la bancarella fa da sé: ogni tanto un frutto salta in aria o va sulla bilancia, e quando il piatto è pieno torna nella sua cassetta.
Come funziona
Un canvas, due strati
Il muro, i pali, il banco, l’interno delle cassette e la colonna della bilancia cambiano solo quando cambia la misura: si disegnano una volta su un canvas nascosto e a ogni fotogramma si copiano con drawImage. Sopra, nell’ordine: il fondo del piatto, la frutta, le assi davanti alle cassette con le lavagnette, il bordo del piatto col quadrante e per ultimo il tendone, così la frutta che cade spunta da sotto la frangia.
La fisica: cerchi e un vincolo
Ogni frutto è un cerchio di Matter.js; le ciliegie sono due cerchi legati da un vincolo morbido, così pendono e si girano come una coppia vera. Le cassette sono tre pareti ferme ciascuna (fondo e due lati), il piatto della bilancia un ripiano fermo con due bordi. La fisica va a passo fisso, un sessantesimo di secondo, con un accumulatore: con passi variabili Matter diventa instabile.
Il disegno gira col corpo, la luce no
Ogni frutto si disegna nel sistema del suo corpo (posizione e angolo), quindi picciolo, foglia, calice, strisce e pori girano con lui e restano attaccati. La sfumatura che fa il volume invece è calcolata nel sistema dello schermo, con il punto di luce sempre in alto a sinistra: un frutto che rotola cambia faccia ma non luce. Per le ciliegie il punto dove i piccioli si uniscono si calcola a ogni fotogramma sopra il mezzo della coppia, e la foglia nasce da lì.
Prendere, spingere, lanciare
Premendo su un frutto si crea un vincolo elastico fra il punto preso e il puntatore: il frutto segue il dito con un po’ di ritardo e, lasciato, tiene la velocità che aveva, quindi si lancia. Passando in mezzo alla frutta senza premere, ogni frutto vicino riceve una piccola forza nel verso del puntatore, più forte quanto più è vicino.
La bilancia
A ogni fotogramma si sommano i grammi dei frutti fermi sopra il piatto (una mela 180, un’arancia 200, un limone 110, una ciliegia 8). La lancetta è una molla: la velocità prende una parte della distanza dal peso e perde un po’ a ogni passo, così oscilla e si posa. Il piatto scende di qualche pixel col peso.
Il pilota automatico
Se nessuno tocca per sei secondi, ogni PACE secondi la bancarella fa un gesto: un frutto salta in aria, oppure il frutto più in alto viene portato sulla bilancia lungo una curva, tirato da un vincolo che si muove; con tre frutti sul piatto uno torna nella sua cassetta. Il caso ha un seme fisso, quindi ogni giro è uguale.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
GRAVITY | script.js | 1.15 | La gravità: più alta, la frutta cade e si posa più in fretta. |
BOUNCE | script.js | 0.32 | Quanto rimbalza la frutta. |
FRUIT | script.js | 36 | Quanti frutti sul computer; sul telefono meno della metà. |
DROP | script.js | 70 | Millisecondi fra un frutto e l’altro quando cadono. |
PUSH | script.js | 1 | Quanto il puntatore spinge la frutta passandoci in mezzo (0 niente). |
PACE | script.js | 3.2 | Secondi fra un gesto e l’altro del pilota automatico. |
SCALE_MAX | script.js | 2 | I chili del fondo scala della bilancia. |
--awning, --wood, --brass… | style.css | rosso, legno, ottone | I colori in :root: il canvas li rilegge a ogni cambio di misura. |
Quando usarla
Per l’intestazione di un fruttivendolo, un mercato contadino, un negozio di frutta e verdura online o un servizio di cassette a domicilio. È un gioco: i prezzi veri vanno anche in testo normale.
Sul telefono
Stessa fisica e stesso disegno, misure adattate: la scritta sta in alto su tutta la larghezza, le cassette e la bilancia sotto, e la frutta è meno della metà. Col dito si prende e si lancia; il canvas ha touch-action none.
Con il movimento ridotto
Niente cadute né rimbalzi: la frutta è già nelle cassette, ferma (la fisica gira una volta sola prima del primo disegno), con due ciliegie sul piatto e la lancetta già sul peso.
Trappole
- Il disegno di un frutto deve girare con il suo corpo, la sfumatura della luce no: se si ruota tutto, la luce gira col frutto e sembra un pallone che rotola.
- Le ciliegie sono due corpi: il punto dove si uniscono i piccioli va ricalcolato a ogni fotogramma dalle due posizioni, se no i piccioli si staccano.
- Fisica a passo fisso: Engine.update con il tempo vero del fotogramma fa tremare i mucchi.
- Al cambio di misura la frutta va scalata (Body.scale) e rimessa in proporzione sopra il banco, se no resta fuori dalle cassette nuove.
- Il fondo si ridisegna solo al resize: ridisegnare legno e mattoni a ogni fotogramma costa tanto sul telefono.
Librerie
Matter.js 0.20.0, Fraunces (font variabile) 5.3.0, Caveat (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 14 KB; le librerie: Matter.js 25 KB.
Collaudo
Provata il 22 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.
