Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
Il titolo di gelato
Il nome di una gelateria fatto di coni: le lettere salgono dal bancone di marmo come pastella e si cuociono in cialda, poi le palline di gelato cadono una sull’altra, si schiacciano atterrando e fanno ondeggiare la pila. Col caldo il gelato si affloscia e cola piano lungo la cialda; il puntatore è un cucchiaino che ne assaggia un po’.
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 title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/titan-one@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/wght-italic.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena" data-scene>
<!-- the title, for screen readers: the waffle letters and the gelato are drawn in the SVG -->
<h1 class="leggibile" data-reader>Gelato, Gelateria Bruno</h1>
<!-- the stage: the script fills it with the awning, the marble counter, the waffle letters, the scoops and the spoon -->
<svg class="palco" data-stage aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<defs data-defs>
<!-- soft shadows on the marble -->
<filter id="soft" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="6" data-soft />
</filter>
</defs>
<g data-world></g>
</svg>
<p class="marca" hidden>
<span data-brand>Gelateria Bruno</span>
<span data-tagline>Churned every morning</span>
</p>
<p class="nota" data-hint>Run the spoon over a scoop to take a taste</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.
42 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 gelato» da Animorio e adattala al mio sitoCosa fa
Sotto una tenda a strisce rosa una gelateria inventata, Gelateria Bruno, compone il suo titolo, GELATO, su un bancone di marmo. Le lettere spuntano dal bancone una dopo l’altra, ancora pallide come pastella, si allungano oltre la misura e tornano giù con un rimbalzo; poi si cuociono: la griglia della cialda compare dentro ogni lettera, che si schiaccia un attimo come sotto la piastra. Ogni lettera è un cono. Dall’alto cadono le palline, una sull’altra: fragola, pistacchio, cioccolato, stracciatella, mango, menta e mirtillo, ognuna col suo orlo arricciato, le creste lasciate dal porzionatore e quello che c’è dentro (semini, granella, scaglie di cioccolato). Cadendo si allungano, toccando si schiacciano e si assestano con un elastico, la pallina sotto cede un poco, la pila ondeggia e tre gocce schizzano via. Poi un ventaglio di cialda si infila nella pila più alta, una ciliegia cade su un’altra e rimbalza col picciolo che dondola, la granella colorata piove sulle altre, e sotto compare il nome della gelateria. È una giornata calda: le palline si afflosciano piano e colano lungo la cialda, in rivoli che finiscono con una goccia grossa; uno arriva fino al bancone e lì si allarga in una pozza. Un cucchiaino arriva due volte e ne assaggia un po’: lascia una conca nella pallina, che si richiude piano, e se ne va col ricciolo di gelato. Alla fine le palline vengono portate via verso l’alto, le lettere rientrano nel bancone e il giro ricomincia. Col mouse il puntatore diventa il cucchiaino: passato in fretta su una pallina ne prende un ricciolo, e lo mangia.
Come funziona
Le lettere misurate su una canvas
Ogni lettera si disegna una volta su una canvas nascosta, nello stesso carattere del titolo, e si leggono i suoi pixel: la prima riga con l’inchiostro è la cima, il tratto più largo poco sotto dice dove sta il centro della pallina e quanto può essere grossa, e colonna per colonna si conta per quanto la cialda continua verso il basso. Lì, e solo lì, potrà scendere una colatura: un rivolo non scende mai nel vuoto, nel buco della A o accanto all’asta della L.
La cialda e la pastella
La lettera è un testo SVG ripetuto cinque volte: uno scuro spostato in basso per lo spessore, uno color pastella, uno riempito con un pattern di quadratini in rilievo girato di 45 gradi, una sfumatura di luce dall’alto e il bordo. Cuocerla vuol dire solo far comparire il pattern sopra la pastella; nello stesso momento la lettera si schiaccia e torna su con un elastico.
Una pallina, un profilo morbido
La pallina è un contorno chiuso che passa per una ventina di punti, smussato con le curve di Catmull-Rom: una cupola sopra e sotto un orlo a sei onde, con un pelo di disordine diverso per ogni pallina. Sopra, un gradiente radiale per il volume, l’ombra dell’orlo, le creste, i pezzetti e un riflesso; tutto con l’origine sul fondo della pallina, così schiacciarla vuol dire solo cambiare la scala in verticale.
La pila e la storia
Ogni pallina ha uno stato (quanto è ancora in alto, quanto è larga e alta) e a ogni fotogramma le palline si mettono una sull’altra: il fondo di ognuna è la cima di quella sotto, già schiacciata. Così una pallina che atterra fa cedere quella sotto e tutta la pila la segue, senza conti a parte. La storia è una timeline GSAP che si ripete, con numeri a caso che vengono sempre uguali: cadute, schiacciate, rimbalzi, colature e il cucchiaino sono tutti tween su quegli stati.
Il cucchiaino
Il cucchiaino segue il puntatore con un quickTo e si inclina con la velocità. A ogni fotogramma la sua punta si porta nelle coordinate di ogni pallina con la matrice di getCTM: se è dentro la cupola e il cucchiaino corre, nasce una conca (tre ellissi e un filo di luce, ritagliate sulla sagoma della pallina) che si apre con un rimbalzo e si richiude in REFILL secondi, e sul cucchiaino cresce un ricciolo del gusto giusto, che poco dopo viene mangiato.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'GELATO' | La parola fatta di coni: una lettera per carattere, al massimo dodici (gli spazi lasciano un po’ di posto). |
TOWER | script.js | 3 | La pila più alta di palline su una lettera: 1 è una pallina per lettera, 4 torri traballanti. |
SQUASH | script.js | 1 | Quanto si schiaccia una pallina quando atterra, e quanto ondeggia la pila (0 = atterra rigida). |
HEAT | script.js | 1 | Quanto fa caldo: quanto il gelato si affloscia e cola (0 = non si scioglie mai). |
REFILL | script.js | 5 | In quanti secondi la conca lasciata dal cucchiaino si richiude. |
SPEED | script.js | 1 | La velocità di tutta la storia: 2 è il doppio, 0.5 la metà. |
HOLD | script.js | 7 | Quanti secondi il titolo finito resta a sciogliersi prima che i coni vengano ritirati. |
Quando usarla
Per l’apertura del sito di una gelateria, di una pasticceria, di un chiosco estivo, di un bar sulla spiaggia o di un negozio di dolci, per un caricamento, per la sigla di un video o per un post d’estate. Funziona con parole corte, da tre a sette lettere: un marchio, GELATO, SUMMER, YUM.
Sul telefono
La stessa storia con le misure adattate: la parola prende quasi tutta la larghezza e il nome sta sotto, sul bancone. Trascinando il dito il cucchiaino compare sotto il dito e assaggia le palline che attraversa; lasciato il dito, sparisce.
Con il movimento ridotto
Niente cade, niente si schiaccia e niente cola: le lettere compaiono già di cialda con le loro palline, una dopo l’altra in dissolvenza, con le colature già a metà, poi il nome. Il cucchiaino segue il puntatore senza inclinarsi; le conche compaiono e si richiudono in dissolvenza.
Trappole
- Le colature messe a caso sotto la pallina scendevano anche dove la lettera non c’è, nel buco della A o accanto all’asta della L, e restavano appese nel vuoto: le colonne buone si cercano sui pixel della lettera, e la colatura non va mai oltre la cialda che ha sotto.
- Le colature stanno nel gruppo della lettera e seguono la pallina; mentre la lettera spuntava dal bancone, schiacciata in verticale, la pallina ancora fuori dallo schermo ce le portava dentro, piccole, sopra il titolo: si nascondono finché la pallina sotto non è arrivata.
- Le tre gocce che schizzano all’atterraggio erano dei fromTo: GSAP le disegna subito col valore di partenza e si vedevano ferme sopra le lettere fin dal primo fotogramma. Vanno con immediateRender: false.
- Schiacciare una pallina con un tween sulla sua scala spostava quella sopra, che restava a mezz’aria: le palline non hanno una posizione fissa, a ogni fotogramma il fondo di ognuna si calcola dalla cima di quella sotto, già schiacciata.
- Il punto dove il cucchiaino della storia affonda va letto quando parte il tween, non quando si scrive la timeline: in quel momento la pallina è ancora fuori dallo schermo. Si usano valori funzione, che GSAP legge al primo fotogramma del tween.
Librerie
GSAP 3.15.0, Titan One 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 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.
