Il vaso al sole
Card, 3D, Fisica, Hover, Transizioni
NuovaGratis
Tutti i componenti
La valutazione a fette di torta
Il voto a una pasticceria si dà con le fette di un fraisier: la torta sta su un’alzata di porcellana, vista un poco dall’alto, tagliata in cinque. Puntando una fetta, quella e le precedenti si sollevano e si sfilano appena, e nei tagli si vedono gli strati: pan di spagna, crema con le fragole, glassa rosa. Scelto il voto, una paletta scivola sotto quelle fette una alla volta, le solleva e le serve sul piatto accanto, al loro posto, con le briciole che cadono e un filo di crema lasciato sulla porcellana. Il voto è quanta torta finisce nel tuo piatto; un voto più basso ne riporta indietro qualche fetta.
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 cake slice rating</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/fraunces@5.3.0/full-italic.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- a rating given with the slices of a strawberry fraisier on a cake stand, seen from a little above. Pointing at
a slice raises it and the ones before it, a little out of the cake, and the cut sides show the layers: sponge,
cream, strawberries. Picked, a cake server slides under those slices one by one and serves them on the plate
next to the stand, with crumbs and a streak of cream; a lower rating takes some back. Under the cake there are
five real radio buttons; cake, stand, plate and server are drawn by the script, in 3D, on a canvas -->
<form class="cake" data-cake onsubmit="return false">
<p class="cake__ask" id="cake-ask">How was your slice of fraisier?</p>
<fieldset class="cake__row" aria-labelledby="cake-ask" data-row data-autoclic>
<canvas class="cake__art" aria-hidden="true" data-art></canvas>
<div class="cake__choices" data-choices></div>
</fieldset>
<p class="cake__word" aria-hidden="true"><span data-word>Choose a slice</span></p>
<p class="cake__thanks" role="status" aria-live="polite" data-thanks></p>
</form>
</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.
37 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 valutazione a fette di torta» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco la domanda How was your slice of fraisier?, in un carattere con le grazie morbide; sotto, a sinistra, un fraisier su un’alzata di porcellana bianca col filo d’oro, visto un poco dall’alto: fianchi con le fasce di pan di spagna dorato e di crema, le mezze fragole in piedi tutto intorno col taglio in fuori, il cerchio di glassa rosa tagliato in cinque spicchi, su ognuno un ciuffo di crema e una fragola intera. A destra un piatto vuoto col bordo d’oro, davanti sul tavolo una paletta d’acciaio dal manico di noce. Più sotto, in corsivo grigio, Choose a slice. Passando sopra la torta, la fetta indicata e quelle prima si sollevano una dopo l’altra e si sfilano un poco verso l’esterno, su una molla che le fa assestare con un piccolo rimbalzo; nei tagli che si aprono si vedono gli strati: pan di spagna coi suoi buchi, crema con le fragole tagliate, il secondo disco, la glassa. Sotto si legge la parola del voto, Not my taste, Pleasant, Lovely, Delicious o Heavenly, in corsivo, più piena e morbida quanto più alto è il voto. Scegliendo, le fette scendono e la paletta si alza dal tavolo: gira intorno alla torta, scivola sotto la prima fetta del voto (qualche briciola cade sull’alzata), la solleva, la porta sopra il piatto e la posa nello stesso posto che aveva nella torta; poi si sfila e lascia sulla porcellana un filo di crema che si curva. Così per ogni fetta, sempre più svelta quante più sono le fette da servire, poi la paletta torna a posarsi sul tavolo. Nel piatto la torta si ricompone a poco a poco: il voto si legge come la parte di torta servita, e con Heavenly l’alzata resta vuota. Sotto compare Thank you. We’ll tell the pastry chef., e a ogni cambio di idea Changed to seguito dal voto nuovo: un voto più alto serve le fette che mancano, uno più basso ne riporta sull’alzata, dall’ultima. Col dito si gira intorno alla torta e il voto cade dove il dito si alza; con la tastiera le frecce sollevano subito le fette e scelgono dopo una breve pausa, Invio sceglie subito.
Come funziona
Un piccolo pittore 3D su un canvas
Il mondo ha x a destra, y in su e z verso chi guarda; la camera guarda dall’alto con un angolo il cui seno è 0,42, senza prospettiva: un punto va sulla pagina in (x, −y·cos + z·sin) e la sua vicinanza è y·sin + z·cos. Ogni fetta è un cuneo pieno: fianco tondo a pezzi, i due tagli e il piano di sopra. Un cuneo è convesso, quindi per disegnarlo bene basta tenere le facce rivolte alla camera (normale per direzione della camera maggiore di zero); fra un oggetto e l’altro si dipinge dal più lontano al più vicino, col baricentro di ogni fetta. Ogni faccia è illuminata dalla sua normale (Lambert, mai nera) e passata anche col suo stesso colore come contorno, così fra due facce non si vede mai il bianco della pagina.
Gli strati e le fragole dove la torta è tagliata
Fianco e tagli sono divisi negli stessi strati (BANDS): pan di spagna, crema, pan di spagna, crema, glassa; il pan di spagna è più scuro fuori, dove è cotto, e più chiaro nel taglio. Le fragole e i buchi del pan di spagna nascono una volta per ogni linea di taglio, con un caso ripetibile, e le due fette che la condividono li disegnano uguali, ognuna dalla sua parte. Sul fianco le mezze fragole sono disegnate sul cilindro vero (l’angolo cresce di u/R), così si accorciano girando. Un taglio non si disegna finché la fetta vicina gli sta attaccata: si confronta dove le due fette mettono lo stesso punto del taglio.
Fette su molle
Ogni fetta ha quattro molle smorzate: quanto è sollevata (LIFT), quanto è sfilata in fuori, quanto è inclinata e quanto dondola, con la rigidezza e lo smorzamento di SPRING. Le fette indicate partono una dopo l’altra (STAGGER) dalla prima, e scendono dall’ultima. Mentre la paletta porta una fetta, si misura l’accelerazione del suo centro sul ticker di GSAP e la si dà come spinta a inclinazione e dondolio: la fetta oscilla perché la paletta parte e frena, non perché glielo dice la timeline. Il passo è 1/240 di secondo, col fotogramma limitato a 1/30, e quando tutto è fermo il ticker si toglie.
La paletta che serve
Per ogni fetta si calcola da dove entra la paletta: dal fianco tondo, girata fino a 30 gradi verso il davanti o il dietro (così il manico non esce mai dal disegno), con la lama sotto il centro della fetta e il tallone sul bordo, e il punto in cui la punta è appena fuori. Una timeline di GSAP la porta lì con un arco, la fa scivolare sotto (briciole), solleva la fetta, la porta sul piatto con un arco, la posa (un piccolo rimbalzo, altre briciole) e la sfila curvando appena: dietro resta un filo di crema, un nastro disegnato sul piatto che si allunga con lei e si assottiglia ai capi. La lama si dipinge subito prima della fetta che ha sopra, il manico secondo la sua vicinanza.
Il voto come parte di torta servita
Le fette con l’indice minore del voto stanno nel piatto, le altre sull’alzata, ognuna nello stesso posto che ha nella torta. Finita una fetta, la paletta guarda cosa manca: prima le fette da servire, dalla prima; poi quelle da riportare, dall’ultima; poi torna sul tavolo. Così cambiare idea a metà non rompe niente: il voto nuovo vale dalla fetta dopo. Più fette ci sono da spostare, più la paletta è svelta (SERVE), e riportarle indietro è più rapido che servirle. Le briciole sono particelle con gravità che rimbalzano sul pavimento sotto di loro (alzata, piatto o tavolo), poi svaniscono.
Dito, tastiera, anteprima
Sopra il disegno ci sono cinque radio veri, trasparenti, in un fieldset legato alla domanda: le frecce sollevano le fette e scelgono dopo 0,6 secondi (un gsap.delayedCall), Invio e Spazio scelgono subito, e il fuoco da tastiera disegna un anello intorno a tutto il disegno. La fetta sotto il puntatore si trova dall’angolo intorno al centro più vicino fra alzata e piatto, sul piano a metà altezza della torta; col dito si gira intorno alla torta (touch-action: pan-y) e il voto cade dove il dito si alza. Un clic da script (detail 0, l’anteprima della libreria) fa un giro intero: passa su tutte le fette, serve Delicious, riporta indietro fino a Pleasant e rimette la torta intera sull’alzata.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABELS | script.js | ['Not my taste', 'Pleasant', 'Lovely', 'Delicious', 'Heavenly'] | La parola per ogni voto, dal più basso al più alto (e in quante fette è tagliata la torta: da 3 a 6). |
START | script.js | 0 | Le fette già nel piatto all’apertura della pagina (0 = torta intera sull’alzata). |
LIFT | script.js | 7 | Quanto si sollevano le fette indicate, in pixel (si sfilano in fuori una volta e mezza tanto). |
SPRING | script.js | [240, 0.46] | La molla delle fette: quanto è rigida e quanto è frenata (più bassa, più rimbalza). |
SERVE | script.js | 1 | Il passo della paletta: 1 è quello normale, 2 il doppio più svelto. |
CRUMBS | script.js | 8 | Quante briciole cadono quando la paletta posa una fetta (un po’ meno quando ci scivola sotto). |
STAGGER | script.js | 0.035 | Il tempo fra una fetta e la successiva quando si sollevano, in secondi. |
Quando usarla
Per chiedere com’era una torta nel sito di una pasticceria o di una caffetteria, per la recensione di un dolce ordinato a domicilio, per il voto a una ricetta in un blog di cucina, per il giudizio sul menu dei dolci di un ristorante: ovunque il voto parla di qualcosa da mangiare e le stelle sarebbero anonime.
Sul telefono
Il disegno si stringe con lo schermo, 358 pixel a 390, con la stessa torta, la stessa paletta e le stesse briciole. Col dito si gira intorno alla torta e le fette si sollevano sotto il dito; il voto cade dove il dito si alza. In su e in giù la pagina scorre ancora (touch-action: pan-y). Un tocco su una fetta sceglie subito e la paletta comincia a servire.
Con il movimento ridotto
Niente molle, niente briciole e niente paletta in volo: le fette indicate restano ferme, e scelto il voto ogni fetta sparisce dall’alzata in dissolvenza e ricompare già nel piatto, col suo filo di crema; la paletta resta sul tavolo. La parola e il ringraziamento cambiano in dissolvenza.
Trappole
- Con la paletta che entrava dritta dal centro, per le fette di sinistra e di destra il manico usciva dal disegno di quasi trenta pixel. Ora la paletta entra girata fino a 30 gradi verso il davanti o il dietro, e il punto di partenza è calcolato perché la punta sia appena fuori dalla fetta.
- Sull’alzata bassa la coppa nascondeva tutto il gambo: visto dall’alto, il bordo davanti del piatto scende più di quanto il gambo sia alto. L’alzata ora è alta 34 e larga 52, come un’alzata vera, e il gambo si vede.
- Le fette sollevate si sfilavano di poco più di tre pixel e nei tagli non si vedevano gli strati: ora si sfilano una volta e mezza quanto si alzano.
- Il filo di crema di una fetta servita dal davanti andava dritto verso chi guarda e si accorciava in una macchiolina: ora la paletta si sfila curvando appena e il filo segue la stessa curva.
- Il fianco tondo fatto con otto pezzi per fetta mostrava le righe verticali della luce: ora sono tredici.
- Il primo giro dell’anteprima durava 15 secondi: ora riportare indietro le fette è più svelto di servirle, e il giro intero ne dura circa 13.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 19 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.
