Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
Il titolo di gomma da masticare
Il titolo di un negozio di caramelle fatto di gomma da masticare rosa, gonfia e lucida: sotto il puntatore le lettere si attaccano e si stirano in un filamento che si tende e si spezza, poi tornano con un elastico. Ogni tanto una lettera fa una bolla che cresce, trema e scoppia; con un clic ne scoppia una grande.
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 bubblegum title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fredoka@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="shop">
<header class="shop__top">
<p class="shop__brand">Mollie’s Sweet Shop</p>
<p class="shop__line">Pick and mix, weighed by hand</p>
</header>
<!-- the title is drawn in the svg below; this one is for screen readers and search engines -->
<h1 class="shop__title" data-title>Chewy</h1>
<!-- one svg as big as the window: the gum (letters, strands, shreds) goes through a single filter that melts it
together and lights it; the bubbles sit on top, outside the filter, because they are thin and see-through -->
<svg class="gum" data-gum aria-hidden="true">
<defs>
<filter id="gum-goo" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-goo>
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" data-blur />
<feColorMatrix in="blur" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 24 -11" result="goo" />
<feGaussianBlur in="goo" stdDeviation="9" result="height" data-height />
<feSpecularLighting in="height" surfaceScale="20" specularConstant="1" specularExponent="38" lighting-color="#ffffff" result="spec" data-spec>
<feDistantLight azimuth="225" elevation="52" />
</feSpecularLighting>
<feComposite in="spec" in2="goo" operator="in" result="shine" />
<feDiffuseLighting in="height" surfaceScale="20" diffuseConstant="1.18" lighting-color="#ffffff" result="light" data-diffuse>
<feDistantLight azimuth="225" elevation="58" />
</feDiffuseLighting>
<feComposite in="goo" in2="light" operator="arithmetic" k1="0.6" k2="0.45" k3="0" k4="0" result="shaded" />
<feComposite in="shine" in2="shaded" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="lit" />
<feGaussianBlur in="goo" stdDeviation="10" result="soft" data-shadow-blur />
<feOffset in="soft" dx="0" dy="12" result="drop" data-shadow-offset />
<feFlood flood-color="#a3245a" flood-opacity="0.26" result="tone" data-shadow-tone />
<feComposite in="tone" in2="drop" operator="in" result="shadow" />
<feMerge>
<feMergeNode in="shadow" />
<feMergeNode in="lit" />
</feMerge>
</filter>
<radialGradient id="gum-film" cx="0.42" cy="0.38" r="0.66">
<stop offset="0" class="film-in" />
<stop offset="0.72" class="film-mid" />
<stop offset="1" class="film-out" />
</radialGradient>
</defs>
<g data-world>
<g class="gum__body" filter="url(#gum-goo)" data-body></g>
<g class="gum__bubbles" data-bubbles></g>
</g>
</svg>
<p class="shop__hint" data-hint>Move over the letters to stretch the gum. Click to blow a big bubble.</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.
19 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 gomma da masticare» da Animorio e adattala al mio sitoCosa fa
Su una parete a righe rosa e crema, sotto l’insegna di un negozio di caramelle inventato, Mollie’s Sweet Shop, la parola Chewy cade dall’alto una lettera alla volta e atterra schiacciandosi, con un rimbalzo elastico. Le lettere sembrano gomma da masticare vera: gonfie, con i bordi arrotondati, un riflesso lucido in alto a sinistra, l’ombra sotto e, dove si toccano, si fondono un poco fra loro. Passando sopra una lettera col puntatore la gomma ci si attacca: allontanandosi, dalla lettera esce un filamento che si allunga, si assottiglia e si incurva verso il basso col suo peso, mentre la lettera si stira verso il puntatore. Oltre un certo punto il filamento si spezza: rientra di scatto, la lettera torna al suo posto con un elastico che la schiaccia e la riallunga un paio di volte, le vicine si inclinano appena e una goccia di gomma cade via. Ogni pochi secondi una lettera fa una bolla: un velo rosa trasparente che si gonfia in tre soffi, con i riflessi, poi trema tutto e scoppia. Al suo posto restano i lembi di gomma afflosciata, che si ritirano e ricadono sulla lettera, qualche schizzo e un piccolo scossone; poi i lembi vengono risucchiati dentro la lettera, che si riassesta. Un clic fa gonfiare in fretta una bolla grande sulla lettera più vicina, che scoppia più forte e fa sobbalzare tutta la parola; cliccando su una bolla la si fa scoppiare subito.
Come funziona
Gomma con un filtro solo
Le lettere sono testo SVG normale, una per elemento, con un contorno dello stesso colore che le ingrassa. Tutto quello che è gomma (lettere, filamenti, lembi, gocce) sta in un gruppo con un filtro solo. Un feGaussianBlur e un feColorMatrix che moltiplica l’alfa per 24 e toglie 11 fanno l’effetto «goo»: i pezzi vicini si fondono e gli spigoli si arrotondano. Poi lo stesso risultato sfocato diventa una mappa delle altezze: feSpecularLighting dà il riflesso lucido, feDiffuseLighting l’ombra sui fianchi, e un feComposite arithmetic li mescola al rosa. Sotto, la stessa forma sfocata e spostata in giù fa l’ombra.
Le misure
La parola si misura su una canvas con lo stesso carattere (measureText, con actualBoundingBox per la sagoma vera di ogni lettera) e la grandezza si sceglie perché stia nella finestra. Tutto il resto si conta in grandezze del carattere: lo sfocato del filtro, il rilievo, lo spessore dei filamenti e dei lembi, la portata, le bolle. Il viewBox dell’SVG è grande quanto la finestra, così un’unità è un pixel e i numeri del filtro restano giusti.
Il filamento
Ogni lettera ha uno stato (spostamento, stiramento lungo una direzione, schiacciamento sulla linea di base, inclinazione) che diventa una matrice, scritta come transform. Quando il puntatore entra in una lettera, il punto d’aggancio si fissa; a ogni fotogramma il filamento si disegna come un poligono lungo una curva quadratica, dall’aggancio (trasformato con la stessa matrice) al puntatore: largo alla base, una vita che si assottiglia con la lunghezza, una pallina in punta, e il punto di controllo abbassato in proporzione al quadrato della tensione, perché penda. La lettera intanto si stira verso il puntatore.
Lo strappo
Oltre la portata il filamento si spezza: diventa un filamento sciolto che rientra nella lettera in 0,34 secondi con power3.in, mentre la lettera torna con elastic.out (lo stiramento passa sotto zero e la lettera si schiaccia di traverso prima di fermarsi). Una goccia resta dov’era il puntatore e cade con la gravità rimpicciolendo: attraverso la soglia del filtro sembra assorbirsi. Le due lettere vicine fanno un piccolo dondolio, e la lettera resta libera per mezzo secondo prima di potersi riattaccare.
La bolla e lo scoppio
La bolla sta fuori dal filtro, sopra le lettere: un cerchio con un gradiente radiale rosa trasparente, un bordo sottile e due archi bianchi di riflesso; un collo di gomma, dentro il filtro, la lega alla lettera. Una timeline la gonfia in tre soffi, poi la fa tremare con due seni a frequenze diverse su scaleX e scaleY. Allo scoppio la bolla sparisce e al suo posto partono i lembi: tratti curvi dentro il filtro, la radice vicino al centro e il bordo che si ritira e poi cade. Dopo un attimo vengono risucchiati nel centro della lettera, che si schiaccia di nuovo. Le bolle arrivano da sole con un delayedCall a caso; un clic ne fa una grande sulla lettera più vicina, oppure fa scoppiare quella che tocca.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TEXT | script.js | 'Chewy' | Il titolo, una parola: si ridimensiona da solo per stare nella finestra. |
REACH | script.js | 2.2 | Quanto si allunga un filamento prima di spezzarsi, in altezze di lettera. |
SPRING | script.js | 0.3 | Come tornano le lettere: più basso, più ondeggiano prima di fermarsi. |
PUFF | script.js | 1 | Quanto sono gonfie le lettere: più alto, più grasse e più fuse fra loro. |
GLOSS | script.js | 1 | Quanto è lucida la gomma (0 = opaca). |
BUBBLE | script.js | 1 | Quanto crescono le bolle. |
EVERY | script.js | 4.5 | Ogni quanti secondi, più o meno, una lettera fa una bolla da sola. |
Quando usarla
Per un titolo che fa venire voglia di toccarlo: il sito di un negozio di caramelle o di una gelateria, un marchio di gomme o di bibite, la pagina di una festa per bambini, un gioco, un evento estivo. Funziona con una parola corta e grande, da sola al centro.
Sul telefono
La stessa animazione con le misure adattate: la parola è larga quasi quanto lo schermo e tutto (filamenti, bolle, lembi) si conta sulla sua grandezza. Si trascina una lettera col dito per stirarla; un tocco fa la bolla grande. Lo scorrimento della pagina è spento, così il dito tira la gomma.
Con il movimento ridotto
Niente si muove: la parola compare in dissolvenza, già al suo posto, le lettere non si stirano e le bolle compaiono e spariscono in dissolvenza, già gonfie, senza scoppio. Il clic fa comparire allo stesso modo la bolla grande.
Trappole
- Con le lettere strette e gonfie il filtro le fondeva in un’unica massa e chiudeva l’occhiello della e: ci vuole un po’ di spazio fra le lettere (0,035 della grandezza) e un contorno sottile, il gonfio lo fa già la soglia del filtro.
- La luce speculare su una mappa delle altezze troppo dolce disegnava gradini, come le curve di livello di una carta: meno sfocato e meno rilievo danno un pendio più ripido e i gradini spariscono. Anche le zone piatte prendevano un riflesso biancastro: un esponente più alto (38) lo tiene sui bordi.
- Moltiplicare il rosa per la luce diffusa rendeva quasi neri i fianchi in ombra: il feComposite arithmetic tiene metà del colore pieno (k1 0,6, k2 0,45).
- Un filamento più sottile dello sfocato del filtro sparisce sotto la soglia prima di spezzarsi: la sua vita non scende mai sotto 0,8 volte lo sfocato.
- I lembi della bolla, partiti dal bordo verso il centro, sembravano zampe di ragno: partono dal centro e il bordo libero si ritira verso di loro, poi cade.
- Il pilota delle anteprime manda un pointerleave che risale fino alla radice ogni volta che cambia elemento: il puntatore si dà per uscito solo se il pointerleave arriva proprio dalla radice della pagina.
- Il filtro sulla finestra intera ricalcolava sfocature e luci su milioni di pixel a ogni fotogramma: la sua regione si stringe al rettangolo dove c’è gomma (la parola, il filamento, i lembi, le gocce), arrotondato a 32 pixel perché non cambi a ogni fotogramma; e gli attributi si riscrivono solo quando cambiano, così il titolo fermo non costa niente.
Librerie
GSAP 3.15.0, Fredoka (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 10 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.
