Il foglio a quadretti
Hover, WebGL, Immagini
NuovaGratis
Torna alla libreria
La lente che gonfia
Un elenco di servizi e accanto un’immagine che sotto il puntatore si gonfia come una goccia di vetro; scegliendo un servizio, l’immagine nuova sboccia da metà misura mentre il rigonfiamento sale dal fondo fino al puntatore.
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 swelling lens</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="page">
<header class="top">
<p class="brand">Mirage</p>
<p class="top__line">Services</p>
</header>
<section class="services">
<div class="services__text">
<h1 class="services__title">What we do</h1>
<!-- one pill slides behind the chosen service; the picture changes with it -->
<ul class="list" data-list>
<li><button class="item" type="button" data-item="0" aria-pressed="true"><span class="item__name">Interfaces</span><svg class="item__arrow" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg></button></li>
<li><button class="item" type="button" data-item="1" aria-pressed="false"><span class="item__name">Development</span><svg class="item__arrow" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg></button></li>
<li><button class="item" type="button" data-item="2" aria-pressed="false"><span class="item__name">Brand systems</span><svg class="item__arrow" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg></button></li>
<li><button class="item" type="button" data-item="3" aria-pressed="false"><span class="item__name">Content</span><svg class="item__arrow" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg></button></li>
<li class="list__pill" aria-hidden="true" data-pill></li>
</ul>
<p class="services__note" data-note>Pick a service, then move over the picture: it swells under the pointer like glass.</p>
</div>
<figure class="panel">
<canvas class="panel__canvas" data-lens aria-hidden="true"></canvas>
<figcaption class="panel__caption" data-caption>Eight-point stars</figcaption>
</figure>
</section>
</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.
58 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 lente che gonfia» da Animorio e adattala al mio sitoCosa fa
A sinistra un titolo e quattro servizi, quello scelto dentro una pillola scura; a destra un’immagine, un mosaico di zellige per ogni servizio: stelle a otto punte, quadrati intrecciati, stelle a sei punte, soli a dodici punte. Sotto il puntatore l’immagine si deforma come vista attraverso una goccia di vetro: vicino al puntatore le piastrelle si stringono, più in là si allungano e i bordi si piegano. Entrando si gonfia oltre misura e si assesta, uscendo si sgonfia piano. Passando su un altro servizio la pillola ci scivola sopra con un rimbalzo e la scritta cambia colore esattamente sul suo bordo; il mosaico nuovo sboccia sopra il vecchio da metà misura, con un rigonfiamento forte che sale dal fondo e si scioglie in due secondi.
Come funziona
I mosaici
Niente foto: ogni mosaico si dipinge su un canvas di 1152 × 1440 in tre passate, i fondi, le stelle e i pezzetti negli angoli fra quattro stelle, disegnati per ultimi sennò il fondo della cella dopo li coprirebbe. Ogni piastrella ha un tono appena diverso, da un generatore con seme, e una fuga intorno; sopra, qualche riflesso morbido e i puntini della fornace. Diventano texture una volta sola.
La lente
Tutto sta in un solo quadrato WebGL. La funzione della lente sposta ogni punto rispetto al centro: la distanza divisa per il raggio, 0,9 della larghezza, dà d; la spinta è 1,2 / (1 + d⁴), e il punto si moltiplica per (1 − gonfio) + gonfio × spinta. Vicino al centro la spinta è 1,2 e l’immagine si stringe; lontano scende verso zero e l’immagine si allunga. La quarta potenza tiene morbido il bordo della goccia.
La cornice
La cornice mostra solo il centro di un’immagine più grande di 1,3 volte: i bordi, dove la lente tira di più e l’immagine si ripiega, restano fuori. Anche il puntatore si porta in quelle coordinate, e l’immagine riempie la cornice come un background-size: cover.
La fioritura
Scegliendo un servizio l’immagine nuova si disegna sopra la vecchia: opacità da 0 a 1 in 0,4 secondi, misura da 0,5 a 1 in 2 secondi di power3.out, gonfio da 1,5 a 0 (a 1 se il puntatore è sopra) in 2,2, e il centro della lente viaggia dal fondo dell’immagine al puntatore in 2,5 secondi di power2.out. Fuori dalla sua misura l’immagine nuova è trasparente: mentre cresce, intorno si vede ancora la vecchia.
Il puntatore e la pillola
Entrando, il gonfio va da 0,5 a 1,2 in 0,6 secondi e torna a 1 in 1,2; uscendo scende a 0 in 1,2 di power3.out. Il centro insegue il puntatore del 14% ogni sessantesimo di secondo, a qualunque frequenza, e si disegna solo mentre qualcosa si muove. La pillola è una finestra: dentro c’è una copia chiara dell’elenco che si sposta al contrario con lo stesso elastic.out(1, 0,75) in 0,7 secondi, così la scritta cambia colore sul bordo anche mentre la pillola rimbalza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
RADIUS, STRENGTH | script.js | 0.9, 1.2 | Quanto è larga la goccia, in larghezze dell’immagine, e quanto spinge al centro. |
FRAME | script.js | 1.3 | Quanto l’immagine è più grande della cornice che la mostra. |
START | script.js | 0.5, 0 | Da dove sale il rigonfiamento quando un’immagine sboccia: il fondo, a metà. |
BLOOM | script.js | 2, 2.2, 2.5, 0.4 | I secondi della fioritura: misura, rigonfiamento, viaggio del centro, dissolvenza. |
ENTER, LEAVE | script.js | 0.6 + 1.2, 1.2 | I secondi del rigonfiamento quando il puntatore entra e quando esce. |
TILE | script.js | 6.4 | Quante piastrelle stanno nella larghezza dell’immagine. |
PICTURES | script.js | 4 | Didascalie, colori e stelle dei mosaici; per usare delle foto si passano le immagini a texImage2D al posto dei canvas. |
Quando usarla
Per un elenco di servizi, progetti o prodotti con un’immagine ciascuno: la lente dà corpo all’immagine e la fioritura segna il cambio meglio di una dissolvenza. Rende di più con immagini piene di linee dritte, che la lente può piegare.
Sul telefono
L’immagine va sopra l’elenco, in 5:4, e la lente segue il dito finché è appoggiato; il dito che scorre in verticale muove la pagina. Il servizio si sceglie toccandolo.
Con il movimento ridotto
Niente lente e niente fioritura: al cambio di servizio le immagini si scambiano con una dissolvenza di un quarto di secondo e la pillola salta al suo posto.
Trappole
- Con una spinta maggiore di 1 la funzione della lente non cresce sempre: oltre circa tre quarti del raggio torna indietro, e i punti lontani rileggono l’immagine vicino al centro, ripiegata. Per questo i bordi stanno fuori dalla cornice.
- Il colore della scritta nella pillola non si anima con una transition: la pillola arriverebbe prima e per un attimo la scritta scura starebbe sul fondo scuro. Una copia chiara dentro la pillola, spostata al contrario con la stessa curva, cambia colore esattamente sul bordo.
- Un inseguimento come x += (meta − x) × 0,14 a ogni fotogramma va il doppio più veloce su uno schermo a 120 Hz: l’esponente si calcola dal tempo passato.
- Sotto la prima immagine non c’è una vecchia: serve una texture vuota di 1 × 1, se no il campionatore legge l’ultima texture legata.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,8 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 28 settembre 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.
