Attrezzi che cadono
Fisica, Hover
NuovaGratis
Torna alla libreria
Lo stagno sotto il puntatore
Uno stagno visto dall’alto, disegnato su un canvas: il puntatore lascia anelli che si allargano e si incrociano, le ninfee galleggiano spinte dalle onde e rimbalzano fra loro, i pesci koi scappano con uno scatto e poi tornano curiosi. Un clic fa cadere un sasso con lo spruzzo.
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 pond under the pointer</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/wght-italic.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="pond" data-pond>
<!-- the water, the lily pads, the koi and the pebbles are all drawn here -->
<canvas class="pond__canvas" data-canvas aria-hidden="true"></canvas>
<header class="sign" data-sign>
<p class="sign__tag" data-fade>Hollowmere Botanic Garden</p>
<h1 class="sign__title">
<span class="word" data-float><span class="word__in">The</span></span>
<span class="word" data-float><span class="word__in">Lily</span></span>
<span class="word" data-float><span class="word__in">Pond</span></span>
</h1>
<p class="sign__line" data-fade>East glasshouse, beyond the fern walk</p>
</header>
<footer class="foot">
<p class="foot__note" data-fade data-hint>Move over the water. Click to drop a pebble.</p>
<p class="foot__note foot__note--right" data-fade>Please do not feed the koi</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.
28 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 «Lo stagno sotto il puntatore» da Animorio e adattala al mio sitoCosa fa
Lo schermo è uno stagno di un giardino botanico inventato, Hollowmere, visto dall’alto: acqua verde petrolio, più scura al centro e più chiara verso i bordi, qualche sasso liscio negli angoli, nove ninfee (alcune col fiore rosa) e quattro koi, bianco e rosso, oro, nero e uno col solo cerchio rosso in testa. Passando col puntatore l’acqua fa anelli che si allargano, si smorzano e si incrociano con quelli di prima; dove l’onda è più ripida la luce diventa una striscia chiara. Le ninfee si muovono spinte dalle onde, oscillano, si schiacciano un attimo quando urtano un’altra ninfea o un sasso e rimbalzano; poi una molla debole le riporta a casa. I koi nuotano col corpo che ondeggia e si piega nelle curve: se il puntatore passa veloce vicino a loro scappano con uno scatto della coda, poi rallentano e tornano a girargli intorno, curiosi. Un clic fa cadere un sasso: scende rimpicciolendo con la sua ombra che lo raggiunge, tocca l’acqua con una corona di spruzzi e gocce che volano e ricadono facendo i loro anelli piccoli, spinge via le ninfee e fa scappare i pesci. Anche le parole del titolo galleggiano sull’acqua che hanno sotto.
Come funziona
L’acqua è una griglia di altezze
Lo stagno è una griglia di celle di 5 pixel (4 al telefono). Settantadue volte al secondo ogni cella prende la media delle quattro vicine, meno il valore che aveva il passo prima, e perde un poco (DAMPING). Basta questo: una gobba spinta nella griglia si allarga ad anello, e due anelli si sommano da soli.
Il puntatore lascia gocce
A ogni fotogramma si guarda quanta strada ha fatto il puntatore: ogni 52 pixel (e non più spesso di 14 volte al secondo) si spinge nella griglia una gobba a coseno, più forte se va veloce. Le gocce distanziate fanno anelli distinti invece di una scia unica.
Disegnare la luce
Per ogni cella si guarda la pendenza: verso la luce schiarisce, dall’altra parte scurisce. Dove la pendenza supera una soglia arriva il riflesso chiaro, in un secondo strato trasparente. Le due immagini sono piccole come la griglia e il canvas le allarga: è la sfumatura del browser a renderle morbide.
Le ninfee e i sassi
Sotto ogni ninfea si legge la pendenza in cinque punti e la ninfea scivola in discesa; una molla debole la riporta a casa. Due cerchi che si sovrappongono si separano e si scambiano la velocità lungo la normale (urto con rimbalzo 0,62); l’urto accende una piccola molla che la schiaccia e la fa tornare tonda.
I koi: una testa e una catena
La testa ha una direzione e una velocità; i dodici punti del corpo la seguono a distanza fissa, così il pesce si piega nelle curve. Un’oscillazione della direzione della testa fa ondeggiare la coda. Puntatore veloce e vicino: fuga con uno scatto e una coda che sbatte; finito lo spavento ogni pesce prende il suo posto su un cerchio lento intorno al puntatore.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FISH | script.js | 4 | Quanti koi nuotano nello stagno. |
LILIES | script.js | 9 | Quante ninfee galleggiano. |
RIPPLE | script.js | 1 | La forza degli anelli lasciati dal puntatore. |
DAMPING | script.js | 0.988 | Quanto di un anello resta a ogni passo: più basso e si spegne prima. |
SPEED | script.js | 1 | La velocità di tutto lo stagno: onde, pesci e ninfee. |
STONE | script.js | 3.5 | Quanto un sasso è più forte del puntatore. |
--deep, --shallow, --glint | style.css | #0c3b40, #2c7a6f, #e6f5e4 | I colori dell’acqua: in mezzo, verso i bordi e il riflesso sulle creste. |
Quando usarla
Per l’apertura di un sito che vive di calma e di natura: un giardino, una spa, un tè, un ristorante giapponese, un ritiro. Chi arriva trova qualcosa da toccare prima ancora di leggere, e lo stagno resta vivo anche da solo.
Sul telefono
Stesso stagno, con ninfee e pesci più piccoli e celle della griglia più fitte. Il dito trascinato sull’acqua fa gli anelli e spaventa i pesci, un tocco fa cadere il sasso; la pagina non scorre, quindi il dito è tutto per l’acqua.
Con il movimento ridotto
Lo stagno sta fermo: niente onde, pesci e ninfee immobili al loro posto. Sotto il puntatore si accende e si spegne solo una luce morbida, e un clic fa apparire e svanire un riflesso.
Trappole
- Una goccia a ogni evento del puntatore fa una scia fitta come la prua di una barca e copre tutto lo stagno: le gocce vanno distanziate nello spazio (52 pixel) e nel tempo.
- La velocità del puntatore calcolata sugli eventi esplode quando due arrivano nello stesso fotogramma: si misura fotogramma per fotogramma e si smussa.
- Disegnare l’acqua pixel per pixel a tutta risoluzione è lento: si disegna grande quanto la griglia e il canvas la allarga con drawImage.
- Le ninfee spinte solo dalle onde finiscono tutte contro un bordo: una molla debole verso la loro casa le riporta in mezzo, e una spinta le tiene fuori dal titolo.
- Il riflesso disegnato a soglia secca fa scalini a quadretti sull’acqua calma: la soglia è una rampa morbida e parte solo dalle pendenze vere.
- Il pilota automatico manda un pointerleave che risale fino a html a ogni cambio di elemento: si ascolta solo quello che ha html come bersaglio, altrimenti il puntatore sparisce per un fotogramma.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 15 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 10 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.
