Il pulsante dell’intelligenza
Pulsanti, WebGL, SVG, Hover, Testo
NuovaGratis
Tutti i componenti
La nav coi palloncini
La barra in alto di uno studio che organizza feste: la pagina in cui si è è scritta in lettere-palloncino di mylar color oro rosa, gonfie, lucide, con la cucitura sul bordo e l'ombra morbida sotto. Scegliendo un'altra voce il vecchio palloncino si sgonfia, si raggrinzisce e torna testo piatto, e il nuovo si gonfia lettera per lettera con un rimbalzo e un ondeggiare. La luce del foil non è dipinta: la calcola un filtro SVG sulla forma delle lettere.
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 letters nav</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">
<!-- the top bar of a studio that throws parties. The page you are on is spelled in foil balloon letters, blown up
with the light of real mylar: a filter turns the shape of each letter into a height map and lights it. Choosing
another link the old balloon lets its air out and goes flat, the new one fills letter by letter -->
<header class="bar" data-bar>
<a class="brand" href="#" aria-label="Festoon, home">Festoon</a>
<nav class="strip" aria-label="Main" data-strip>
<ul class="list" data-list>
<li><a class="link" href="#" aria-current="page" data-link><span class="link__word" data-word>Parties</span></a></li>
<li><a class="link" href="#" data-link data-autoclic><span class="link__word" data-word>Weddings</span></a></li>
<li><a class="link" href="#" data-link><span class="link__word" data-word>Venues</span></a></li>
<li><a class="link" href="#" data-link data-autoclic><span class="link__word" data-word>Gallery</span></a></li>
<li><a class="link" href="#" data-link data-autoclic><span class="link__word" data-word>Contact</span></a></li>
</ul>
</nav>
<a class="cta" href="#"><span class="cta__label">Plan an event</span></a>
</header>
</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.
31 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 «La nav coi palloncini» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una barra bianca alta 64 pixel con gli angoli tondi e un'ombra morbida: a sinistra il nome Festoon, al centro cinque voci in un carattere tondo, Parties, Weddings, Venues, Gallery e Contact, a destra il pulsante scuro Plan an event. Le voci sono testo piatto e grigio, tranne quella della pagina corrente, scritta in lettere-palloncino di mylar color oro rosa: lettere grasse e tonde, gonfie, con i riflessi bianchi lungo i rigonfiamenti, una fascia più scura dove il metallo riflette la stanza, le piccole pieghe vicino ai bordi, una cucitura piatta tutto intorno e un'ombra morbida sulla barra. All'arrivo le cinque voci sono piatte e la corrente si gonfia una lettera dopo l'altra: ogni lettera cresce, ingrassa, prende la luce, va un poco oltre e torna, sale appena e ondeggia, mentre la parola si allarga dal centro senza che una lettera copra l'altra. Scegliendo un'altra voce il vecchio palloncino si sgonfia partendo dall'ultima lettera: le lettere si afflosciano, si inclinano un poco, si abbassano, si raggrinziscono e perdono lucentezza, finché tornano testo piatto; un attimo dopo la voce nuova si gonfia allo stesso modo. Col mouse su una voce le sue lettere si gonfiano appena e prendono un po' di luce; sulla voce corrente il palloncino si tende un poco. Premendo, la voce si gonfia un po' di più e il palloncino corrente si schiaccia; cliccando la voce corrente il palloncino fa un piccolo sobbalzo. Quando niente si muove il filtro non lavora.
Come funziona
Lettere che si gonfiano col font variabile
Ogni voce ha un SVG con una lettera per elemento text, due volte: una copia piatta senza filtro e una nel gruppo col filtro del foil. Ogni lettera ha la sua aria a, da 0 (piatta) a 1 (palloncino) e un po' oltre nel rimbalzo: la scala va dalla misura del testo piatto (16 pixel) a quella del palloncino (26), il peso di Fredoka da 460 a 660 e la larghezza da 100 a 108 per cento. La copia del foil compare con l'aria (opacità 2,2·a) e quella piatta sparisce di altrettanto, così la parola resta sempre una sola.
Le lettere una accanto all'altra
Lo spazio di ogni lettera si misura una volta, sulla parola intera (getStartPositionOfChar, quindi con la crenatura), col peso piatto e con quello pieno. A ogni fotogramma ogni lettera prende lo spazio che ha alla sua aria e le lettere si mettono in fila, centrate: una lettera già piena spinge le vicine invece di coprirle, e la parola cresce dal centro. La voce ha da subito la larghezza della parola gonfia, così niente intorno si sposta.
La luce del foil calcolata dal filtro
Il filtro prende l'alfa delle lettere, lo sfoca appena e lo ritaglia con una rampa (feComponentTransfer) per arrotondarlo come un palloncino; poi lo sfoca di circa un decimo della misura delle lettere: è la mappa d'altezza, una cupola dentro ogni tratto. Su quella cupola una luce diffusa (feDiffuseLighting, da in alto a sinistra) passa per una mappa di colori a tabella, scuro, oro rosa, chiaro, di nuovo oro rosa, chiaro e bianco: la fascia in mezzo è la stanza riflessa nel mylar. Sopra si somma una luce speculare (feSpecularLighting) da una lampada puntiforme sopra la barra, quindi ogni lettera ha il suo riflesso in un posto diverso. Intorno, una dilatazione di 0,8 pixel tolta la forma è la cucitura piatta, e la forma sfocata e spostata è l'ombra.
Grinze e pieghe
Un rumore frattale (feTurbulence) ripiegato da una tabella a zig-zag diventa una rete di pieghe, e si moltiplica per la cupola con un feComposite arithmetic: il suo peso è 4·a·(1−a), quindi le grinze ci sono a metà, quando il palloncino si sgonfia (piene) o si gonfia (a metà), e spariscono a palloncino pieno. Un secondo rumore più fine e allungato, moltiplicato per una fascia vicino al bordo presa dalla cupola, fa le piccole pieghe accanto alle cuciture di un palloncino pieno.
Le molle
L'aria di ogni lettera è una molla con lo smorzamento calcolato da BOUNCE (ζ = −ln B / √(π² + ln² B)) e la pulsazione da FILL, integrata a quattro passi per fotogramma nel ticker di GSAP, col passo limitato a 1/30 di secondo. Le lettere partono a STAGGER secondi una dall'altra; partendo ricevono una spinta in alto e una di rotazione, ognuna con la sua molla poco smorzata: è l'ondeggiare. Sgonfiandosi la molla è critica (senza rimbalzo), e a metà la lettera si allarga, si accorcia, si inclina di 4-10 gradi e scende di qualche pixel. Quando tutte le molle sono ferme il ciclo esce dal ticker e il filtro non si ridisegna più.
Mano, tasti e telefono
Puntando una voce col mouse, o raggiungendola con Tab, l'aria sale a HOVER; premendo, un po' di più, e il palloncino corrente scende a 0,9. Le frecce spostano il fuoco fra le voci, Home ed End vanno ai capi, Invio e Spazio scelgono, e aria-current passa subito alla voce nuova. Al telefono le voci scorrono di lato dentro la barra, che sfuma dal lato dove ce ne sono altre, e la voce scelta viene al centro; il dito giù fa il gonfiaggio leggero del mouse.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
STAGGER | script.js | 0.07 | I secondi fra una lettera che si gonfia e la seguente. |
FILL | script.js | 0.55 | Più o meno quanti secondi ci mette una lettera a gonfiarsi. |
BOUNCE | script.js | 0.3 | Quanto una lettera va oltre gonfiandosi, come frazione della strada (0, per niente). |
DEFLATE | script.js | 1 | Più o meno quanti secondi ci mette il vecchio palloncino a tornare piatto. |
HOVER | script.js | 0.26 | Quanto si gonfiano le lettere di una voce puntata, da 0 (piatte) a 1 (palloncino). |
SWAY | script.js | 6 | Quanto ondeggiano le lettere mentre l'aria entra, in gradi. |
SAG | script.js | 1 | Quanto le lettere si afflosciano e scendono sgonfiandosi (0, per niente). |
RELIEF | script.js | 5 | Quanto sembrano gonfi i palloncini: l'altezza del rilievo su cui cade la luce. |
SHINE | script.js | 2 | Quanto sono forti i riflessi bianchi sul foil. |
WRINKLES | script.js | 1 | Quanto si raggrinzisce il foil a metà, sgonfiandosi o gonfiandosi (0, liscio). |
CRIMPS | script.js | 0.25 | Quanto sono profonde le piccole pieghe vicino alle cuciture di un palloncino pieno (0, nessuna). |
Quando usarla
Per la testata di chi fa feste ed eventi: uno studio di wedding planning, chi allestisce compleanni e baby shower, un negozio di palloncini e addobbi, una sala per le feste, una pasticceria per le torte di compleanno, un sito di inviti. Sta bene dove le voci sono poche e corte, su una pagina chiara; il colore del foil si cambia nelle variabili, dall'oro rosa all'argento o a un colore deciso.
Sul telefono
Sotto i 900 pixel il pulsante sparisce; al telefono la barra resta alta 64 pixel, larga quanto lo schermo meno 32 (358 a 390), le lettere sono più piccole (15 pixel piatte, 23 gonfie) e le voci scorrono di lato dentro la barra, che sfuma dal lato dove ce ne sono altre nascoste. La voce scelta scivola al centro mentre il vecchio palloncino si sgonfia e il nuovo si gonfia; il dito giù su una voce la gonfia appena, come il mouse. Sotto i 360 pixel il nome lascia il posto alle voci.
Con il movimento ridotto
Niente gonfiaggio, niente rimbalzi, niente ondeggiare e niente lettere che si afflosciano: il palloncino compare già gonfio sulla voce scelta con una dissolvenza, dopo che la parola piatta è sfumata, e quello vecchio sfuma prima di lasciare il posto al testo piatto, così le due versioni non si vedono mai insieme. Le voci puntate si scuriscono soltanto, e il pulsante non si allarga né si schiaccia.
Trappole
- Il primo filtro dava a tutte le lettere una buccia martellata, piena di macchie: nel feComposite arithmetic il rumore era il primo ingresso e k2 moltiplica proprio quello, quindi l'altezza era il rumore e non la cupola. Ora la cupola è il primo ingresso, il rumore entra solo con k1 (cupola per rumore), e senza grinze la luce legge direttamente la cupola.
- Con le lettere al peso 700 e gonfiate dal filtro, gli occhielli della e si chiudevano e Weddings si leggeva Waddings: il peso pieno è 660 e la rampa che arrotonda la forma è centrata sul bordo vero della lettera, così arrotonda senza ingrassare.
- Ogni lettera andava dal suo posto piatto al suo posto gonfio per conto suo: una lettera già piena accanto a una ancora piatta la copriva per un attimo. Ora le lettere si mettono in fila a ogni fotogramma con lo spazio che hanno alla loro aria.
- Con le voci larghe quanto la parola gonfia, cinque voci, il nome e il pulsante non stavano in 900 pixel e Contact finiva fuori: la barra è larga fino a 1000 e lo spazio intorno alle parole è più stretto.
- Col movimento ridotto la dissolvenza incrociata mostrava insieme la parola piatta e il palloncino, una sopra l'altro: ora prima sfuma una e poi compare l'altro.
- Il contorno del fuoco stretto intorno alla voce toccava le lettere gonfie: ora gira tre pixel fuori dalla voce, e l'elenco ha quattro pixel d'aria ai lati perché non si tagli.
Librerie
GSAP 3.15.0, Fredoka (font variabile, con gli assi del peso e della larghezza) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 8 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.
