Il pulsante di vetro liquido
Pulsanti, WebGL, Hover, Fisica
NuovaGratis
Tutti i componenti
La barra di vetro liquido
La barra in basso di un’app, Home, Search, Library e Profile, in vetro smerigliato sopra una striscia di copertine astratte che le scorre piano dietro. La voce scelta sta sotto una lente di vetro liquido trasparente: cambiando voce la lente scivola su una molla e con la velocità si allunga in una goccia, tonda davanti e sottile dietro, poi si riassesta ondeggiando; per tutta la corsa rifrange davvero quello che ha sotto, ingrandisce l’icona e piega le copertine, con l’arcobaleno dell’aberrazione cromatica sul bordo. Si può anche trascinare col dito: tenuta si gonfia, lasciata sceglie la voce più vicina.
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 liquid glass tab bar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/figtree@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the tab bar of an app, in frosted glass, over a strip of album covers that drifts slowly behind it. The tab
you are on sits under a lens of clear liquid glass: going to another tab, the lens glides there, stretching
into a drop as it speeds up, magnifying and bending the icons and the covers under it. It can be dragged
with a finger and let go: it picks the nearest tab. Covers, bar, icons and lens are all drawn in one WebGL
canvas; the links on top are the real, clear, navigation. The icons below are read by the script -->
<div class="tabbar" data-tabbar>
<canvas class="tabbar__scene" aria-hidden="true" data-canvas></canvas>
<nav class="tabbar__nav" aria-label="Main" data-nav>
<a class="tabbar__tab" href="#home" data-tab data-autoclic>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 10.5 12 4l8 6.5V19a1 1 0 0 1-1 1h-4.5v-5.5h-5V20H5a1 1 0 0 1-1-1z"/></svg>
<span>Home</span>
</a>
<a class="tabbar__tab" href="#search" data-tab data-autoclic>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10.5 4.5a6 6 0 1 0 0 12a6 6 0 1 0 0-12zM15 15l4.5 4.5"/></svg>
<span>Search</span>
</a>
<a class="tabbar__tab" href="#library" aria-current="page" data-tab data-autoclic>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4.5v15M9.5 4.5v15M13.6 5.3l4.8 14.2"/></svg>
<span>Library</span>
</a>
<a class="tabbar__tab" href="#profile" data-tab data-autoclic>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12a4 4 0 1 0 0-8a4 4 0 0 0 0 8zM4.5 20c.9-3.7 3.8-5.5 7.5-5.5s6.6 1.8 7.5 5.5"/></svg>
<span>Profile</span>
</a>
</nav>
<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.
18 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 barra di vetro liquido» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una fila di copertine quadrate dai colori accesi, con disegni astratti (un mezzo sole a fasce, righe diagonali, un triangolo, onde, una falce, lastre, archi, una scacchiera inclinata), scorre piano verso sinistra e sfuma ai due lati. Sopra la sua parte bassa galleggia una barra a pillola di vetro smerigliato scuro, con un filo di luce sul bordo alto e un’ombra morbida sulle copertine: dentro, sfocate, si vedono passare le stesse copertine, e sopra ci sono quattro icone con le loro parole, Home, Search, Library e Profile, grigie. Library è sotto una lente di vetro trasparente col bordo luminoso dalla parte della luce: dentro l’icona e la parola sono più grandi, azzurre, e ai bordi il vetro piega le copertine e separa i colori in un arcobaleno sottile. Scegliendo un’altra voce la lente ci corre su una molla: partendo si allunga in una goccia, piena davanti e sottile dietro, e tutto quello che attraversa si gonfia e si piega dentro di lei; arrivando la goccia si riaccorcia, oltrepassa appena e si riassesta in una pillola, e l’icona sotto diventa azzurra mentre quella lasciata torna grigia. Col mouse la voce sotto il puntatore schiarisce. Prendendo la lente col dito o col mouse e trascinandola, si solleva e si gonfia oltre i bordi della barra e segue la mano allungandosi con la velocità; lasciata, va sulla voce più vicina. Le frecce destra e sinistra, Home e End spostano la scelta da tastiera.
Come funziona
Un solo canvas WebGL, due passate
Prima passata, in una texture grande quanto il canvas: le copertine (una striscia dipinta una volta in un canvas 2D e letta con fract, così scorre senza fine), la barra come rettangolo arrotondato a distanza con segno, la sua ombra, il vetro smerigliato e le icone. Seconda passata, sullo schermo: quella texture, piegata dentro la lente. Così la lente piega anche le icone e il vetro smerigliato, non solo lo sfondo.
Il vetro smerigliato senza sfocare a ogni fotogramma
Il vetro della barra non sfoca niente in tempo reale: legge una seconda copia della striscia, già sfocata una volta dal canvas (filter blur, ripetuta ai lati perché la sfocatura giri anche intorno alle estremità; dove filter non c’è, una copia a un ottavo della misura ammorbidita dal filtro lineare), cinque volte intorno al punto, e la scurisce col colore del vetro. Un filo di luce segue il bordo, più forte in alto.
La lente come campo di distanza
La lente è una capsula irregolare (due cerchi di raggio diverso e le rette tangenti a entrambi, dalla formula di Inigo Quilez), girata nel verso in cui va. La lunghezza fra i due centri e i due raggi vengono da molle: ferma è una pillola; veloce si allunga, il raggio davanti cala poco e quello dietro di più, così diventa una goccia. Vicino alle estremità della barra si allunga di meno, per non uscirne.
La rifrazione dal bordo
La normale si ricava dal campo stesso, con quattro letture vicine. Dentro la lente un profilo a cupola (piatto al centro, sempre più ripido verso il bordo, come un quarto di cerchio) dice quanto il vetro si spinge fuori a prendere quello che sta oltre il bordo, lungo la normale; il centro ingrandisce di ZOOM. Il rosso, il verde e il blu si leggono a tre distanze diverse (PRISM): ai bordi i colori si separano. Sopra, un filo di luce dalla parte della luce, uno più debole dall’altra, un riflesso morbido e un anello scuro appena fuori.
Le molle e la goccia
La posizione della lente è una molla verso la voce scelta (SPRING), integrata a passi di 1/240 di secondo con il passo del fotogramma limitato a 1/30. L’allungamento insegue la velocità su una seconda molla più vivace, così arrivando la goccia si riaccorcia oltre e ondeggia. Trascinando, la molla della posizione si irrigidisce sul dito e una terza molla solleva e gonfia la lente; lasciata, sceglie la voce più vicina. Le icone prendono il colore della scelta in proporzione a quanto la lente è vicina.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
DRIFT | script.js | 16 | Quanto scorrono veloci le copertine dietro la barra, in pixel al secondo. |
SPRING | script.js | [300, 22] | La molla su cui scivola la lente: rigidità e smorzamento (più basso, più oltrepassa). |
STRETCH | script.js | 0.55 | Quanto la lente si allunga in una goccia con la velocità. |
BEND | script.js | 16 | Quanto il bordo della lente si spinge fuori a prendere quello che sta oltre, in pixel. |
BEVEL | script.js | 18 | Quanto è largo il bordo curvo della lente, in pixel. |
ZOOM | script.js | 0.22 | Quanto ingrandisce il centro della lente. |
PRISM | script.js | 0.28 | Quanto si separano rosso e blu sul bordo: l’arcobaleno. |
Quando usarla
Per la barra di navigazione in basso di un’app o di un sito pensato per il telefono, soprattutto dove sotto la barra scorre contenuto colorato: musica, foto, video, un negozio. Da tre a cinque voci; la striscia di copertine fa parte della demo e si sostituisce col contenuto vero dell’app dipinto nella stessa texture.
Sul telefono
La barra prende la larghezza dello schermo meno 32 pixel e le voci si dividono lo spazio; il canvas si disegna a densità 2. Il tocco su una voce ci manda la lente, e il dito la può trascinare lungo la barra (touch-action: pan-y, così in verticale la pagina scorre ancora); il passaggio del mouse che schiarisce una voce sul telefono non c’è.
Con il movimento ridotto
Le copertine stanno ferme e il canvas si ridisegna solo quando cambia qualcosa. La lente non viaggia e non si allunga: svanisce dove era e ricompare sulla voce nuova; trascinata segue il dito senza gonfiarsi né allungarsi.
Trappole
- In GLSL una uniform e una funzione non possono avere lo stesso nome: la funzione che legge la striscia si chiamava come la uniform strip e lo shader non compilava.
- Sfocare le copertine a ogni fotogramma per il vetro smerigliato costava troppo con WebGL senza scheda grafica: si legge una copia sfocata una volta sola, e la sfocatura del canvas si ripete ai lati perché la striscia, che gira, non mostri una cucitura.
- La copia a un ottavo della misura, ammorbidita solo dal filtro lineare, mostrava una griglia di quadretti nel vetro: si usa solo dove il canvas non sa sfocare.
- Trascinando un link col mouse partiva il trascinamento del browser e annullava quello della lente: i link hanno draggable false e dragstart è bloccato.
- La goccia allungata, arrivando a una voce in fondo alla barra, ne usciva: vicino alle estremità l’allungamento si limita allo spazio che resta.
- Con la formula della capsula irregolare, se i due centri coincidono e i raggi sono diversi si divide per zero: la distanza fra i centri non scende mai sotto la differenza dei raggi.
Librerie
GSAP 3.15.0, Figtree (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 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.
