Il titolo di palloncini
Fisica, Testo, Hover
NuovaGratis
Torna alla libreria
La parola a pelo d'acqua
Nello stile minimal: una parola che galleggia, tagliata a metà da una riga d'acqua sottile. Sopra la riga è nera, sotto è la stessa parola vista attraverso l'acqua: più larga, più leggera e blu. Il puntatore smuove l'acqua, le onde corrono lungo la riga, le lettere ci salgono sopra come boe e beccheggiano, e la parte sommersa si piega e si sposta con la pendenza dell'acqua.
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>Afloat</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- one word afloat on one hairline of water: above the line it is ink, below it is refracted -->
<main class="stage" data-stage>
<h1 class="title" data-title>Afloat</h1>
<div class="layer layer--air" data-air aria-hidden="true"></div>
<div class="layer layer--water" data-water aria-hidden="true"></div>
<svg class="lines" aria-hidden="true">
<path class="line" data-line d="" />
</svg>
<div class="measure" data-measure aria-hidden="true"></div>
<p class="hint" data-hint>Run the pointer through the water.</p>
<p class="read" data-readout aria-hidden="true"><span class="read__label">Water</span> <span class="read__win"><b class="read__value" data-read>still</b></span></p>
</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.
22 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 parola a pelo d'acqua» da Animorio e adattala al mio sitoCosa fa
Su un fondo color carta una riga nera sottilissima attraversa tutta la pagina: è il pelo dell'acqua. All'inizio la riga si disegna dal centro verso i lati, poi le lettere di Afloat cadono dall'alto una dopo l'altra, da sinistra a destra, un po' storte. Ognuna entra nell'acqua, va giù per la sua velocità e risale beccheggiando, e dove è caduta parte un'onda che corre lungo la riga in tutte e due le direzioni e fa dondolare le vicine. Sopra la riga le lettere sono nere e piene; sotto la riga si vede la stessa lettera attraverso l'acqua, blu, più larga e più leggera sugli assi del carattere variabile, un poco ingrandita, così la parola sembra spezzata proprio sul pelo dell'acqua, come un remo in un lago. Passando col puntatore nell'acqua, o anche solo sfiorandola, la riga si abbassa sotto il dito e davanti si alza una piccola onda di prua; entrando e uscendo dall'acqua di colpo si fa un piccolo schizzo. Le onde corrono, si incrociano e si spengono ai bordi. Ogni lettera segue l'acqua sotto di lei come una boa, con un po' di ritardo: sale e scende, si inclina con la pendenza e scivola appena verso il basso dell'onda; la sua parte sommersa si sposta di lato e si piega con la pendenza, come si vede dentro l'acqua mossa. In basso a destra una scritta piccola dice com'è l'acqua: still, rippled o choppy (in blu). Se nessuno tocca la pagina, un dito invisibile ogni tanto entra nell'acqua vicino a una lettera, la attraversa e ne esce.
Come funziona
Due strati tagliati sul pelo dell'acqua
Ogni lettera è disegnata due volte, nello stesso posto, in due strati grandi come la pagina: lo strato dell'aria, nero, e quello dell'acqua, blu, con il carattere più largo e più leggero (font-stretch e font-weight da variabili di :root) e un poco ingrandito in altezza. A ogni fotogramma tutti e due gli strati vengono ritagliati con clip-path: polygon() lungo la superficie dell'acqua, l'aria sopra e l'acqua sotto. Così il taglio segue l'onda al pixel, dentro le lettere, senza calcolare niente per ogni lettera.
L'acqua è una fila di molle
La superficie è una fila di colonne, una ogni sette pixel circa: ogni colonna ha un'altezza e una velocità ed è legata alle due vicine come in una corda, quindi una spinta diventa un'onda che corre ai due lati. La rigidezza viene da SPEED (in altezze di lettera al secondo), lo smorzamento da CALM; ai due bordi una spugna di colonne più smorzate assorbe le onde invece di farle rimbalzare. La fisica va a passi fissi di un duecentoquarantesimo di secondo dentro gsap.ticker, e l'onda non supera mai un quinto di lettera.
Il dito nell'acqua
La velocità del puntatore si misura a ogni fotogramma. Quando il puntatore è sotto il pelo dell'acqua o lo sfiora, la colonna sotto di lui riceve una spinta verso il basso in proporzione alla velocità (STIR), a forma di campana, e un poco più avanti, nel verso del movimento, una spinta verso l'alto: l'onda di prua. Attraversando la superficie si dà in più uno schizzo, verso il basso entrando e verso l'alto uscendo, grande quanto la velocità verticale.
Le lettere come boe
Ogni lettera ha tre molle: una verticale morbida e poco smorzata che insegue l'altezza dell'acqua sotto il suo centro (FLOAT), una per l'inclinazione che insegue la pendenza (ROCK) e una lenta che la fa scivolare appena verso il basso dell'onda. Essendo morbide, le lettere arrivano in ritardo e oscillano: è il beccheggio. La parte sommersa riceve in più uno spostamento di lato e uno skewX proporzionali alla pendenza (REFRACT), girando intorno al punto in cui la lettera tocca l'acqua: è la rifrazione.
La regia: l'entrata, la scritta e il dito invisibile
L'entrata è una timeline GSAP: la riga si disegna con expo.out, poi ogni lettera cade con power2.in e, quando arriva, passa alla fisica con una velocità verso il basso e dà all'acqua la spinta del tonfo. La scritta dello stato dell'acqua cambia parola scorrendo in una finestrella con back.out. Dopo IDLE secondi senza puntatore una timeline muove un dito invisibile che entra nell'acqua, la attraversa e ne esce; un puntatore vero lo manda via. Quando acqua e lettere sono ferme il disegno si ferma.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'Afloat' | La parola sull'acqua (fino a 14 lettere; meglio corta, così resta grande). |
DEPTH | script.js | 0.46 | Quanto sono immerse le lettere: la parte dell'altezza della x che sta sotto l'acqua. |
SPEED | script.js | 2.4 | Quanto corrono le onde, in altezze di lettera al secondo. |
CALM | script.js | 1 | Quanto in fretta l'acqua si calma: 0.4 onde lunghe, 2.5 acqua densa. |
STIR | script.js | 1 | Quanto il puntatore smuove l'acqua. |
FLOAT | script.js | 0.9 | Quanto le lettere salgono e scendono con le onde (0 = restano ferme e si muove solo l'acqua). |
ROCK | script.js | 0.85 | Quanto le lettere si inclinano con la pendenza dell'acqua. |
REFRACT | script.js | 1 | Quanto la parte sommersa si piega e si sposta rispetto a quella in aria. |
IDLE | script.js | 2.2 | Dopo quanti secondi senza puntatore il dito invisibile attraversa l'acqua (0 = mai). |
--deep | style.css | #2b3cff | Il colore della parola sott'acqua, l'unico accento. |
--under-width | style.css | 116 | Quanto è larga la parola sott'acqua, in percentuale: l'acqua ingrandisce. |
--under-weight | style.css | 380 | Il peso della parola sott'acqua. |
Quando usarla
Per un titolo calmo che si lascia toccare: l'apertura del sito di un lido, di una scuola di vela o di nuoto, di una spa o di un hotel sul lago, il nome di un marchio di costumi o di bevande, una pagina 404 tranquilla. Funziona con qualunque parola corta.
Sul telefono
La stessa acqua con le misure adattate: la parola occupa quasi tutta la larghezza e la velocità delle onde e la loro altezza si misurano in altezze di lettera, quindi valgono anche in piccolo. Si trascina il dito nell'acqua; la scritta d'aiuto diventa «Drag a finger through the water.» e, se non c'è posto accanto allo stato dell'acqua, si nasconde.
Con il movimento ridotto
Niente si muove: la riga e la parola compaiono in dissolvenza con l'acqua ferma, la metà di sopra nera e quella di sotto blu, larga e leggera. Il puntatore non fa onde e la scritta resta su still.
Trappole
- Con le onde alte fino a un terzo di lettera e la spinta piena del puntatore, la cresta passava sopra le lettere e la parola non si leggeva più: l'onda si ferma a un quinto di lettera e la spinta del dito è più dolce.
- Con i bordi della fila di molle fermi, le onde tornavano indietro dai lati della pagina e l'acqua non si calmava mai: a ogni bordo c'è una spugna di colonne molto smorzate che le assorbe.
- Nell'entrata il disegno si fermava fra una lettera e l'altra, perché l'acqua era ancora ferma, e le lettere in caduta restavano a mezz'aria: il disegno si può fermare solo dopo l'entrata.
- La scritta diceva choppy per un'acqua appena increspata: lo stato si legge sull'onda più alta, levigata (sale in fretta e scende piano), con soglie misurate in altezze di lettera.
- Ruotando la lettera intorno al suo centro, la parte sommersa si staccava da quella in aria: tutte e due girano e si piegano intorno al punto in cui la lettera tocca l'acqua (transform-origin calcolato in pixel).
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,3 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 15 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.
