Il pulsante di vetro liquido
Pulsanti, WebGL, Hover, Fisica
NuovaGratis
Tutti i componenti
La barra della piscina
La barra in basso dell'app di un hotel termale fatta come una striscia d'acqua di piscina incassata nella pietra bianca. Sotto l'acqua ci sono le tessere del mosaico con la rete di luce che il sole disegna sul fondo, e il sole cade sulla voce scelta. Le icone galleggiano. Un tocco fa cadere una goccia dove arriva il dito: i cerchi corrono, rimbalzano sulla pietra, piegano le tessere, raccolgono la luce in righe chiare e fanno dondolare le icone, mentre il sole scivola sulla voce nuova. Il mouse lascia una piccola scia. L'acqua è un'equazione delle onde su una griglia, disegnata in WebGL.
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 pool tab bar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jost@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the tab bar of a thermal spa hotel's app, made as a strip of pool water set in white stone. Under the water
lie small mosaic tiles, with the net of light the sun throws on the bottom of a pool, and the sun falls on
the tab you are on. The icons float on the water. A tap drops a ripple where the finger lands and the sun
glides to the new tab; a mouse moving over the water leaves a wake. The water is a wave simulation on a
small grid, drawn in WebGL with the tiles bent by it; the buttons on top are the real navigation -->
<nav class="pool" aria-label="Main" data-pool>
<canvas class="pool__water" aria-hidden="true" data-water></canvas>
<span class="pool__lip" aria-hidden="true"></span>
<button class="tab" type="button" aria-current="page" data-tab>
<span class="tab__float" data-float>
<svg class="tab__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 18.5v-9M3.5 14.5h17v4M20.5 14.5v-2.3a2.7 2.7 0 0 0-2.7-2.7H11v5M7.4 12.2a1.7 1.7 0 1 0 0-.01"/></svg>
</span>
<span class="tab__name">Stay</span>
</button>
<button class="tab" type="button" data-tab data-autoclic>
<span class="tab__float" data-float>
<svg class="tab__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 9.5c1.5 0 1.5-1.2 3-1.2s1.5 1.2 3 1.2 1.5-1.2 3-1.2 1.5 1.2 3 1.2 1.5-1.2 3-1.2 1.5 1.2 3 1.2M3 14c1.5 0 1.5-1.2 3-1.2s1.5 1.2 3 1.2 1.5-1.2 3-1.2 1.5 1.2 3 1.2 1.5-1.2 3-1.2 1.5 1.2 3 1.2M3 18.5c1.5 0 1.5-1.2 3-1.2s1.5 1.2 3 1.2 1.5-1.2 3-1.2 1.5 1.2 3 1.2 1.5-1.2 3-1.2 1.5 1.2 3 1.2"/></svg>
</span>
<span class="tab__name">Pools</span>
</button>
<button class="tab" type="button" data-tab>
<span class="tab__float" data-float>
<svg class="tab__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19.5c-2.6-1.6-3.9-4.2-3.9-7.2S9.6 6.6 12 4.5c2.4 2.1 3.9 4.8 3.9 7.8s-1.3 5.6-3.9 7.2zM12 19.5c-3.6.2-6.9-1.3-8.5-4.4 1.5-1 3.1-1.5 4.7-1.5M12 19.5c3.6.2 6.9-1.3 8.5-4.4-1.5-1-3.1-1.5-4.7-1.5"/></svg>
</span>
<span class="tab__name">Spa</span>
</button>
<button class="tab" type="button" data-tab data-autoclic>
<span class="tab__float" data-float>
<svg class="tab__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3.5v5.2a2 2 0 0 0 4 0V3.5M9 3.5v17M16.5 20.5V3.5c-2 1-3.2 3.4-3.2 6.4 0 2 .9 3.3 3.2 3.5"/></svg>
</span>
<span class="tab__name">Dining</span>
</button>
<button class="tab" type="button" data-tab data-autoclic>
<span class="tab__float" data-float>
<svg class="tab__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 11.6a3.6 3.6 0 1 0 0-7.2 3.6 3.6 0 0 0 0 7.2zM4.8 20c.9-3.6 3.7-5.6 7.2-5.6s6.3 2 7.2 5.6"/></svg>
</span>
<span class="tab__name">You</span>
</button>
</nav>
</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.
20 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 della piscina» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una barra alta 70 pixel e larga 420, con gli angoli tondi, fatta come una vasca: un bordo di pietra bianca largo 5 pixel e dentro acqua verde petrolio sopra un mosaico di tessere turchesi con le fughe chiare, e sul fondo la rete di luce mobile delle piscine. Cinque voci in bianco con le icone sottili: Stay (un letto), Pools (tre onde), Spa (un fiore di loto), Dining (forchetta e coltello) e You. Sotto la voce scelta il sole fa la rete più chiara e calda, e l'icona e il nome sono pieni; le altre sono più velate. All'arrivo la vasca sale di qualche pixel, le icone compaiono una dopo l'altra, il sole si accende su Stay e lì cade una goccia. Toccando un'altra voce cade una goccia proprio dove arriva il dito: i cerchi si allargano, piegano le fughe delle tessere, accendono righe di luce sui fronti, rimbalzano sui bordi di pietra e fanno salire, scendere e inclinare le icone che incontrano; intanto il sole scivola sulla voce nuova, va appena oltre e torna. Poi l'acqua si calma piano e la rete di luce rallenta fino a fermarsi. Passando col mouse sull'acqua resta dietro una piccola scia; da tastiera la voce col fuoco ha un contorno bianco, e passando con le frecce cade una goccina sulla voce nuova.
Come funziona
L'acqua è un'equazione delle onde
Sotto la barra c'è una griglia di celle da 4 pixel (circa 106 per 19 a 420 pixel). A ogni passo l'altezza nuova di una cella è due volte quella di adesso, meno quella di prima, più WAVE_SPEED per il laplaciano (quanto le quattro vicine sono più alte o più basse), il tutto per DAMPING. I bordi copiano la cella accanto, così le onde rimbalzano sulla pietra. I passi sono 120 al secondo qualunque sia la frequenza dello schermo, e la somma delle altezze dice quando l'acqua è calma.
La goccia
Un tocco scava nella griglia una conca a campana larga 9 pixel, proprio dove sta il dito (pointerdown, che arriva prima del clic); il clic dell'anteprima e la tastiera, che non hanno un punto, la fanno cadere al centro della voce. Il mouse che si muove sull'acqua lascia conche piccole ogni 3 pixel di strada, più fonde se va veloce: la scia.
Dalla griglia allo shader
A ogni fotogramma le altezze vanno in una texture LUMINANCE di un byte per cella, letta con il filtro lineare. Lo shader prende la pendenza dalle celle vicine e sposta di altrettanto il punto in cui legge le tessere e la luce: è la rifrazione, che fa ondeggiare le fughe sotto i cerchi. Il laplaciano delle altezze dice dove la superficie fa da lente e raccoglie la luce in righe chiare, e la normale dà un piccolo riflesso bianco sulle creste.
Il sole e la rete di luce
La rete di luce sul fondo è disegnata nello shader con due famiglie di righe ondulate, chiare dove la loro somma passa per zero, che si muovono con una fase. Il sole è una macchia morbida che moltiplica la rete e la scalda; la sua posizione segue il centro della voce scelta su una molla (SUN_SPRING). La fase avanza solo finché l'acqua si muove e rallenta con lei, quindi la rete si ferma piano invece di bloccarsi di colpo.
Le icone che galleggiano
Ogni icona sta in un involucro che a ogni fotogramma legge l'altezza e la pendenza dell'acqua sotto di sé: sale e scende di tre pixel per unità d'altezza e si inclina con la pendenza, fino a 14 gradi. L'icona dentro risponde al puntatore col CSS, quindi le due trasformazioni non si pestano.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SPLASH | script.js | 1.4 | Quanto forte cade nell'acqua la goccia di un tocco. |
WAKE | script.js | 0.3 | Quanto il mouse che si muove sull'acqua la smuove (0, per niente). |
DAMPING | script.js | 0.986 | Quanto durano le onde: più vicino a 1, più a lungo. |
WAVE_SPEED | script.js | 0.24 | Quanto corrono veloci le onde nella vasca (al massimo 0,45). |
REFRACTION | script.js | 6 | Di quanto le onde piegano le tessere, in pixel. |
SUN_SPRING | script.js | [90, 15] | La molla su cui il sole scivola su una voce: quanto è rigida e quanto è frenata. |
TILE | script.js | 13 | Quanto è grande una tessera del mosaico, in pixel. |
Quando usarla
Per la barra in basso dell'app di chi ha a che fare con l'acqua e col benessere: un hotel termale, una spa, una piscina, un lido, un resort al mare, una scuola di nuoto. Il colore dell'acqua, delle tessere, delle fughe e del sole stanno nelle variabili: con tessere bianche e acqua chiara diventa una piscina di città, con tessere scure un bagno turco.
Sul telefono
La barra è larga al massimo 420 pixel e sul telefono si stringe allo schermo con 16 pixel di margine per lato più il bordo di pietra (358 su un telefono di 390); resta alta 70 e ogni voce è un bersaglio di circa 69 per 70 pixel. La goccia cade dove tocca il dito, e la griglia dell'acqua si rifà alla misura nuova.
Con il movimento ridotto
L'acqua resta ferma: niente gocce, niente scia e icone che non dondolano. Scegliendo un'altra voce il sole è già su di lei e la vasca si ridisegna in una breve dissolvenza; la rete di luce resta ferma. All'apertura la barra compare in dissolvenza.
Trappole
- La pendenza delle onde, in unità d'altezza per pixel, è piccola (circa 0,15 per una goccia): spostando le tessere di sei volte la pendenza, la rifrazione era di un pixel e non si vedeva. Ora lo spostamento è di quaranta volte, circa sei pixel sotto un'onda.
- L'entrata delle icone con un tween di GSAP sulla loro posizione litigava col galleggiamento, che scrive la trasformazione a ogni fotogramma: le icone saltavano. Ora l'entrata è solo una dissolvenza.
- Fuori dal sole la rete di luce era forte quanto sotto, e non si capiva quale voce fosse scelta: ora fuori è un decimo e sotto il sole più del doppio, con un colore più caldo.
- Con la rete che si muoveva sempre, la barra non smetteva mai di disegnare: ora la sua velocità segue l'energia dell'acqua e scende piano a zero, e il ciclo si ferma.
Librerie
GSAP 3.15.0, Jost (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,6 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
