La parola sulla riga elastica
Hover, Testo, Fisica
NuovaGratis
Torna alla libreria
Il titolo di palloncini
Il titolo di un negozio di palloncini scritto con lettere di foil gonfie, ognuna legata con un nastrino arricciato a un pesetto sul pavimento. La fisica è vera: il puntatore soffia nell’aria e le lettere si piegano, si urtano, girano sul nastro e tornano su. Un clic lega un palloncino nuovo dove hai cliccato, e tutto il mazzo gli fa posto.
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 balloon headline</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fredoka@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the wall, the floor, the weights, the ribbons and the foil balloons: one canvas drawn by the script -->
<canvas class="sky" data-sky aria-hidden="true"></canvas>
<header class="brand" data-in>
<svg class="brand__mark" viewBox="0 0 28 40" aria-hidden="true">
<path d="M14 2c6.4 0 11 4.9 11 11.2 0 7.4-5.6 13.3-9.4 15.2h-3.2C8.6 26.5 3 20.6 3 13.2 3 6.9 7.6 2 14 2z" fill="currentColor"/>
<path d="M12.2 28.4h3.6l-1 2.4h-1.6z" fill="currentColor"/>
<path d="M14 30.8c-1.8 2.2 1.8 3.6 0 5.8s1.6 2.4 0.4 3.2" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
<path d="M9.4 9.2c1-2.2 2.8-3.4 4.8-3.6" fill="none" stroke="#fff" stroke-opacity="0.7" stroke-width="1.8" stroke-linecap="round"/>
</svg>
<span class="brand__name">Helium Hour</span>
</header>
<p class="hint" data-hint data-in>Blow on the letters with your pointer. Click the sky to tie on another balloon.</p>
<h1 class="sr-only" data-title>Big day</h1>
<footer class="copy">
<p class="copy__line" data-in>Foil letters, filled and tied, at your door by nine. Balloons for birthdays, launches and every big day in between.</p>
<button class="pill" type="button" data-add data-autoclic data-in><span class="pill__bg" aria-hidden="true"></span><span class="pill__text">Add a balloon</span></button>
</footer>
</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.
30 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 palloncini» da Animorio e adattala al mio sitoCosa fa
La prima pagina di Helium Hour, un negozio inventato che consegna palloncini già gonfi. Davanti a una carta da parati a righe color pesca, su un pavimento rosato, cadono uno dopo l’altro dei pacchettini con il fiocco, rimbalzando. Poi le lettere di BIG DAY si gonfiano a turno: ognuna parte piccola sul suo pacchetto, si gonfia con un rimbalzo elastico mentre il nastro si srotola, e l’elio la porta su fino al suo posto nella riga, dove si assesta dondolando e gira un poco sul nastro. Le lettere sono di foil lucido: gonfie sui bordi, con la cucitura chiara tutto intorno, la valvolina sotto e due riflessi che scorrono sulla superficie quando la lettera si inclina o gira; di taglio diventa una lamina sottile e più scura, e di spalle si vede al contrario. Appena il titolo è su, un colpo di vento attraversa la stanza da sinistra a destra con qualche tratto d’aria disegnato, e le lettere si inchinano una dopo l’altra come un’onda e tornano su. Muovendo il puntatore si soffia: l’aria intorno prende la sua velocità, le lettere vicine si piegano, i nastri si curvano e sventolano, chi si urta rimbalza, si schiaccia un attimo e prende a girare. Un clic su una lettera le dà un colpetto. Un clic sul cielo lega un palloncino nuovo (una stella di foil, un disco o un palloncino di lattice lucido) proprio dove hai cliccato: il suo pacchetto cade sul pavimento sotto quel punto, il palloncino si gonfia e sale, e se una lettera è in mezzo si sposta nella corsia libera più vicina, ai lati o sotto le parole, spingendo le vicine che poi si riassestano. Oltre i sei palloncini aggiunti il più vecchio si slega: il suo pacchetto sparisce e lui vola via verso l’alto col nastro che penzola. Il pulsante Add a balloon fa lo stesso, in punti scelti in ordine.
Come funziona
Il foil, disegnato una volta
Ogni lettera si scrive su una canvas fuori schermo con fillText e strokeText insieme, con una penna grossa e gli angoli tondi: il tratto in più è il gonfiore. Da questa sagoma nascono cinque immagini: il foil illuminato (una sfumatura dall’alto in basso, un’ombra interna in basso a destra e una luce interna in alto a sinistra fatte con shadowBlur sul negativo della sagoma, il rigonfiamento lungo il centro dei tratti, la cucitura come un anello appena dentro il bordo), una copia chiara per i riflessi, una scura per quando la lettera gira di taglio, l’ombra sfocata sulla parete e la posizione della valvola, trovata leggendo i pixel: il punto più basso della sagoma vicino al centro.
Un palloncino è un’asticella
Ogni palloncino ha due punti: quello dove tira l’elio, proprio sopra la valvola, e la valvola dove è legato il nastro. Sono tenuti a distanza fissa, e siccome l’elio tira su il primo e il nastro trattiene il secondo, il palloncino sta dritto da solo. Il nastro è una catena di dodici punti che può andare molle ma non allungarsi; in più ogni punto è tenuto entro la sua lunghezza di nastro dal pesetto, così il nastro non si stira mai. Tutto è calcolato a 120 passi al secondo con il metodo delle posizioni (Verlet con vincoli), otto giri di vincoli per passo.
L’aria e il soffio
L’aria è un campo di velocità: una brezza lenta fatta di due onde, il colpo di vento dell’apertura che attraversa la stanza e il puntatore, che passa la sua velocità all’aria intorno con una caduta morbida e una piccola spinta verso fuori. Palloncini e nastri non ricevono spinte: vengono trascinati verso la velocità dell’aria, il palloncino un po’, il nastro di più. Il vento che passa più forte da un lato fa girare il foil sul nastro, che ha una molla di torsione e lo riporta di faccia.
Gli urti e il posto per il nuovo
Ogni palloncino urta come una capsula (un segmento con un raggio) disegnata dentro la sua sagoma, più sottile quando il foil è girato di taglio. Due capsule che si toccano si separano in proporzione al peso, poi si aggiunge il rimbalzo, un giro dato dallo strisciamento e uno schiacciamento elastico. Un palloncino nuovo sale dritto sopra il suo pesetto: se una lettera sta sopra o allo stesso livello, il pesetto si sposta nella corsia libera più vicina (ai lati, fra le parole), altrimenti il palloncino resta appena sotto le parole.
La regia e il movimento ridotto
L’apertura è una timeline GSAP sola: pacchetti che cadono con bounce.out, ogni lettera che si gonfia con elastic.out mentre il nastro si srotola, il colpo di vento. GSAP anima solo numeri (gonfiaggio, lunghezza del nastro, posizione e forza del vento); la fisica gira nel ticker di GSAP. Con il movimento ridotto non si muove niente: il titolo compare in dissolvenza già al suo posto, e un palloncino nuovo fa calcolare in silenzio il nuovo equilibrio, che compare in dissolvenza sopra il vecchio.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TITLE | script.js | 'BIG DAY' | Le parole sui palloncini (fino a sedici lettere): sul telefono ogni parola può andare su una riga sua. |
BLOW | script.js | 1 | Quanto forte soffia il puntatore sui palloncini. |
LIFT | script.js | 1 | Quanto tira l’elio: di più tende i nastri e fa dondolare più svelto. |
AIR | script.js | 1 | Quanto è densa l’aria: 0,4 li lascia dondolare a lungo, 2,5 li calma subito. |
SPIN | script.js | 1 | Quanto facilmente un palloncino di foil gira sul suo nastro. |
BREEZE | script.js | 0.3 | La corrente leggera che li tiene sempre un poco in movimento (0 = aria ferma). |
BOUNCE | script.js | 0.45 | Quanto rimbalza un urto fra due palloncini. |
MAX_EXTRA | script.js | 6 | Quanti palloncini si possono aggiungere prima che il più vecchio si sleghi e voli via. |
Quando usarla
Per la prima pagina di un negozio di palloncini o di articoli per feste, un servizio che organizza compleanni, matrimoni e lanci, un invito online, la pagina di un evento o una promozione di stagione: un titolo da toccare che fa subito festa.
Sul telefono
La stessa fisica con le misure adattate: le parole vanno una per riga, più grandi, e i pesetti delle due righe stanno su due file del pavimento. Si soffia trascinando il dito sulle lettere; un tocco su una lettera le dà un colpetto, un tocco sul cielo lega un palloncino nuovo.
Con il movimento ridotto
Niente si muove e non c’è vento: il titolo compare in dissolvenza già appeso al suo posto. Un palloncino nuovo compare in dissolvenza dove va a finire, con le lettere già riassestate; il più vecchio, oltre il limite, sparisce nella stessa dissolvenza.
Trappole
- Con la valvola al centro, la A e la M avevano il nastro legato a mezz’aria fra le gambe: la valvola va nel punto più basso della sagoma più vicino al centro, e il punto dove tira l’elio va proprio sopra di lei, altrimenti la lettera si appende storta.
- Una catena di Verlet tirata da un palloncino si allunga come un elastico, perché ogni giro di vincoli sposta la correzione di un solo anello: ogni punto del nastro è tenuto anche entro la sua lunghezza dal pesetto, e così il nastro resta della sua misura con pochi giri.
- Mentre salgono dai pacchetti, le lettere vicine si toccano e il gonfiaggio elastico, che passa la misura piena, le fa schizzare di lato fino a scambiarsi di posto: durante la salita non si urtano, e tornano solide appena il nastro è srotolato.
- Un palloncino nuovo con il pesetto proprio sotto una lettera restava incastrato sotto di lei, perché l’urto fra due capsule allineate spinge solo in verticale: il pesetto va nella corsia libera più vicina, oppure il palloncino sta sotto le parole.
- shadowBlur e shadowOffset non seguono la scala della canvas: con la densità doppia dello schermo vanno moltiplicati a mano, se no il gonfiore cambia da uno schermo all’altro.
- GSAP mette il suo transform in linea e cancella quello del CSS: il rimbalzo del pulsante al clic si fa sul pulsante con clearProps, e il gonfiarsi in hover sta sul fondo, un altro elemento.
Librerie
GSAP 3.15.0, Fredoka (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 19 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.
