Il menu che si arrotola
Menu, 3D, WebGL, Fisica
NuovaGratis
Tutti i componenti
Il pulsante gonfiabile
Il pulsante Join the waitlist fatto di vinile lucido, come un materassino da piscina, con le lettere gonfie saldate sopra. A riposo è un po’ sgonfio, basso e pieno di grinze; sotto il puntatore si gonfia davvero: i bordi si arrotondano, le grinze si spianano, la cucitura si tende e il riflesso scivola sulla plastica bombata. Premuto si schiaccia dove c’è il dito; cliccato, una pompa lo riempie in tre colpi, sobbalza e le lettere si sgonfiano e rigonfiano in You’re on the list.
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 inflatable button</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="stage">
<!-- the inflatable: a pill of glossy vinyl, like a pool toy, with puffed letters welded on top. It is drawn in a
canvas from a height map: the pill's distance from its own edge and the letters' distance from theirs, raised
to a power that changes with the air inside, then lit like shiny plastic. At rest it is a little soft and
creased; the pointer blows it up, a press squashes it, a click pumps it full -->
<div class="float" data-float>
<div class="float__body" data-body>
<span class="float__shadow" aria-hidden="true" data-shadow></span>
<button class="float__btn" type="button" aria-describedby="float-note" data-btn data-autoclic>
<canvas class="float__vinyl" aria-hidden="true" data-canvas></canvas>
<span class="sr" data-label>Join the waitlist</span>
</button>
</div>
<p class="float__note" id="float-note" data-note>Early access opens in spring. No spam.</p>
<p class="sr" aria-live="polite" data-live></p>
</div>
</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 pulsante gonfiabile» da Animorio e adattala al mio sitoCosa fa
Su una pagina bianca una pillola di vinile rosa, lucida come un giocattolo da piscina, con la scritta Join the waitlist in lettere color crema gonfie e in rilievo; sotto, in grigio, Early access opens in spring. No spam. A riposo la pillola è un po’ sgonfia: è bassa, il bordo non è del tutto dritto, la plastica fa pieghe di traverso e piccole grinze lungo la cucitura saldata che corre poco dentro il bordo. Portandoci sopra il puntatore si gonfia sulla sua molla, con un piccolo ondeggiare: si alza, le estremità diventano tonde come un tubo, le grinze spariscono, la cucitura si tende e il lungo riflesso della finestra scivola sulla superficie bombata seguendo il puntatore. Premendo, la plastica si schiaccia sotto il dito e l’aria gonfia i lati, la pillola si allarga e si abbassa. Al clic sotto c’è scritto Saving your spot e la pillola si riempie in tre colpi di pompa, ognuno con il suo sussulto, finché è tesa e lucidissima; allora fa un salto, atterra schiacciandosi, e le lettere si sgonfiano e rinascono come You’re on the list con una spunta, mentre la riga sotto diventa verde: You are in. We will email you the day we open. Dopo qualche secondo l’aria esce piano e torna Join the waitlist.
Come funziona
Una mappa d’altezza dalla forma
L’altezza della pillola nasce dalla distanza di ogni pixel dal bordo, calcolata esatta per la capsula (il raggio meno la distanza dal segmento in mezzo). Divisa per il raggio diventa s, da 0 sul bordo a 1 nel mezzo, e l’altezza è s(2−s) elevato a una potenza che cambia con l’aria: 1,75 da sgonfia, una forma bassa che scende piano verso il bordo; 0,5 da piena, cioè un arco di cerchio, un tubo vero; meno di 0,5 quando è tesa. Una tabella di 1024 valori la ricalcola una volta per fotogramma.
Le lettere gonfie, dalla trasformata di distanza
Le parole si scrivono una volta su un canvas nascosto. La trasformata di distanza di Felzenszwalb, una passata per colonne e una per righe, dà a ogni pixel dentro le lettere la sua distanza dal bordo del tratto, corretta di mezzo pixel con la copertura. Su ogni tratto diventa un tubo (la radice di 1−(1−u)²) e due sfocature a scatola sciolgono la cresta in mezzo: il campo di distanza sfocato fa delle lettere dei salsicciotti morbidi, alti quanto è gonfia la pillola.
Grinze, cucitura e ditata
Le grinze sono pieghe: segmenti messi a caso di traverso sul tubo e piccoli arricciamenti perpendicolari alla cucitura, ognuno col profilo di una cresta accanto a un solco (la derivata di una campana), che svaniscono col gonfiaggio. La cucitura è un solco che si fa stretto e poco profondo quando la plastica si tende; il bordo da sgonfio vaga di un pixel e mezzo. La pressione è una campana che scende sotto il dito e alza un poco tutto il resto.
La luce del vinile in uno shader
I campi fissi salgono sulla scheda grafica in due texture float, lette pixel per pixel con texelFetch. Il fragment shader calcola l’altezza del pixel e dei quattro vicini, prende la normale dalla pendenza e accende la plastica: luce diffusa con un ambiente più forte verso l’alto, un’occlusione dove la superficie fa conca, l’ombra delle lettere, due speculari di Phong e il riflesso di una finestra lunga, che si sposta col puntatore. Senza WebGL 2 lo stesso calcolo gira nello script, a densità 1.
L’aria è una molla
Quanto è gonfia la pillola è un numero mosso da una molla poco smorzata (SPRING), così ogni cambio ondeggia; la pressione ha la sua molla più rigida. La pompa è una timeline GSAP che alza il traguardo a colpi e la molla li segue con un sussulto. Il box intero si alza, si schiaccia e salta con trasformazioni CSS, l’ombra resta sul foglio e si allarga. Quando tutto è fermo non si ridisegna niente.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
REST | script.js | 0.22 | Quanto è gonfia la pillola a riposo, da 0 (piatta) a 1 (un tubo tondo). |
HOVER | script.js | 0.8 | Quanto si gonfia sotto il puntatore. |
FULL | script.js | 1.12 | Quanto la gonfia la pompa al clic (sopra 1 è tesa). |
SPRING | script.js | [130, 8] | L’aria dentro: rigidità e smorzamento (più basso, più ondeggia). |
CREASES | script.js | 1 | Quanto sono profonde le grinze del vinile sgonfio. |
GLOSS | script.js | 1 | Quanto è lucido il vinile. |
PUMPS | script.js | 3 | In quanti colpi di pompa si riempie al clic. |
RESET | script.js | 4.5 | I secondi prima che lasci uscire l’aria e torni pronto (0 = resta gonfio). |
LABEL | script.js | 'Join the waitlist' | Le parole sulla pillola. |
JOINED | script.js | "You're on the list" | Le parole quando ci si è iscritti. |
Quando usarla
Per il pulsante di una pagina di lancio, una lista d’attesa, un’iscrizione a una newsletter o un prodotto estivo, giocoso: dove il clic deve essere un piccolo premio. Sta bene da solo su un fondo chiaro, con un tono allegro.
Sul telefono
La pillola si scala sulla larghezza dello schermo (a 390 pixel è larga 314) e la tela segue la densità dello schermo fino a 2. Il dito appoggiato la gonfia e la schiaccia dove tocca; la luce non segue niente, resta in alto a sinistra.
Con il movimento ridotto
Niente ondeggiamenti né salti: l’aria cambia in fretta e in modo uniforme, la pillola non si sposta e non si schiaccia, la luce sta ferma. La pompa riempie lo stesso e le lettere cambiano in dissolvenza, senza rimbalzo.
Trappole
- Calcolata nello script, la luce di 140 mila pixel costava troppo a ogni fotogramma: il calcolo è passato in uno shader WebGL 2, e lo script resta solo come ripiego, a densità 1.
- Con una texture a 8 bit la pendenza della mappa d’altezza faceva gradini, e la luce mostrava bande: i campi salgono come float a 32 bit, letti con texelFetch senza filtro (un pixel di texture per un pixel di tela).
- La trasformata di distanza lascia una cresta lungo il mezzo di ogni tratto, e le lettere sembravano tetti: due sfocature a scatola la sciolgono in un rigonfiamento tondo.
- Le grinze fatte con seni regolari sembravano squame: sono diventate pieghe singole, messe a caso, ognuna col profilo di una cresta accanto a un solco.
- Il riflesso bianco aggiunto ai bordi e in basso rendeva la plastica grigia: i riflessi dell’ambiente prendono un po’ del colore del vinile, solo lo speculare della lampada resta bianco.
- Il passo di GSAP si allunga se il computer è lento e le molle esplodevano: la fisica fa quattro piccoli passi per fotogramma, col passo limitato a 1/30 di secondo.
Librerie
GSAP 3.15.0, Fredoka (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 5 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
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.
