La parola dietro il vetro cannettato
WebGL, Testo, Hover
NuovaGratis
Torna alla libreria
La parola scritta dalla luce nell'acqua della piscina
Titolo animato in WebGL, nello stile minimal: sul fondo scuro di una piscina la rete di luce che l'acqua disegna, le caustiche, si muove e si intreccia; quando la superficie si calma la luce si raccoglie nel contorno delle lettere e la parola si legge scritta dalla luce, con un lampo azzurro. Il puntatore o il dito smuovono l'acqua, un clic o un tocco lascia cadere un sassolino che apre un'onda ad anello.
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>Lido Marne</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>
<!-- a word written by caustics: the light on the floor of a pool, refracted by the water, focuses into the letters
when the surface calms down; the pointer stirs the water and a tap drops a pebble -->
<main class="pagina" data-pagina>
<canvas class="tela" aria-hidden="true" data-tela></canvas>
<h1 class="parola" data-parola>Lido</h1>
<header class="testa">
<p class="marchio" data-entra>Lido Marne</p>
<p class="testa__nota" data-entra>Open-air pool, since 1934</p>
</header>
<footer class="piede">
<p class="nota" data-entra data-nota>Move to stir the water, tap to drop a pebble</p>
<p class="misura" data-entra>Surface <span data-calma>calm</span></p>
</footer>
</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 «La parola scritta dalla luce nell'acqua della piscina» da Animorio e adattala al mio sitoCosa fa
È notte sul fondo di Lido Marne, una piscina all'aperto inventata, aperta nel 1934. Il fondo è quasi nero, con le fughe delle piastrelle appena visibili, e sopra c'è l'acqua: la luce che la attraversa si raccoglie in una rete di righe chiare che si allargano, si stringono e si annodano, le caustiche che si vedono in ogni piscina. Poi la superficie si calma, in tre secondi, e la rete si scioglie: la luce si raccoglie lungo il contorno di una parola, Lido, che sotto l'acqua è in rilievo appena accennato. Le aste diventano due righe di luce, le curve due anelli, e negli angoli la luce si stringe in piccoli nodi più chiari. Quando la parola è a fuoco si accende per un attimo di azzurro, l'unico colore, e in basso la scritta passa da rippled a settling a calm, azzurra anche lei. Poco dopo cade un sassolino: un'onda ad anello attraversa le lettere, le piega e le rimette a posto. Poi il vento torna a muovere l'acqua e tutto ricomincia. Il puntatore, o il dito che trascina, smuove l'acqua lasciando una scia di onde piccole; un clic o un tocco lascia cadere un sassolino dove si vuole. Le fughe delle piastrelle ondeggiano con la superficie, come si vedono davvero attraverso l'acqua.
Come funziona
Quanto l'acqua concentra la luce
Tutto è un solo fragment shader WebGL 2 su un triangolo grande quanto la pagina. Per ogni pixel lo shader chiede quanto è alta l'acqua lì e nei dintorni, in nove punti a due pixel di distanza, e ne ricava le derivate seconde. La superficie fa da lente: la luce che arriva sul fondo è 1 / |det(I + H)|, con H la matrice delle derivate seconde. Dove il determinante passa per zero la luce si raccoglie in una riga chiara: è la caustica, calcolata davvero, non disegnata.
Le onde del vento
L'acqua mossa è la somma di quattro onde lunghe con direzioni, lunghezze e velocità diverse. Ogni onda è sin(k · x + ω · t) / k²: dividere per k² dà a tutte la stessa curvatura, così nessuna domina la rete. RIPPLE dice quanto sono alte; la regia le porta da 1 a 0,09 in CALM secondi, ed è lì che la rete si scioglie e resta la parola.
La parola in rilievo
La parola si scrive una volta in un canvas 2D, si sfoca con tre passate di sfocatura a scatola in JavaScript e diventa una texture in float a 32 bit: è il rilievo sotto l'acqua. In 8 bit le derivate seconde sarebbero una grana di rumore, quindi niente RGBA: un solo canale R32F, interpolato a mano nello shader coi quattro vicini, perché i float a 32 bit non si filtrano da soli. La sfocatura cresce col corpo della parola, così le righe di luce hanno lo stesso disegno a ogni misura.
Il sassolino e la scia
Ogni sassolino è un vec4 con posizione, istante e forza, fino a dieci per volta. Lo shader ci aggiunge un'onda ad anello che corre a 230 px al secondo, con un fronte morbido e una coda che si spegne. Il puntatore lascia una piccola onda ogni 26 px e ogni sette centesimi; un clic o un tocco ne lascia una forte, PEBBLE. Le fughe delle piastrelle si spostano di poco con la pendenza della superficie, come si vedono attraverso l'acqua.
La regia
Una timeline di GSAP in loop: l'acqua si calma in CALM secondi e intanto il rilievo della parola sale; un lampo azzurro di un secondo e mezzo quando è a fuoco; dopo un attimo cade un sassolino sulla d (saltato se qualcuno sta usando il puntatore); poi il vento rimuove l'acqua e il rilievo scende. Lo shader gira sul ticker di GSAP, e la scritta in basso cambia solo quando cambia lo stato.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | Lido | La parola scritta dalla luce. |
FOCUS | script.js | 1 | Quanto la parola concentra la luce: più alto, righe più nette e più doppie. |
ROUND | script.js | 14 | Quanto è morbido il rilievo delle lettere, in px: più alto, righe più larghe e più lontane dal bordo. |
RIPPLE | script.js | 1 | Quanto è mossa l'acqua quando non è calma. |
CALM | script.js | 3.2 | In quanti secondi l'acqua si calma. |
PEBBLE | script.js | 1 | Quanto è forte il sassolino di un clic o di un tocco. |
TILE | script.js | 46 | Il lato delle piastrelle del fondo, in px. |
WEIGHT | script.js | 860 | Il peso della parola. |
Quando usarla
Come titolo dell'apertura di una piscina, di un lido, di un hotel con piscina o di una casa vacanze al mare; dietro al nome di una spa, di una scuola di nuoto o di un festival d'estate; come pagina d'ingresso di uno studio che vuole un titolo vivo e calmo, che si scompone solo quando lo si tocca.
Sul telefono
La stessa animazione: la parola si misura sulla larghezza e sull'altezza, e la sfocatura del rilievo cresce o cala con lei, così le righe di luce sono uguali. Il dito che trascina smuove l'acqua, un tocco lascia cadere un sassolino; la frase in basso dice drag invece di move.
Con il movimento ridotto
L'acqua è già calma e ferma, la parola si legge scritta dalla luce dal primo momento: niente onde che corrono, niente sassolini, niente regia. Le scritte compaiono in dissolvenza.
Trappole
- Con il rilievo in una texture a 8 bit, o anche a 16 bit, le derivate seconde fatte a due pixel di distanza diventano una grana: le lettere erano contornate di puntini. Serve un float a 32 bit (R32F), che WebGL 2 non filtra senza estensione: si legge con texelFetch e si interpola a mano.
- Il rilievo deve curvare abbastanza: la derivata seconda di un gradino sfocato con sigma s arriva a circa 0,24 / s² per ogni pixel d'altezza. Con un rilievo basso il determinante non passa mai per zero e non nasce nessuna riga: l'altezza va scalata col quadrato della sfocatura.
- Con la soglia larga fra buio e luce le caustiche erano macchie, non righe: la luce va accesa solo dove la concentrazione supera due volte quella normale, con un passaggio fino a dodici.
- Nel WebGL in software, o su un telefono lento, i fotogrammi arrivano tardi e GSAP rallenta il tempo per non saltare: la regia resta giusta, ma per le prove si spegne il lagSmoothing.
- Il carattere arriva dopo il primo disegno: il rilievo della parola si rifà appena document.fonts.load lo dice pronto, e a ogni resize.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,0 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 23 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.
