Le parole nelle bolle

Fisica, Testo, SVGGSAPImpegnativaPeso compresso: Demo 12 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal: parole dentro bolle disegnate con una linea sola, che salgono piano verso una riga sottile. Si urtano con la fisica vera dei corpi morbidi e dove si premono condividono una parete piatta; quando due parole che vanno insieme si toccano, le bolle si fondono in una più grande con le due parole affiancate, che prendono peso. Sotto la riga le bolle si raccolgono, la spingono in su e scoppiano in un piccolo anello; un clic ne fa scoppiare una, un clic sulla pagina vuota ne soffia una nuova.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Words in bubbles</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- words in hairline bubbles rising to a surface: two words that belong together merge when they touch -->
  <main class="stage" data-stage>
    <svg class="field" data-field aria-hidden="true">
      <path class="surface" data-surface d="" />
      <g data-bubbles></g>
      <g data-rings></g>
    </svg>
    <div class="words" data-words aria-hidden="true"></div>

    <p class="hint" data-hint>Click a bubble to pop it, or the empty page to blow a new one.</p>
    <p class="said" data-said aria-live="polite"></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

Apri il Playground

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 «Le parole nelle bolle» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Una pagina bianca calda, una riga grigia sottile che si disegna dal centro verso i lati vicino al bordo in alto, e dal fondo della pagina bolle che salgono piano in una colonna larga al centro, con tanto vuoto ai lati. Ogni bolla è un cerchio d'inchiostro di un pixel con dentro una parola leggera (wght 320) e un piccolo arco grigio in alto a sinistra, dove prenderebbe la luce; la sua misura dipende dalla parola, e le bolle più grandi salgono un po' più svelte. Le parole sono sei coppie che vanno insieme: moon e light, sea e salt, slow e motion, still e life, free e fall, paper e plane. Le bolle sono corpi morbidi: quando due si premono, nel punto di contatto si appiattiscono su una parete dritta in comune, come la schiuma vera, e dopo un urto ondeggiano appena da ovali a cerchi. Due parole della stessa coppia si cercano: si avvicinano piano e, mentre arrivano, prendono già un po' di peso e si stringono un poco. Quando le loro bolle si toccano si fondono: il collo fra i due cerchi si riempie come fra due gocce, la nuova bolla si arrotonda con un paio di oscillazioni lungo la linea delle due vecchie, la sua linea diventa blu e le due parole scivolano una accanto all'altra (moon light), prendono peso (wght 600) e si stringono (wdth 86). Arrivate in alto, le bolle spingono in su la riga, che si piega intorno a loro, e le bolle si schiacciano appena contro di lei; sotto la riga si attirano e fanno una piccola zattera. Dopo un attimo ognuna scoppia: la sua linea si apre in un anello che si allarga e svanisce, le lettere si allargano, perdono peso e spariscono, le bolle vicine ricevono una spinta e ondeggiano, e la riga torna giù con qualche onda. Quando l'ultima bolla è scoppiata il giro ricomincia uguale. Un clic su una bolla la fa scoppiare subito; un clic sulla pagina vuota soffia lì una bolla nuova, che si gonfia con una molla (di preferenza la parola che manca a una bolla rimasta sola). Con il mouse sopra, una bolla si gonfia di un paio di pixel, la sua linea si fa più spessa e la parola prende peso.

Come funziona

Bolle fatte di punti

Ogni bolla è un tracciato SVG chiuso, ridisegnato a ogni fotogramma da 72 punti intorno al centro: a ogni angolo il raggio è quello del cerchio, più un'oscillazione a forma di ovale, meno quello che tolgono le vicine e la riga. I punti si uniscono con una curva liscia (Catmull-Rom scritta come curve di Bézier), così anche dove la bolla si appiattisce non ci sono spigoli. La parola è un elemento HTML centrato sul punto della bolla, con il peso e la larghezza scritti in font-variation-settings.

La fisica dei corpi morbidi

La fisica è nostra, a passi fissi di 1/120 di secondo dentro gsap.ticker. Ogni bolla ha una spinta verso l'alto che la porta alla sua velocità (più grande, più svelta), un ondeggiare di lato e un po' d'attrito. Due bolle che si sovrappongono si respingono come due molle smorzate, in proporzione a quanto entrano una nell'altra: per questo si possono premere di qualche pixel. Disegnando, dove due cerchi si sovrappongono il raggio si ferma sul piano in cui i due cerchi si incrociano (il piano radicale): le due bolle hanno la stessa parete dritta, come nella schiuma. Un urto fa partire un'oscillazione a ovale, una molla smorzata lungo la direzione dell'urto.

Le parole che si fondono

