Attrezzi che cadono
Fisica, Hover
NuovaGratis
Torna alla libreria
Il vassoio di chicchi
Il vassoio di raffreddamento di una piccola torrefazione, pieno di chicchi appena tostati: il puntatore ci passa dentro come una mano, apre un solco, i chicchi davanti volano via, urtano i vicini, saltano, si girano sull’altro lato e si assestano, e nel solco compare il timbro della torrefazione. Un pulsante scuote il vassoio e i chicchi tornano a riempire i buchi, come sabbia.
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>Coffee bean tray</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/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the cooling tray of the roastery: a wooden frame, a burlap floor with the stamp, the beans on a canvas -->
<div class="tray" data-tray>
<div class="tray__frame" data-frame>
<div class="tray__bed">
<div class="tray__floor" aria-hidden="true">
<div class="stamp" data-stamp>
<div class="stamp__in">
<svg class="stamp__seal" viewBox="0 0 200 200">
<defs>
<path id="seal-ring" d="M100 100 m-74 0 a74 74 0 1 1 148 0 a74 74 0 1 1 -148 0"></path>
</defs>
<circle cx="100" cy="100" r="94" fill="none" stroke="currentColor" stroke-width="6"></circle>
<circle cx="100" cy="100" r="56" fill="none" stroke="currentColor" stroke-width="3"></circle>
<text class="stamp__ring"><textPath href="#seal-ring" startOffset="0" textLength="458" lengthAdjust="spacing">Small batch · Roasted at dawn ·</textPath></text>
<!-- the low flame -->
<path d="M100 66c4 12 18 20 18 38a18 18 0 0 1-36 0c0-10 6-15 9-22 2 7 5 10 8 11-2-9-1-18 1-27z" fill="currentColor"></path>
<path d="M78 136h44" stroke="currentColor" stroke-width="5" stroke-linecap="round"></path>
</svg>
<div class="stamp__words">
<p class="stamp__name">Low Fire</p>
<p class="stamp__line">Roasters of Huila beans</p>
</div>
</div>
</div>
</div>
<canvas class="tray__beans" data-beans aria-hidden="true"></canvas>
<div class="tray__lip" aria-hidden="true"></div>
</div>
</div>
</div>
<div class="light" aria-hidden="true"></div>
<!-- the paper tag lying on the corner of the tray -->
<article class="tag" data-tag>
<div class="tag__card">
<span class="tag__hole" aria-hidden="true"></span>
<p class="tag__kicker">Low Fire Roasters</p>
<h1 class="tag__title">Roasted at dawn</h1>
<p class="tag__line">Pink bourbon from Huila, Colombia. Washed, light roast: panela, red apple, black tea.</p>
<dl class="tag__facts">
<div><dt>Roasted</dt><dd>06:40</dd></div>
<div><dt>Batch</dt><dd>12 kg</dd></div>
</dl>
<button class="pill" type="button" data-shake>
<span class="pill__text" data-text="Shake the tray">Shake the tray</span>
</button>
</div>
</article>
<p class="hint" data-hint><span>Run your hand through the beans</span></p>
</main>
<svg class="defs" aria-hidden="true" width="0" height="0">
<!-- the stamp ink: rough edges and the gaps where the burlap did not take it -->
<filter id="ink" x="-5%" y="-5%" width="110%" height="110%">
<feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" seed="7" result="grain"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="grain" scale="3" xChannelSelector="R" yChannelSelector="G" result="rough"></feDisplacementMap>
<feColorMatrix in="grain" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 1.75" result="holes"></feColorMatrix>
<feComposite in="rough" in2="holes" operator="in"></feComposite>
</filter>
</svg>
<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.
34 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 vassoio di chicchi» da Animorio e adattala al mio sitoCosa fa
Il bancone di pietra scura di Low Fire Roasters, una torrefazione inventata, e sopra il vassoio di legno dove i chicchi si raffreddano dopo la tostatura: il fondo è di juta, con stampato il timbro della casa (un sigillo con la fiamma bassa e il nome a grandi lettere), e sopra c’è uno strato fitto di chicchi, ognuno col suo taglio a S e la pellicina argentata, o col dorso lucido, in quattro tostature. All’arrivo il vassoio sale, il timbro si imprime sulla juta e i chicchi ci piovono sopra da una paletta che passa da sinistra a destra: cadono dall’alto, rimbalzano e lo coprono tutto; poi arriva il cartellino di carta con un elastico. Passando col puntatore la mano apre un solco: i chicchi davanti volano via e spingono quelli dietro, che si ammucchiano ai lati; i più colpiti saltano, passano sopra gli altri, si girano in aria e ricadono sull’altro lato, e qualche pellicina vola via. Nel solco si legge un pezzo del timbro. Tenendo premuto la mano si allarga. Il pulsante del cartellino scuote il vassoio: la cornice trema, i chicchi saltellano e scivolano dai mucchi verso i buchi finché il timbro è di nuovo coperto.
Come funziona
Ogni chicco è un cerchio
Per la fisica un chicco è un cerchio sul fondo, più piccolo del suo disegno: così i disegni si sovrappongono e lo strato sembra un mucchio. Ogni chicco ha posizione, velocità, rotazione, altezza e il lato su cui è appoggiato. A ogni passo scivola, l’attrito lo frena (FRICTION) e si ferma presto, come un chicco vero sulla juta.
Gli urti
Una griglia trova i vicini di ogni chicco. Due chicchi che si sovrappongono vengono allontanati e, se si stanno avvicinando, si scambiano la velocità lungo la linea che li unisce con un rimbalzo smorzato; lo strofinio li fa girare. Un urto forte fa saltare quello che era fermo: così la spinta passa di chicco in chicco e i mucchi ai lati del solco si formano da soli.
La mano
Il puntatore è un cerchio (HAND) che a ogni fotogramma va da dove era a dove è, diviso in più passi quando corre: un chicco dentro quel tratto viene spinto fuori e prende la velocità della mano, un po’ di più (PUSH), così vola davanti. Tenendo premuto il cerchio si allarga con un rimbalzo.
Il salto e il giro
Un chicco colpito forte salta (HOP): ha un’altezza che la gravità riporta giù, passa sopra gli altri senza urtarli, diventa un po’ più grande e la sua ombra si allontana. In aria gira intorno al suo lato lungo: il disegno si schiaccia, a metà giro cambia lato (dal taglio al dorso) e a terra si appoggia piano sul lato più vicino.
Lo scossone
Il pulsante fa salire e scendere un valore con una timeline di GSAP: la cornice trema, i chicchi sentono il vassoio che si muove sotto di loro e saltellano. Una griglia larga conta quanto è pieno ogni pezzo del vassoio e spinge i chicchi dai pezzi più pieni ai più vuoti, così i buchi si richiudono come nella sabbia.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BEAN_SIZE | script.js | 1 | Quanto sono grandi i chicchi: più grandi, meno chicchi. |
FILL | script.js | 0.7 | Quanto è fitto lo strato: 0,8 è pieno zeppo, 0,4 lascia vedere la juta. |
HAND | script.js | 1 | Quanto è largo il solco che apre il puntatore. |
PUSH | script.js | 1 | Quanto forte volano via i chicchi colpiti dalla mano. |
FRICTION | script.js | 1 | Quanto in fretta i chicchi si fermano: 0,4 li fa scivolare come sul ghiaccio. |
HOP | script.js | 1 | Quanto saltano i chicchi e quanto spesso si girano sull’altro lato (0 = mai). |
SHAKE_TIME | script.js | 1.8 | Quanti secondi dura lo scossone del vassoio. |
--stamp | style.css | #8f2f1d | Il colore del timbro sulla juta (i chicchi vanno da --bean-light a --bean-dark, il taglio è --crease, la pellicina --chaff). |
Quando usarla
Per la prima pagina di una torrefazione, di un bar o di un negozio di caffè, di una drogheria o di un mulino: una cosa da toccare che dà subito l’idea del prodotto, e un messaggio (il nome, un’offerta, la data di tostatura) nascosto sotto, da scoprire con la mano.
Sul telefono
Il vassoio riempie lo schermo e il cartellino sta in alto, più corto, col pulsante accanto al titolo. Si trascina il dito fra i chicchi: la fisica, i salti, i giri e lo scossone sono gli stessi, con chicchi più piccoli.
Con il movimento ridotto
Niente si muove: il vassoio è già pieno e i chicchi restano al loro posto. Dove passa il puntatore i chicchi si fanno trasparenti e lasciano vedere il timbro, poi tornano piano; il pulsante fa svanire i chicchi e li fa ricomparire mescolati.
Trappole
- Un puntatore veloce in un fotogramma salta oltre un chicco intero: la mano va trattata come un tratto da dove era a dove è, e il fotogramma va diviso in più passi quanto più il puntatore corre, altrimenti i chicchi restano dentro il solco.
- Se il cerchio dell’urto è grande quanto il disegno, i chicchi stanno uno accanto all’altro e fra loro si vede il fondo: il cerchio deve essere più piccolo del disegno, così si sovrappongono e lo strato copre tutto. Con lo strato troppo fitto, però, il solco non si apre, perché i chicchi non hanno dove andare.
- Un chicco in aria che urta quelli a terra si ferma di colpo e non salta mai sopra: gli urti si fanno solo fra chicchi alla stessa altezza.
- Nel canvas, con migliaia di chicchi, anche solo girare e ridimensionare la figura di ognuno a ogni fotogramma costa troppo (sui computer senza scheda grafica un fotogramma arrivava a 170 millesimi di secondo): le figure si disegnano una volta già girate, in 32 passi, per ogni tostatura e ogni lato, e i chicchi a terra si copiano così come sono; girano e si schiacciano solo quelli in aria. Così il fotogramma scende sotto i 10 millesimi.
- L’ombra disegnata dentro la figura del chicco gira con lui e finisce da ogni parte: va disegnata a parte, tonda (così non va mai girata) e spostata sempre verso il basso a destra, dalla parte opposta alla luce della finestra. Ogni chicco fa la sua ombra subito prima di essere disegnato, così quelli sopra ombreggiano quelli sotto.
- Mentre il vassoio trema la mano ferma si sposta rispetto ai chicchi: la sua posizione va ricalcolata a ogni fotogramma dalla posizione del puntatore e dallo spostamento della cornice, non solo quando arriva un evento.
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 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 13 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.
