La lente che gonfia
WebGL, Hover, Immagini
NuovaGratis
Torna alla libreria
Il foglio a quadretti
Tre immagini in WebGL: dove passa il puntatore la foto si apre in un foro dal bordo che trema, sotto c’è un foglio bianco a quadretti, e intorno la foto si increspa come 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>The squared sheet</title>
<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="pagina">
<!-- tre quadri: ognuno ha la sua immagine, disegnata dallo script, e un piccolo WebGL che la mostra -->
<div class="galleria">
<div class="testa">
<p class="nota" data-nota>Move the mouse over the pictures: wherever you pass, the photo opens, and underneath there’s graph paper.</p>
<h1 class="titolo">Under every photo there’s graph paper.</h1>
</div>
<figure class="quadro quadro--campo" data-quadro="campo">
<div class="quadro__tela" data-tela></div>
<figcaption class="quadro__dida">The field, at the end of June</figcaption>
</figure>
<figure class="quadro quadro--finestra" data-quadro="finestra">
<div class="quadro__tela" data-tela></div>
<figcaption class="quadro__dida">The kitchen window</figcaption>
</figure>
<figure class="quadro quadro--brocca" data-quadro="brocca">
<div class="quadro__tela" data-tela></div>
<figcaption class="quadro__dida">The jug and two pears</figcaption>
</figure>
</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.
18 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 foglio a quadretti» da Animorio e adattala al mio sitoCosa fa
Una piccola galleria con tre immagini color seppia: un campo arato al tramonto, la finestra di una cucina, una brocca con due pere. Sono disegnate dallo script su un canvas e mostrate da un piccolo WebGL ciascuna. Finché nessuno le tocca sono foto e basta. Passandoci sopra, sotto il puntatore la foto si apre in un foro dal bordo che trema, e sotto c’è un foglio bianco a quadretti, coi quadretti tutti interi fino ai bordi. Il movimento lascia una scia di fori che si gonfiano, si fondono fra loro e si richiudono in un secondo e mezzo; intorno a ognuno la foto si increspa, come acqua toccata con un dito. Col dito, un tocco apre un foro e trascinando di lato si disegna.
Come funziona
Un campo di fori
Lo shader riceve sedici punti: il primo è il puntatore, gli altri la scia, ognuno con la posizione, l’ora in cui è nato e il raggio. In ogni pixel somma r² diviso d² per tutti, e taglia la somma a 1: dove due fori si avvicinano si fondono come gocce. Quelli della scia si gonfiano in un quarto di secondo e si richiudono col quadrato del tempo che resta.
Il bordo che trema
Prima di misurare, il punto del pixel si storce con due giri di rumore che scorrono nel tempo, a scale diverse: così il bordo del foro non è mai un cerchio e la sua forma non si ripete. Il taglio è stretto, fra 0,96 e 1,04, perché si legga come un taglio e non come una sfumatura.
Quadretti interi
Il foglio conta quanti quadretti di 24 pixel stanno nel quadro, arrotonda, e divide la misura per quel numero, per righe e per colonne: i quadretti escono di un soffio non quadrati, ma nessuno è tagliato. Si disegnano anche le due righe dei bordi lontani, e un filo d’ombra appena dentro il taglio fa stare il foglio sotto la foto.
L’acqua sulla foto
Ogni foro della scia manda un’onda: un seno chiuso in una campana che corre verso fuori a 260 pixel al secondo e si spegne col tempo. L’onda sposta il punto in cui si legge la foto lungo il raggio, cioè verso fuori dal tocco. Il foglio non si piega: l’acqua è sulla foto.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
CELLA | script.js | 24 | Il lato di un quadretto in px; il foglio lo aggiusta per avere solo quadretti interi. |
TESTA, GOCCIA | script.js | 70, 84 | Il raggio del foro sotto il puntatore e di quelli della scia. |
VITA | script.js | 1.6 | In quanti secondi un foro della scia si richiude. |
TREMA, ONDA | script.js | 34, 16 | Di quanti px trema il bordo e di quanti l’acqua sposta la foto. |
DISEGNI | script.js | campo, finestra, brocca | Le tre immagini, disegnate sul canvas; al loro posto si può caricare qualunque foto. |
Quando usarla
Per le foto di un portfolio, di un menù o di una galleria che devono restare foto finché qualcuno non ci gioca: il foglio sotto dice che dietro ogni immagine c’è un progetto.
Sul telefono
Le foto vanno una sotto l’altra. Un tocco apre un foro che si richiude da solo; trascinando di lato si disegna, in verticale la pagina scorre come sempre.
Con il movimento ridotto
Niente scia, niente acqua e niente bordo che trema: sotto il puntatore resta solo il foro, che compare e sparisce con una dissolvenza breve.
Trappole
- Sedici fori, due giri di rumore e un’onda per ogni pixel costano: quando nessuno tocca la foto lo shader fa una sola lettura e smette, e i quadri fuori dallo schermo non si disegnano.
- Il canvas si carica nella texture capovolto: senza UNPACK_FLIP_Y la foto esce a testa in giù.
- Una texture che non è potenza di due, in WebGL 1, vuole CLAMP_TO_EDGE e niente mipmap, o resta nera.
- Il puntatore simulato delle anteprime manda i suoi eventi alla pagina: il quadro sotto il puntatore si cerca con closest() da un ascoltatore sulla finestra, non con pointerenter.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,9 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 21 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.
