Il rullo delle ore
Selettori, 3D, Fisica
NuovaGratis
Tutti i componenti
Il dado del gelato
Il gioco di una gelateria: un dado di resina rossa trasparente in un vassoio di noce foderato di feltro color pistacchio. Si prende col dito e si lancia, oppure lo lancia Roll, e da lì è un corpo rigido vero: rimbalza sul feltro e sulle sponde, rotola, si ferma su una faccia e la faccia in alto sceglie il gusto. La luce da dietro accende la resina, attraverso si vedono i punti delle facce lontane, l'ombra porta dentro una macchia di luce rossa, e il sei fa piovere le codette nel vassoio.
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 gelato die</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the gelato die: a translucent resin die in a felt tray, thrown by hand or by Roll. It is a rigid body that
tumbles, knocks the walls and settles on a face; the face up picks the scoop. The tray comes first: above it
there is room for the die to fly -->
<section class="game" aria-labelledby="game-title" data-game data-autoclic>
<div class="tray" role="img" aria-label="A cherry-red die in a felt tray" data-tray>
<div class="tray__world" data-world>
<div class="tray__felt"><canvas class="tray__shadow" data-shadow></canvas></div>
<div class="tray__side tray__side--back"></div>
<div class="tray__side tray__side--left"></div>
<div class="tray__side tray__side--right"></div>
<div class="tray__rim"></div>
<div class="tray__side tray__side--front"></div>
<div class="die" data-die></div>
</div>
<canvas class="tray__air" aria-hidden="true" data-air></canvas>
</div>
<header class="game__head">
<h2 class="game__title" id="game-title">Roll for your scoop</h2>
<p class="game__rule">Every face is half price today. Six is on us.</p>
</header>
<ul class="menu" aria-label="What each face gives" data-menu></ul>
<button class="roll" type="button" data-roll><span class="roll__label" data-roll-label>Roll the die</span></button>
<div class="result is-hint" aria-live="polite" data-result>
<p class="result__big" data-big>Pick up the die and throw it</p>
<p class="result__small" data-small></p>
</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.
46 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 dado del gelato» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, in alto, un vassoio di noce visto un po' dall'alto, foderato di feltro verde pistacchio, e dentro un dado da casinò di resina rossa trasparente con i punti bianchi; sotto Roll for your scoop, la regola (Every face is half price today. Six is on us.), i sei gusti su due colonne, ognuno con la faccia del dado disegnata accanto (Lemon sorbet, Strawberry, Hazelnut, Pistachio, Dark chocolate, e Free scoop per il sei), il pulsante Roll the die e una riga che spiega. All'apertura il dado cade nel vassoio girando e si assesta. Premendo sul vassoio, col dito o col mouse, il dado salta in mano e si alza sopra il feltro: segue la mano girandosi un poco fra le dita, e la sua ombra, lontana e sfocata, dice quanto è in alto. Lasciandolo con un colpo, parte con la velocità della mano, un po' verso l'alto e rotolando nel verso in cui va; Roll fa lo stesso con una mano finta che lo porta sul davanti del vassoio e lo lancia verso il fondo. In volo il dado gira davvero: tocca il feltro con uno spigolo e rimbalza, sbatte contro le sponde, rotola di faccia in faccia sempre più piano, dondola e si ferma. Ogni faccia, girando, si accende quando manda la luce verso di noi, quelle viste di taglio sono più rosse, e attraverso la resina si vedono, smorzati, i punti delle facce di dietro. Sul feltro l'ombra cambia forma con il dado, più nitida quando tocca terra, e dentro ha una macchia rossa, la luce passata attraverso la resina. Fermo il dado, il gusto della faccia in alto si accende nella lista con una pallina del suo colore che si allarga dietro al nome con un rimbalzo, sotto compaiono il nome e Half price today, e il pulsante diventa Roll again. Col sei una manciata di codette nei colori dei gusti piove nel vassoio, girando in aria, e resta sparsa sul feltro finché il dado non viene ripreso. Un dado posato invece che lanciato non vale: That was a drop.
Come funziona
Il vassoio e il dado in CSS 3D
Il fondo del vassoio è un div inclinato all'indietro di 46 gradi con rotateX, in un contenitore con la prospettiva; le sponde sono div girati di 90 gradi sui bordi e il bordo di sopra è una cornice alzata con translateZ. Il dado sta sul fondo: sei facce attorno al centro (translateZ di mezzo lato, girate con rotateX e rotateY) e su di lui una sola matrix3d, scritta a ogni fotogramma dalla posizione e dal quaternione della fisica. Così il vassoio, il feltro e il dado sono nello stesso spazio, e il browser li mette in ordine di profondità.
Il corpo rigido
Il dado ha una posizione, una velocità, un orientamento (quaternione) e una rotazione; la sua inerzia è la stessa attorno a ogni asse, quella di un cubo (massa per lato al quadrato diviso sei). A ogni passo di 1/240 di secondo la gravità lo tira giù, poi si cercano gli otto spigoli che toccano il feltro o una sponda: per ognuno un impulso lungo la normale, col rimbalzo di BOUNCE solo se l'urto è forte, e un impulso d'attrito contro lo scivolamento, mai più di GRIP volte la spinta. Gli impulsi si risolvono otto volte di fila e si accumulano, così quattro spigoli appoggiati si dividono il peso e il dado sta fermo senza tremare.
Fermarsi e leggere la faccia
Quando il dado tocca qualcosa e resta quasi fermo per un quinto di secondo, è fermo: la faccia in alto è quella con la normale più verticale. Se pende contro una sponda riceve una spinta e riparte; se è piatto viene squadrato di quel grado che manca, si spegne il ciclo e si legge il gusto. Dopo otto secondi si ferma comunque.
La mano e Roll
Premuto il vassoio, il punto sotto il dito si trova tirando un raggio dall'occhio attraverso il puntatore fino al piano alto HOLD sopra il feltro (la stessa prospettiva del CSS, risolta al contrario). Il dado lo segue su una molla corta e gira fra le dita. Lasciato, prende la velocità della mano nell'ultimo decimo di secondo (nessuna, se la mano si era fermata), un po' di slancio in alto e una rotazione nel verso del lancio; sotto FLICK pixel al secondo è un dado posato e non vale. Roll è una mano finta: un tween porta il dado sul davanti e lo lancia in arco verso la metà di fondo con THROW e SPIN, un po' diversi ogni volta.
La resina e la luce
La luce viene da dietro e dall'alto. A ogni fotogramma, per ogni faccia, dalla sua normale: la trasparenza cresce di taglio (--a, la resina sembra più spessa e più rossa), il bagliore della luce che attraversa il dado verso l'occhio (--glow), il riflesso della luce verso l'occhio (--shine, con la mezza via fra luce e occhio) e i punti delle facce lontane smorzati (--far). L'ombra è un canvas steso sul feltro: l'inviluppo convesso degli otto spigoli proiettati lungo la luce, sfocato col trucco di shadowBlur, più un'impronta scura sotto il dado quando tocca terra e, dentro l'ombra, una macchia del colore della resina.
Le codette e l'anteprima
Col JACKPOT cadono SPRINKLES codette: bastoncini che girano in aria, frenati dall'aria, disegnati su un canvas sopra il vassoio con la stessa prospettiva; toccato il feltro rimbalzano una volta e passano sul canvas del feltro, sotto l'ombra del dado, finché il dado non viene ripreso. Un clic da script (l'anteprima della libreria) preme Roll, quando il dado è fermo da un po'.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FLAVOURS | script.js | [['Lemon sorbet', '#f3d75c', '#3a2c07', 'Half price today'], …] | Che cosa dà ogni faccia, da uno a sei: il nome, il colore della sua pallina, il colore del nome sulla pallina e la riga sotto. |
GRAVITY | script.js | 2100 | Quanto in fretta cade il dado, in pixel al secondo al quadrato. |
BOUNCE | script.js | [0.45, 0.45] | Quanto rimbalza il dado sul feltro e sulle sponde di legno. |
GRIP | script.js | 0.45 | Quanto il feltro trattiene il dado che scivola e gira. |
THROW | script.js | [520, 320] | Come lancia Roll: la velocità in avanti e in alto, in pixel al secondo (un po' di più o di meno ogni volta). |
SPIN | script.js | 22 | Quanto in fretta rotola il dado quando lascia la mano di Roll, in radianti al secondo. |
JACKPOT | script.js | 6 | La faccia che fa anche piovere le codette nel vassoio. |
SPRINKLES | script.js | 60 | Quante codette cadono. |
FLICK | script.js | 320 | Quanto in fretta deve lasciare la mano un lancio fatto col dito per valere, in pixel al secondo. |
Quando usarla
Per il sito o l'app di una gelateria, di un bar o di un negozio che regala qualcosa a caso: il gusto del giorno, lo sconto della settimana, il premio di una tessera fedeltà, il gioco di una newsletter, ovunque un'estrazione deve sembrare un dado vero lanciato sul tavolo.
Sul telefono
Tutto sta in una colonna larga al massimo 340 pixel, e il vassoio è un po' più stretto perché in prospettiva il bordo davanti si allarga. Il dito prende il dado premendo dove vuole sul vassoio e lo lancia senza far scorrere la pagina (touch-action none solo sul vassoio); un tocco breve lancia come Roll.
Con il movimento ridotto
Niente lanci né voli: Roll, o un tocco sul vassoio, spegne le facce del dado con una dissolvenza e le riaccende con il dado già fermo su una faccia a caso, poi il gusto si accende senza rimbalzo. Niente caduta all'apertura e niente codette.
Trappole
- Con i contatti solo per gli spigoli già entrati nel feltro, il dado fermo cadeva di un pelo a un passo e veniva rimesso su al passo dopo: la sua velocità non scendeva mai sotto la soglia e non si fermava. Il contatto ora prende anche gli spigoli a un pelo dal feltro e li lascia scendere solo di quel pelo.
- Un dado appoggiato di sbieco contro una sponda tocca il feltro con due spigoli: se per dire «fermo» si contano solo gli spigoli sul feltro, non si ferma mai. Conta ogni contatto, e un dado che non è piatto riceve una spinta.
- Il dado segue la mano su una molla, e la velocità della molla quando si lascia è molto più bassa di quella della mano: il lancio prende la velocità della mano nell'ultimo decimo di secondo, e una mano ferma prima di lasciare non lancia.
- L'opacità su un elemento con transform-style preserve-3d lo appiattisce: per la dissolvenza del movimento ridotto si spengono le facce una per una, mai il dado.
- Con la resina trasparente i punti della faccia in alto si mescolavano a quelli della faccia sotto, visti attraverso: i punti delle facce lontane sono smorzati quanto più guardano via, e il vassoio è inclinato di 46 gradi invece di 52, così la faccia in alto si legge.
- Lanciato in arco il dado sale ben sopra il vassoio: il vassoio sta in cima al componente con lo spazio sopra, e i testi stanno sotto, dove il dado non arriva mai a coprirli.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 15 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 21 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.
