Il titolo che si alza dalla linea
Transizioni, Testo, Immagini
NuovaGratis
Torna alla libreria
La foto ordinata per luce
Nello stile minimal: una foto di un lago al tramonto tagliata in tasselli. Una riga rossa sottile la attraversa e ogni colonna che tocca mette in ordine i suoi tasselli per luce, i chiari in alto e gli scuri in basso: la foto diventa un campo di sfumature, una per colonna, poi la riga ripassa e ogni tassello torna a casa.
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 photo sorted by light</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<p class="mark" data-mark>Lowlight</p>
<!-- the plate: the photo cut into small chips, column by column; a red hairline passes over it and every column
it touches sorts its chips by light, then puts them back -->
<figure class="plate" data-plate role="img">
<canvas class="chips" data-chips aria-hidden="true"></canvas>
<i class="head" data-head aria-hidden="true"></i>
<figcaption class="cap" aria-hidden="true">
<span class="cap__title" data-title></span>
<span class="cap__state">
<span class="cap__word" data-word="shot">As shot</span>
<span class="cap__word" data-word="light">By light</span>
</span>
</figcaption>
</figure>
</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.
16 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 ordinata per luce» da Animorio e adattala al mio sitoCosa fa
Una pagina color carta con in alto a sinistra il nome di uno studio di stampe fotografiche inventato, Lowlight, e al centro una foto: un lago al tramonto, il cielo che va dal blu notte all’arancio, il sole basso dietro le colline, la sua scia sull’acqua. Sotto, la didascalia Lake at dusk e a destra due parole, As shot e By light: quella dello stato in cui si trova la foto è in grassetto, l’altra sottile e grigia. La foto è tagliata in tasselli, in ventotto colonne. Dopo un paio di secondi una riga rossa di un pixel attraversa la foto da sinistra a destra, e ogni colonna che tocca si mette in ordine per luce: i tasselli chiari salgono in cima, gli scuri scendono in fondo, partendo uno dopo l’altro dall’alto, ognuno va un pixel oltre il suo posto e torna. Mentre corrono perdono il dettaglio e diventano del loro colore medio, e fra un tassello e l’altro si apre un filo di carta. Quando la riga è passata la foto è un campo di sfumature, una per colonna, come una fila di cieli, e il grassetto è passato su By light con un piccolo elastico. Dopo un momento la riga ripassa e ogni tassello torna al suo posto nella foto, ritrovando il dettaglio mentre atterra; il grassetto torna su As shot e si ricomincia. Col mouse sopra la foto ferma le colonne sotto il puntatore si mettono in ordine solo un poco, su una molla, come un pettine passato nella foto; un clic fa passare la riga subito.
Come funziona
La foto in tasselli
La foto sta su una canvas nascosta (disegnata dallo script o caricata da IMAGE). Lo script la taglia in COLUMNS colonne e in tante righe quante ne servono perché i tasselli siano quasi quadrati, e con getImageData calcola per ogni tassello il colore medio e la luce (0,2126 R + 0,7152 G + 0,0722 B).
L’ordine di ogni colonna
Ogni colonna ordina i suoi tasselli per luce, dal più chiaro al più scuro (LIGHT_ON_TOP), e il posto di un tassello in quell’ordine è dove andrà. Si ordinano solo le colonne, non tutta la foto: i tasselli si muovono soltanto in su e in giù, e la foto ordinata resta un campo di sfumature verticali che ricorda ancora il suo cielo.
Un tassello che corre e si posa
Ogni colonna ha un numero, p, che una timeline GSAP porta da 0 a 1 quando la riga rossa ci passa sopra. Dentro la colonna ogni tassello parte un poco dopo quello sopra (SPREAD), corre al suo posto con una curva power3.out, poi va OVERSHOOT pixel oltre e torna con un mezzo seno. Nel primo terzo della corsa il dettaglio sfuma nel colore medio e il tassello si stringe di GAP pixel, così fra i tasselli resta un filo di carta.
Tutto su una canvas
Più di novecento tasselli non sono elementi della pagina: il ticker di GSAP ridisegna la canvas solo quando qualcosa si è mosso. Una colonna a casa si disegna in un pezzo solo, senza giunture; i bordi dei tasselli cadono su pixel interi, così non restano righe sottili fra uno e l’altro.
La riga e le due parole
La riga rossa è un elemento di un pixel che la timeline porta da sinistra a destra in SWEEP secondi; ogni colonna parte quando la riga arriva sul suo centro. Le due parole sotto la foto hanno il peso e la larghezza in due variabili CSS lette da font-variation-settings: la parola dello stato nuovo prende peso con elastic.out, l’altra torna sottile e grigia.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
IMAGE | script.js | '' | La foto: un indirizzo, o un file caricato nel Playground. Vuoto, la foto la disegna lo script. Una foto da un altro sito che non si può leggere lascia il posto a quella disegnata. |
CAPTION | script.js | 'Lake at dusk' | La didascalia sotto la foto. |
COLUMNS | script.js | 28 | In quante colonne di tasselli è tagliata la foto; le righe seguono la forma della foto. |
LIGHT_ON_TOP | script.js | true | I tasselli chiari salgono in cima; con false scendono in fondo e la foto ordinata si capovolge. |
SWEEP | script.js | 2.4 | I secondi che la riga rossa impiega ad attraversare la foto. |
GAP | script.js | 1 | I pixel di carta fra i tasselli quando sono in ordine (0 = nessuno). |
OVERSHOOT | script.js | 1 | Di quanti pixel ogni tassello va oltre il suo posto prima di tornare. |
HOLD | script.js | 2.2 | Quanti secondi la foto resta ferma, intera o in ordine, prima che la riga ripassi. |
LOOP | script.js | true | Se la foto si ordina e torna di continuo. Con false lo fa una volta e poi aspetta un clic. |
Quando usarla
Per mostrare una foto come un oggetto da guardare due volte: l’apertura del portfolio di un fotografo o di un colorista, la pagina di una stampa in vendita, la copertina di un reportage, un’app che lavora sulle foto. Funziona con qualunque foto, anche caricata nel Playground.
Sul telefono
La stessa animazione con le misure adattate: la foto è larga quasi quanto lo schermo e le colonne sono più strette. Un tocco sulla foto fa passare la riga subito.
Con il movimento ridotto
Niente si muove: la foto compare in dissolvenza e resta. Un clic passa dalla foto al campo di sfumature (e ritorno) con una dissolvenza, senza tasselli che corrono.
Trappole
- Un tassello per elemento della pagina vorrebbe dire più di novecento div che si muovono insieme, troppi per un telefono: è tutto su una canvas, ridisegnata solo quando qualcosa si muove.
- Disegnata a tasselli con bordi non interi, la foto ferma mostrerebbe righe sottilissime fra un tassello e l’altro (l’antialiasing): una colonna a casa si disegna in un pezzo solo e i bordi dei tasselli in movimento cadono su pixel interi.
- Al passaggio del puntatore le colonne in ordine a metà si aprivano sulla carta, a buchi: sotto i tasselli pettinati resta disegnata la colonna intera della foto.
- Una foto da un altro sito senza il permesso CORS non si può leggere con getImageData: lo script la prova con crossOrigin e, se non può leggerla, usa la foto disegnata.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
