La nav col riflettore
Navigazione, SVG, Fisica, Hover
NuovaGratis
Tutti i componenti
Il pulsante d'acqua
Un pulsante con dentro dell'acqua: a riposo un filo d'acqua sul fondo, quando arriva il mouse l'acqua sale e la sua superficie, una catena di molle, si muove con la mano, con onde che corrono e rimbalzano sulle pareti. Una pressione la fa schizzare fino all'orlo, e dove c'è l'acqua le parole diventano scure.
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 water button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/funnel-display@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the water button: water fills it when the mouse comes in, its surface moves with the hand, and a press makes
it splash; where the water is, the words turn dark -->
<div class="water" data-water data-autoclic>
<button class="water__btn" type="button" data-btn>
<svg class="water__art" aria-hidden="true" data-art></svg>
<span class="water__word" data-word>Get started</span>
</button>
<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.
12 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 d'acqua» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un pulsante a pillola scuro con un bordo sottile, la scritta Get started e una freccia; sul fondo un filo d'acqua blu che ondeggia piano, con una riga di luce sulla superficie. All'arrivo il pulsante sale dal basso e l'acqua entra con un'onda. Quando il mouse entra l'acqua sale fin oltre la metà, e muovendo il mouse da una parte all'altra la superficie lo segue: sotto la mano si apre un avvallamento, l'acqua si ammucchia dalla parte in cui la mano va e le onde corrono fino alle pareti e tornano indietro. Le parole e la freccia, chiare sul fondo scuro, diventano blu scuro dove le copre l'acqua, anche a metà di una lettera. Premendo, la superficie si abbassa nel punto premuto e risale in onde, l'acqua schizza fino all'orlo per mezzo secondo, e la scritta esce in alto mentre Let's go entra dal basso; dopo 1,6 secondi torna Get started. Quando il mouse esce l'acqua torna al filo sul fondo.
Come funziona
Due scritte, una bagnata
Il pulsante è disegnato in un SVG: la pillola, la scritta chiara con la freccia, e dentro un clip a forma di pillola l'acqua con una sfumatura dal celeste della superficie al blu del fondo. Una seconda scritta, scura, sta in un clip che ha la stessa forma dell'acqua: dove c'è l'acqua si vede lei. La scritta vera del pulsante resta nell'HTML per i lettori di schermo, nascosta alla vista.
La superficie a molle
La superficie è fatta di 48 punti, e ognuno è una molla tirata dai due vicini (TENSION per la differenza), riportata al livello e frenata; alle due pareti il vicino mancante è il punto stesso, così le onde rimbalzano. Su gsap.ticker il passo di ogni fotogramma si divide in quattro, e la linea passa per i punti con curve quadratiche che finiscono a metà fra un punto e il successivo. Due onde lente sommate tengono viva l'acqua anche quando nessuno la tocca.
Il livello
Anche il livello è una molla (60 per la distanza dalla meta, meno 9 per la velocità): la meta è REST a riposo, LEVEL con il mouse sopra o il fuoco dato coi tasti, e 1,08 dell'altezza per mezzo secondo dopo una pressione. Un dito non ha l'hover: dopo un tocco l'acqua resta su per 1,6 secondi.
La mano che mescola
A ogni movimento si misura la velocità della mano di traverso, in pixel al secondo (fino a 1800, per SLOSH): i punti vicini alla mano, con un peso a campana largo 34 pixel, vengono spinti in giù in proporzione alla velocità e verso l'alto davanti alla mano, così si apre un avvallamento e l'acqua si ammucchia dalla parte in cui la mano va. La pressione spinge in giù i punti attorno a dove si è premuto, per SPLASH, e dà una spinta al livello.
Tasti e anteprima
Il fuoco dato coi tasti alza l'acqua come il mouse; Invio e Spazio la fanno schizzare dal centro (un clic senza posizione). Le parole cambiano spostandosi di 14 pixel e svanendo, e una regione aria-live dice Let's go. Un clic da script (l'anteprima della libreria) è un mouse finto: entra, attraversa il pulsante fino all'85% e torna al 35%, mescolando l'acqua, preme lì ed esce.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LEVEL | script.js | 0.62 | Fin dove sale l'acqua sotto il mouse, come parte dell'altezza del pulsante. |
REST | script.js | 0.14 | Quanta acqua resta sul fondo a riposo. |
SLOSH | script.js | 1 | Quanto risponde la superficie alla mano che la attraversa. |
SPLASH | script.js | 1 | Quanto è grande lo schizzo di una pressione. |
Quando usarla
Per il pulsante principale di una pagina che parla di acqua, di liquidi o di calma: una piscina o una spa, una bibita, un'app che ricorda di bere, una barca, un'impresa di pulizie, una campagna per il mare.
Sul telefono
Il pulsante è largo 260 pixel, o lo schermo meno 48, e alto 72. Senza hover, un tocco alza l'acqua per 1,6 secondi e la fa schizzare dove si è appoggiato il dito, e il tocco non aspetta il doppio tocco (touch-action manipulation).
Con il movimento ridotto
L'acqua sale e scende lo stesso, perché dice dove si trova la mano, ma la superficie resta piatta: niente onde, niente ondeggiare a riposo e niente schizzo, solo l'acqua che va all'orlo per mezzo secondo dopo una pressione. Il livello arriva con una curva morbida, le parole cambiano senza muoversi e all'arrivo il pulsante non sale.
Trappole
- La scritta nell'SVG va misurata dopo l'arrivo del font (getComputedTextLength): misurata col font di ripiego, la freccia finirebbe sopra le parole.
- Le molle si muovono con il tempo del fotogramma: dopo una scheda tornata visibile il passo sarebbe lunghissimo e farebbe esplodere la superficie, così è limitato a 1/30 di secondo e diviso in quattro.
- Le onde nascono dalla velocità della mano, non dalla sua posizione: il primo movimento dopo l'ingresso non ha una velocità e si salta, o l'acqua farebbe un salto.
- Un dito non ha hover: senza il tempo di grazia dopo il tocco l'acqua salirebbe e scenderebbe nello stesso istante.
- I punti si limitano quando si disegnano, fra 24 pixel sopra e 24 sotto il pulsante: uno schizzo forte porterebbe la superficie fuori dalla pillola e il clip la taglierebbe di netto.
Librerie
GSAP 3.15.0, Funnel Display (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 12 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.
