Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
Il titolo di biscotti
Un titolo di pasta frolla: il mattarello stende la pasta, uno stampino taglia le lettere con un colpo, la teglia va in forno e lo guardi dal vetro, le lettere lievitano e si dorano, poi glassa a filo e codette che rimbalzano. Un clic dà un morso a una lettera, con le briciole.
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 shortbread title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fredoka@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script fills it with the board, the dough, the rolling pin, the cutter, the tray, the oven and the biscuits -->
<svg class="palco" data-stage role="img" aria-label="Crumb, a bakery" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- the soft edge of the baked dough, where it turns golden -->
<filter id="soften" x="-20%" y="-20%" width="140%" height="140%" data-soften>
<feGaussianBlur stdDeviation="3" data-soften-blur />
</filter>
<!-- soft shadows and steam -->
<filter id="blur" x="-50%" y="-50%" width="200%" height="200%" data-blur>
<feGaussianBlur stdDeviation="8" data-blur-std />
</filter>
<filter id="haze" x="-80%" y="-80%" width="260%" height="260%" data-haze>
<feGaussianBlur stdDeviation="5" data-haze-std />
</filter>
<!-- the crumb of the biscuits: little specks of butter and sugar -->
<pattern id="crumb" patternUnits="userSpaceOnUse" width="46" height="46" data-crumb>
<circle class="briciola-a" cx="7" cy="9" r="1.6" />
<circle class="briciola-b" cx="29" cy="5" r="1.1" />
<circle class="briciola-a" cx="38" cy="27" r="1.4" />
<circle class="briciola-b" cx="15" cy="31" r="1.2" />
<circle class="briciola-a" cx="24" cy="41" r="1" />
<circle class="briciola-b" cx="4" cy="22" r="0.9" />
</pattern>
<!-- the rolling pin is a cylinder: dark at the sides, a highlight on top -->
<linearGradient id="barrel" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" class="stop-legno-scuro" />
<stop offset="0.38" class="stop-legno-luce" />
<stop offset="0.55" class="stop-legno" />
<stop offset="1" class="stop-legno-scuro" />
</linearGradient>
<!-- the warm light in the oven -->
<radialGradient id="glow" cx="0.5" cy="0.15" r="0.95">
<stop offset="0" class="stop-forno-forte" />
<stop offset="0.6" class="stop-forno" />
<stop offset="1" class="stop-forno-via" />
</radialGradient>
<linearGradient id="steel" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" class="stop-acciaio-luce" />
<stop offset="1" class="stop-acciaio" />
</linearGradient>
</defs>
<g data-world></g>
</svg>
<p class="nota" data-hint>Click or tap a biscuit to take a bite</p>
</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.
49 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 titolo di biscotti» da Animorio e adattala al mio sitoCosa fa
Su un piano di cucina a piastrelle color crema arriva un tagliere di legno, e una manciata di farina ci si posa sopra. Dall’alto cade una palla di pasta frolla, si schiaccia nell’urto e sbuffa farina. Un mattarello entra da sinistra, la stende verso destra, torna indietro e la allarga in una sfoglia, poi si alza e se ne va. Arriva lo stampino: tutte le lettere della parola CRUMB in acciaio, tenute da un’impugnatura rossa; resta sospeso con la sua ombra, prende la mira, carica e scende con un colpo che fa tremare il tagliere. Quando si alza, i ritagli di pasta vengono tirati via a sinistra, coi buchi delle lettere, e le lettere restano. Saltano una dopo l’altra su una teglia con la carta da forno, che intanto è scivolata al posto del tagliere, e atterrano schiacciandosi e rimbalzando. La teglia si allontana e davanti si chiude lo sportello del forno: lo guardiamo dal vetro, coi riflessi, la maniglia e due manopole che girano. La resistenza diventa rossa, dentro arriva una luce calda e le lettere lievitano: si gonfiano con un piccolo tremolio, gli angoli si arrotondano, il colore passa dal crudo al dorato e i bordi si scuriscono. Le manopole tornano indietro con uno scatto, la luce si spegne, lo sportello si apre cadendo verso il basso e la teglia torna avanti, coi biscotti che fumano. Una sacca da pasticcere disegna la glassa a filo, un solo zig zag che passa su tutte le lettere e resta solo sopra i biscotti; poi piovono le codette colorate, che cadono rimbalzando e girando su se stesse. Sotto compare il nome di una pasticceria inventata, Crumb & Co. Bakery. Qualcuno non resiste e dà un morso alla R: un morso coi segni dei denti, l’interno più chiaro del biscotto e le briciole che saltano e rimbalzano sulla teglia. Dopo qualche secondo la teglia scivola via e si ricomincia, con le codette ogni volta in posti diversi. Un clic su una lettera le dà un morso dove hai cliccato; al quinto morso la lettera è finita e ne spunta una nuova.
Come funziona
Una misura sola
Il palco è un SVG con il viewBox grande quanto la finestra; dentro c’è un gruppo, il mondo, largo 1600 per 1000 unità (880 per 1500 su uno schermo alto), messo al centro e scalato perché ci stia tutto. Le lettere si misurano su una canvas col carattere Fredoka (measureText, actualBoundingBoxAscent per l’altezza vera) e tutto si conta in altezze di lettera: la sfoglia, il tagliere, la teglia e la finestra del forno sono la parola più un margine. Sulla stessa canvas ogni lettera è dipinta in un rosso diverso: è la mappa che dice su quale lettera cade un punto, per le codette e per i morsi.
La pasta, il mattarello e lo stampino
La pasta è un rettangolo solo con gli angoli arrotondati: palla quando larghezza, altezza e raggio sono uguali, sfoglia quando si allarga insieme al mattarello, con le stesse durate e la stessa curva. Il mattarello, visto dall’alto, è un cilindro con un gradiente da scuro a chiaro a scuro; le venature, ritagliate dentro, scorrono a ogni passo con il resto della divisione, così sembra che rotoli. Lo stampino è la parola scritta solo col contorno, in tre tratti d’acciaio; la sua altezza da terra è un numero solo che lo ingrandisce, lo alza e allontana l’ombra sfocata. Al colpo compaiono le lettere e i buchi nella maschera della sfoglia, che così, tirata via, si porta dietro i buchi giusti.
Il forno
La cottura è fatta di tratti: ogni lettera è tre testi uguali, uno sotto l’altro. Il bordo ha un tratto largo che diventa dorato e più scuro, il corpo un tratto più stretto e un filtro di sfocatura che sfuma il passaggio, e sopra c’è un motivo di puntini, la grana della frolla. Allargare i tratti fa gonfiare la lettera senza cambiare la sua forma; i colori si scaldano con un tween sul fill e sullo stroke, e con BAKE si sceglie quanto. Lo sportello è un tracciato enorme con un buco arrotondato (fill-rule evenodd): arriva da tre volte più grande e si apre schiacciandosi verso la cerniera in basso. La luce calda è un rettangolo con mix-blend-mode multiply più uno sfumato in screen.
Glassa e codette
La glassa è un solo tracciato a zig zag che attraversa tutta la parola, disegnato con stroke-dashoffset; ogni lettera lo usa con un use dentro un clipPath fatto della sua forma, quindi il filo si vede solo sui biscotti. La sacca segue la punta del filo con getPointAtLength e si inclina secondo la direzione. Le codette si posano solo dove la mappa dice che c’è una lettera, anche un po’ più in là in ogni direzione, così non sporgono; cadono con bounce.out, girando, e stanno dentro la lettera, così un morso porta via anche loro.
Il morso
Ogni lettera ha una maschera: un rettangolo bianco e un gruppo dove il morso aggiunge forme nere. Il morso è un cerchio con sette cerchi più piccoli intorno, così il bordo ha i segni dei denti; lo stesso disegno un po’ più grande e chiaro, dentro il clipPath della lettera, è l’interno della frolla. Il punto giusto si trova sulla mappa: si parte da fuori, nella direzione del clic, e si cammina verso il centro finché si incontra la lettera; il morso sta appena fuori da lì. Le briciole partono dal bordo, salgono e ricadono con bounce.out sulla teglia, poi spariscono.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'CRUMB' | La parola tagliata nella pasta: un biscotto per lettera (gli spazi lasciano un po’ di posto). |
BAKE | script.js | 1 | Quanto cuociono: 0.4 restano chiari, 1 dorati, 1.6 scuri ai bordi. Allunga anche il tempo nel forno. |
RISE | script.js | 1 | Quanto le lettere si gonfiano nel forno (0 = restano piatte). |
SPRINKLES | script.js | 40 | Quante codette cadono sui biscotti (0 = nessuna). |
ZIGZAG | script.js | 1 | Quanto sono fitti i fili di glassa: 2 il doppio, 0 niente glassa. |
SPEED | script.js | 1 | La velocità di tutta la storia: 2 è il doppio, 0.5 la metà. |
REST | script.js | 4 | Quanti secondi il titolo decorato resta in mostra prima che la teglia scivoli via. |
LOOP | script.js | true | Se la teglia scivola via e si cuoce un’altra infornata. Con false i biscotti restano, e si possono mordere. |
Quando usarla
Per l’apertura del sito di una pasticceria, di un forno, di una gelateria o di un blog di ricette, per la pagina di un corso di cucina, per un caricamento lungo o un post per i social. Funziona con parole corte, da tre a otto lettere: il nome di un marchio, BAKE, SWEET, YUM.
Sul telefono
La stessa storia con le misure adattate: su uno schermo alto il mondo è più stretto e la parola prende quasi tutta la larghezza. Un tocco su una lettera le dà un morso.
Con il movimento ridotto
Niente si sposta: la sfoglia sul tagliere compare in dissolvenza, poi le lettere, poi la teglia al posto del tagliere; il forno compare e scompare in dissolvenza mentre i colori si dorano, poi la glassa, le codette già al loro posto e il nome. Un morso compare in dissolvenza, con le briciole già sulla teglia.
Trappole
- La sfoglia, tirata via, era un rettangolo pieno senza i buchi delle lettere: i buchi sono una maschera che si accende solo al colpo dello stampino, altrimenti si vedrebbero prima del taglio.
- Gonfiare le lettere con scale le faceva toccare fra loro e cambiava la distanza dalla glassa: si gonfiano allargando i tratti, e lo spazio fra le lettere è calcolato per il tratto più largo; troppo gonfie, però, chiudevano i buchi della R e della B, così il tratto ha un limite.
- Le codette cadono da sopra lo schermo dentro il gruppo mascherato della lettera: la maschera dei morsi va fatta alta fino in cima, altrimenti le codette sarebbero invisibili per quasi tutta la caduta.
- Una codetta posata vicino al bordo, lunga e girata, sporgeva fuori dal biscotto: il punto deve stare dentro la lettera anche spostandosi di più di mezza codetta in ogni direzione.
- Nel clipPath conta solo il riempimento, non il tratto: la glassa ritagliata sulla lettera resta un po’ dentro il bordo dorato, come la glassa vera, ma per lo stesso motivo il clipPath non può servire a tagliare la lettera nei morsi, che usano una maschera.
- Il morso dove si clicca, al centro di una lettera, faceva un buco in mezzo: si cerca il bordo esterno partendo da fuori nella direzione del clic, e il morso sta lì.
Librerie
GSAP 3.15.0, Fredoka (font variabile) 5.3.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 17 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 11 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.