Due parole della stessa coppia si attirano con una piccola forza costante e, mentre si avvicinano, prendono un po' di peso. Quando si toccano nasce una bolla sola, nel loro centro di massa, con l'area delle due insieme (o di più, se le due parole affiancate non ci stanno). Per un attimo il suo contorno è l'unione morbida dei due cerchi vecchi (un massimo morbido, che fa il collo come fra due gocce) e un tween GSAP lo porta al cerchio nuovo; poi una spinta all'oscillazione lo fa ondeggiare lungo la linea delle due bolle. Le parole scivolano ai loro posti e prendono peso e larghezza con elastic.out; se devono scambiarsi di lato passano una sopra l'altra.

La riga che si piega

La riga in alto è una corda: un'equazione delle onde con attrito su un centinaio di punti. Una bolla che la tocca la spinge in su per tre quarti di quanto ci entra, e il resto è la bolla che si schiaccia contro di lei. Dopo un attimo di pressione la bolla scoppia, la corda è libera e torna giù con qualche onda. Sotto la riga le bolle si attirano un poco, come i cereali che galleggiano nel latte, e fanno una piccola zattera.

Lo scoppio e il giro

Scoppiando, la linea della bolla diventa un cerchio SVG che si allarga di quasi metà, si assottiglia e svanisce; le lettere si allargano, perdono peso e spariscono, e le bolle vicine ricevono una spinta e un'oscillazione. Le bolle arrivano secondo un programma fisso con un numero a caso che riparte sempre dallo stesso seme, e il giro ricomincia solo quando la pagina è vuota e la riga è ferma: così ogni giro è identico al primo. Con il movimento ridotto la fisica gira tutta in una volta senza mostrarsi, metà delle coppie compaiono già fuse e le bolle restano ferme; un clic le fa sparire in dissolvenza.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`PAIRS`	script.js	`['moon light', 'sea salt', 'slow motion', 'still life', 'free fall', 'paper plane']`	Le coppie di parole che vanno insieme, due parole per voce (fino a 8 coppie, 12 lettere a parola). Ogni giro le fa salire tutte.
`RISE`	script.js	`56`	Quanto svelte salgono le bolle, in pixel al secondo.
`SWAY`	script.js	`12`	Quanto ondeggiano di lato salendo, in pixel al secondo.
`PULL`	script.js	`1`	Quanto si cercano due parole che vanno insieme: 0 si fondono solo se si incontrano per caso.
`SOFTNESS`	script.js	`1`	Quanto si appiattiscono le bolle quando si premono: 0.4 sono rigide, 2 molli.
`LIGHT`	script.js	`320`	Il peso del carattere di una parola da sola, da 100 a 900.
`HEAVY`	script.js	`600`	Il peso che prendono due parole quando si fondono.
`LINE`	script.js	`1`	Lo spessore della linea delle bolle, in pixel.

Provali nel Playground

Quando usarla

Per dire che le cose vanno insieme: gli abbinamenti di un ristorante o di un'enoteca, i servizi di uno studio che si completano, le parole chiave di un portfolio, la pagina di un evento con i suoi temi. Funziona anche da sola come apertura calma e giocosa, o come pagina di attesa che si può toccare.

Sul telefono

La stessa fisica con le misure adattate: parole e bolle un po' più piccole rispetto alla pagina e la colonna più larga, quasi tutta la larghezza. Un tocco su una bolla la fa scoppiare, un tocco sulla pagina vuota ne soffia una nuova.

Con il movimento ridotto

Niente sale e niente ondeggia: la fisica gira tutta in una volta senza mostrarsi, metà delle coppie compaiono già fuse in blu e le bolle restano ferme al centro, in dissolvenza. Un clic su una bolla la fa sparire in dissolvenza, senza anello che si allarga; quando sono sparite tutte, il gruppo ricompare.

Trappole

Con l'unione dei due cerchi fatta col massimo vero, il contorno della bolla che si fondeva aveva due spigoli nel collo e una punta dove un raggio sfiorava il cerchio piccolo: con un massimo morbido e un poco aggiunto sotto la radice il collo è tondo come fra due gocce.
Il passaggio dai due cerchi al cerchio nuovo con elastic.out andava oltre e rovesciava il collo in fuori, con due angoli: ora il passaggio è power3.out senza andare oltre, e l'oscillazione la fa la molla dell'ovale, lanciata lungo la linea delle due bolle.
Con le parole che scivolavano ai loro posti con elastic.out, le due parole andavano oltre verso il centro e si toccavano (moonlight): le posizioni arrivano con power3.out, il peso e la larghezza con la molla.
Sparse su tutta la larghezza, le bolle salivano in fila senza toccarsi mai e la deformazione non si vedeva: salgono in una colonna al centro, con velocità un po' diverse, e sotto la riga si attirano in una zattera.
Il video della scheda si ferma quando il giro ricomincia uguale: il lato dell'ondeggiare usava il tempo dall'apertura e il secondo giro veniva diverso dal primo. Ora ogni giro rimette a zero il suo orologio, il seme dei numeri a caso e il resto dei passi della fisica.
Il cerchio dell'anello partiva senza raggio e la console segnava un errore sull'attributo r: il raggio si scrive prima del tween.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 16 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.