Certificati che si impilano
Hover, Immagini
NuovaGratis
Torna alla libreria
La foto disegnata a curve di livello
Una foto fatta solo di curve di livello, nello stile minimal: su nero, una natura morta con un vaso e una sfera è disegnata da linee sottilissime che uniscono i punti ugualmente luminosi, come su una mappa. All'apertura le curve si disegnano dalle più scure alle più chiare, e un filo di luce corre lungo ognuna. Il puntatore è una lente su una molla che allarga e alza le linee vicine come un rilievo che si gonfia, e la curva sotto di lui diventa vermiglia; un tocco fa comparire la foto vera da cui vengono.
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>Isoline</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/hanken-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a still life drawn only with the contour lines of its brightness: the lines draw in from dark to light, the
pointer is a lens that lifts and spreads them like a swelling relief, a tap fades in the photo they come from -->
<main class="pagina" data-pagina>
<header class="testa">
<p class="marchio" data-entra>Isoline</p>
<p class="testa__nota" data-entra>Photography in contour</p>
</header>
<figure class="quadro" data-quadro>
<canvas class="tela" aria-label="A still life of a vase and a sphere drawn with contour lines" data-tela></canvas>
<figcaption class="didascalia" data-entra>Still life with vase and sphere</figcaption>
</figure>
<footer class="piede">
<p class="nota" data-entra data-nota>Move to lift the lines, tap for the photo</p>
<p class="stato" data-entra>Showing <span data-stato>lines</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.
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 «La foto disegnata a curve di livello» da Animorio e adattala al mio sitoCosa fa
Isoline è uno studio fotografico inventato che mostra le sue foto disegnate a curve di livello. Al centro, su nero, c'è un quadro: una natura morta con un vaso tondo dal collo stretto e una sfera su un tavolo, illuminati da una finestra in alto a sinistra. Ma non c'è nessuna foto: ci sono solo sedici famiglie di linee sottilissime, ognuna unisce i punti che hanno la stessa luce, come le curve di livello di una mappa uniscono i punti alla stessa quota. All'apertura le linee si disegnano da sole, dalle più scure alle più chiare, ognuna dal suo capo, e il vaso e la sfera escono dal buio. Poi un filo di luce corre piano lungo ogni linea. Il puntatore è una lente su una molla: vicino a lui le linee si allargano e si alzano, le più chiare più in alto, come un rilievo che si gonfia sotto la mano, e la curva che passa proprio sotto il puntatore diventa vermiglia, l'unico colore. Un clic o un tocco fa comparire in dissolvenza la foto vera da cui vengono le linee, con un piccolo assestamento del quadro; un altro tocco torna alle linee. In basso la scritta dice cosa si sta guardando.
Come funziona
La foto fatta di luce
La foto non si carica: è una funzione che, per ogni punto del quadro, dice quanto è luminoso. Il muro ha una luce morbida che arriva da sinistra, il tavolo comincia al 70% dell'altezza con due ombre portate stirate verso destra, e il vaso e la sfera sono ombreggiati come solidi veri, con la luce diffusa, un lucido e un riflesso del tavolo dal basso. I bordi sono sfumati di pochi millesimi, così le curve non fanno scalini.
Le curve di livello
La luce si legge su una griglia di 168 per 210 punti, ammorbidita due volte, e per ognuno dei sedici livelli si cercano le celle dove la luce lo attraversa (marching squares, con i casi a sella risolti dalla media del centro). I pezzi di ogni cella si uniscono in linee lunghe seguendo i bordi in comune, così ogni curva ha un inizio, una fine e una lunghezza.
L'entrata e il filo di luce
Ogni linea si disegna da un capo all'altro con un tratteggio lungo quanto lei, e il livello k parte quando l'entrata arriva a k: prima le più scure. Finita l'entrata un secondo tratteggio, corto e distante, scorre su ogni linea a una velocità costante, con un ritardo diverso per livello: è il filo di luce.
La lente
Ogni punto vicino al puntatore si allontana dal centro della lente e sale, di più se la sua curva è chiara: con un peso che cala come una campana, exp(-(d/R)²), la lente sembra un rilievo che si gonfia. La lente insegue il puntatore su una molla (SPRING) e si spegne piano quando il puntatore esce. La curva che passa sotto il puntatore si ridisegna in vermiglio, con un gradiente che sparisce lontano dalla lente.
La foto e il ritorno
La stessa funzione disegna una volta, su una tela a parte di 320 per 400, la foto in scala di grigi caldi; un tocco la porta da 0 a 1 in quasi un secondo con power2.inOut, e le linee si velano. Quando nessuno muove il puntatore, un puntatore finto gira sul quadro e ogni tanto mostra la foto per due secondi.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LEVELS | script.js | 16 | Quante curve di livello: di più, un disegno più fine. |
LENS | script.js | 1 | Quanto il puntatore alza e allarga le linee: 0 spegne la lente. |
RADIUS | script.js | 0.24 | Quanto è larga la lente, in parte della larghezza del quadro. |
SPRING | script.js | 7 | Quanto in fretta la lente segue il puntatore: meno, più morbida e in ritardo. |
GLINT | script.js | 1 | Quanto è chiaro il filo di luce che corre sulle linee: 0 lo spegne. |
DRAW | script.js | 2.6 | In quanti secondi le linee si disegnano all'apertura. |
LINE | script.js | 1 | Quanto sono spesse le linee. |
Quando usarla
Nella pagina di un fotografo o di uno studio fotografico, come immagine d'apertura di una galleria o di un portfolio; per un'agenzia di cartografia, un museo di scienze o una mostra sulla luce; ovunque una foto deve arrivare piano, prima come disegno e poi come immagine.
Sul telefono
La stessa animazione: il quadro si misura sulla larghezza e sull'altezza, così sta nella casella. Il dito che trascina fa da lente, un tocco mostra la foto; la frase in basso dice drag invece di move.
Con il movimento ridotto
Le linee sono già tutte disegnate e ferme: niente filo di luce, niente lente, niente puntatore finto. Il tocco passa alla foto e ritorna solo in dissolvenza, le scritte compaiono in dissolvenza.
Trappole
- Con i bordi del vaso e della sfera netti, le curve facevano scalini lungo il contorno: i bordi vanno sfumati di qualche millesimo e la griglia ammorbidita due volte.
- I pezzi del marching squares, disegnati uno per uno, non hanno un verso: per il tratteggio dell'entrata e il filo di luce vanno uniti in linee lunghe seguendo il bordo di cella che hanno in comune.
- Nei casi a sella (due angoli chiari opposti) si sceglie come collegare i pezzi guardando la media del centro, altrimenti nascono crocette.
- La lente sposta i punti a ogni fotogramma: le curve si calcolano una volta sola, in unità del quadro, e si scalano alla misura vera solo nel disegno, così al resize non si rifanno.
Librerie
GSAP 3.15.0, Hanken Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,9 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 24 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.
