Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
La piscina che si riempie
Scorri dentro l’anteprima
Animazione di scroll nello stile minimal: una piscina vuota disegnata a righe sottili, vista dall’alto in prospettiva. Scendendo si riempie: l’acqua è una pila di righe blu che si increspano tanto più quanto in fretta sale, il fondo sotto diventa blu e trema, e il titolo, sdraiato leggero sul fondo, sale a galla con l’acqua e prende peso.
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>Lune public baths</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 made-up public baths, Lune. The stage sticks while you scroll: an empty pool drawn in thin lines, seen in
perspective, fills up. The water is a stack of fine lines that ripple; the title lies on the floor, then floats
up with the water and gains weight as the pool fills. -->
<main>
<section class="corsa" data-corsa>
<div class="palco" data-palco>
<canvas class="vasca" data-vasca aria-hidden="true"></canvas>
<header class="testa">
<a class="marchio" href="#">Lune</a>
<p class="testa__nota">Public baths, open at seven</p>
</header>
<div class="titolo" data-titolo>
<h1 class="titolo__parole" data-parole>Still water.</h1>
</div>
<p class="livello" aria-live="polite"><span class="livello__nome">Depth</span> <span class="livello__cifra" data-livello>0.00 m</span></p>
<p class="nota" data-nota>The lanes stay quiet till nine.</p>
<p class="cenno" data-cenno><span>Scroll to fill</span><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 3v13M4.5 10.5 10 16l5.5-5.5"/></svg></p>
</div>
</section>
<footer class="piede">
<p>Lune keeps two lanes free every morning. Bring your own towel.</p>
</footer>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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 piscina che si riempie» da Animorio e adattala al mio sitoCosa fa
Una pagina bianco caldo con in alto il nome di bagni pubblici inventati, Lune. Al centro una piscina vuota vista dall’alto, disegnata solo con righe sottili d’inchiostro: il bordo, le pareti con le file di piastrelle, il fondo con la quadrettatura leggera e le quattro righe delle corsie con la T alle due estremità. Sul fondo è sdraiato il titolo «Still water.», grigio, largo e leggero. Scendendo il palco resta fermo e la piscina si riempie: l’acqua sale con la linea di galleggiamento blu che gira lungo le pareti, una velatura azzurra appena accennata e una pila di righe blu sottili che disegnano la superficie, più chiare in fondo. Più si scende in fretta, più le righe si increspano; quando ci si ferma l’acqua si calma piano. Le righe delle corsie sotto l’acqua diventano blu e tremano. Il titolo sale a galla con l’acqua, dondola appena e prende peso stringendosi; in basso la profondità conta i metri fino a 2,40. A piscina piena arriva la nota. Tornando su l’acqua scende e il titolo torna sul fondo.
Come funziona
Una piscina in prospettiva, a mano
La vasca è una scatola in unità sue (larga 8, lunga 14, profonda 2,6). Una camera semplice, alzata e inclinata in giù di 0,6 radianti, proietta ogni punto sul canvas; all’apertura e a ogni resize lo script proietta gli otto spigoli e sceglie la scala che fa stare tutta la scatola fra la testata e le scritte in basso, sul computer e nella casella del telefono.
Un numero per tutto
Un ScrollTrigger senza timeline legge l’avanzamento della sezione, Lenis ammorbidisce lo scroll e una media esponenziale lo insegue ancora (SMOOTH). Fra 0,08 e 0,86 dell’avanzamento il livello dell’acqua va dal fondo a quasi il bordo, con power2.inOut.
L’acqua fatta di righe
La superficie è una pila di righe da una parete all’altra (LINES), ognuna alta quanto il livello più due onde lente che si incrociano. L’ampiezza delle onde segue la velocità con cui l’acqua sale: cresce in fretta e si calma piano. La linea di galleggiamento gira lungo le quattro pareti e chiude una velatura azzurra leggerissima.
Il titolo a galla
Il titolo è un elemento HTML messo a ogni fotogramma sul punto proiettato al centro della vasca, all’altezza dell’acqua (o sul fondo, se è vuota), scalato con la prospettiva e mosso da un piccolo dondolio. I suoi assi di Archivo vanno da peso 220 e larghezza 118 a peso 700 e larghezza 90 mentre la vasca si riempie.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
DEPTH | script.js | 2.4 | La profondità scritta in basso a piscina piena, in metri. |
LANES | script.js | 4 | In quante corsie è diviso il fondo. |
LINES | script.js | 34 | Quante righe disegnano la superficie dell’acqua (meno sul telefono). |
RIPPLE | script.js | 1 | Quanto si increspa l’acqua: 0 è uno specchio. |
BOB | script.js | 1 | Quanto dondola il titolo sull’acqua: 0 lo tiene fermo. |
SMOOTH | script.js | 5 | Quanto in fretta l’acqua raggiunge lo scroll: meno è più morbido. |
RIDE | script.js | 1 | Quanto scroll serve per riempirla: 2 è il doppio. |
Quando usarla
Per l’apertura del sito di una piscina, di una spa, di bagni pubblici, di un hotel con la vasca o di un marchio di costumi: una pagina che si riempie d’acqua mentre si scende e porta a galla il nome.
Sul telefono
La stessa animazione: la scala della vasca si calcola dalla finestra, quindi la piscina sta intera anche nella casella bassa e larga del telefono; le righe della superficie sono un po’ meno.
Con il movimento ridotto
Niente si muove e lo scroll non è ammorbidito: la piscina è già piena, l’acqua è ferma come uno specchio e il titolo galleggia pesante; la pagina compare in dissolvenza.
Trappole
- La scala presa solo dalla larghezza faceva uscire la vasca sotto il bordo della casella del telefono: si proiettano gli otto spigoli e si sceglie la scala più piccola fra larghezza e altezza libere.
- Le onde legate solo al tempo sembravano un mare fermo: l’ampiezza segue la velocità di riempimento, sale in fretta e scende piano.
Librerie
GSAP 3.15.0, ScrollTrigger 3.15.0, Lenis 1.3.26, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,4 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.
Collaudo
Provata il 22 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.
