L’immagine incisa a righe

Immagini, HoverGSAP, CanvasMediaPeso compresso: Demo 7,0 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal: un’immagine fatta solo di righe orizzontali nere, come un’incisione da banconota, che si gonfiano dove è scuro. Le righe si incidono sottili da sinistra a destra, poi un’onda scende e ognuna prende peso, e compare una pera; poi la montagna, poi la luna, una riga alla volta. Il puntatore apre le righe come una lente.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The picture engraved in lines</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <header class="top">
      <p class="mark">Burin</p>
      <p class="note">Line engravings</p>
    </header>

    <!-- the plate: a picture made only of horizontal lines that swell where it is dark. The lines are cut, then
         take their weight; one picture flows into the next line by line. The pointer parts the lines like a lens -->
    <figure class="plate" data-plate role="img">
      <canvas class="lines" data-lines aria-hidden="true"></canvas>
      <figcaption class="cap" aria-live="polite">
        <span class="cap__title" data-title></span>
        <span class="cap__meta" data-meta></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.

18 valori da cambiare

Apri il Playground

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 «L’immagine incisa a righe» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Una pagina color carta con in alto a sinistra il nome di un laboratorio di incisione inventato, Burin, e a destra Line engravings. Al centro una lastra fatta di settantaquattro righe orizzontali. Prima le righe si incidono: sottilissime, una dopo l’altra dall’alto, ognuna tracciata da sinistra a destra, finché la lastra è un foglio a righe. Poi un’onda scende lungo la lastra e ogni riga prende peso dove l’immagine è scura, un po’ più del necessario e poi torna, con un assestamento: compare una pera su un tavolo, col picciolo, la foglia e la sua ombra, fatta solo di righe più grosse e più sottili. Sotto la lastra il titolo, Pear, in un serif variabile che prende peso insieme alle righe. Dopo qualche secondo la stessa onda porta la lastra all’immagine dopo, riga per riga dall’alto: una montagna con la neve in cima e il sole dietro la spalla, poi la luna al primo quarto su un cielo nero, con i crateri lungo il confine dell’ombra. Il titolo vecchio si assottiglia e svanisce, il nuovo arriva sottile e prende peso. Passando col mouse sopra la lastra le righe si aprono intorno al puntatore come sotto una lente, su una molla, e la riga sotto il puntatore diventa rossa.

Come funziona

L’immagine come mappa di grigi

Ogni immagine è disegnata dallo script su una canvas nascosta, in grigi, e letta una volta con getImageData: per ogni pixel quanto è scuro, da 0 (carta) a 1 (inchiostro). Poi per ogni riga e per 180 punti lungo la riga si fa la media della striscia che le spetta, così niente cade fra due righe.

Una riga che si gonfia

Ogni riga è un poligono pieno: il bordo di sopra e quello di sotto distano 0,55 pixel dove l’immagine è chiara e fino a THICK dello spazio fra due righe dove è scura. È disegnata a ogni fotogramma sulla canvas visibile, dal ticker di GSAP.

L’onda che cambia immagine

Ogni riga sa da quale immagine viene e verso quale va, e ha un numero p da 0 a 1. Una timeline lo porta a 1 con elastic.out, una riga dopo l’altra dall’alto in SWEEP secondi: lo spessore passa oltre quello giusto e torna. All’inizio le righe vengono «dal bianco» e un primo giro le incide (la loro lunghezza va da 0 a 1, da sinistra).

La lente

Il puntatore segue con quickTo, e una forza che sale con una molla (elastic.out) sposta ogni punto delle righe di dy/σ × e^(−d²/2σ²), con σ = LENS: le righe sopra salgono, quelle sotto scendono, in modo continuo, e si apre una lente vuota. La riga più vicina al puntatore si disegna nell’accento.

Il titolo che prende peso

Il titolo è in Fraunces, un serif variabile: il peso sta in una variabile CSS letta da font-variation-settings. Quando cambia l’immagine va a 100 e svanisce, cambia testo e torna a 560 con elastic.out mentre l’onda scende.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`PICTURES`	script.js	`3 immagini`	Le immagini disegnate dallo script, una dopo l’altra: il titolo e la riga piccola.
`LINES`	script.js	`74`	Quante righe fanno la lastra (sul telefono un po’ meno).
`THICK`	script.js	`0.9`	La riga più grossa, come parte dello spazio fra due righe.
`SWEEP`	script.js	`1.1`	I secondi che l’onda impiega a scendere lungo la lastra.
`HOLD`	script.js	`2.6`	I secondi che un’immagine resta prima della successiva.
`LENS`	script.js	`64`	La grandezza della lente che apre il puntatore, in pixel.
`PART`	script.js	`2.2`	Quanto la lente allontana le righe, in spazi fra le righe (0 = niente lente).

Provali nel Playground

Quando usarla

Per chi vende o mostra stampe, incisioni e illustrazioni: la vetrina di un laboratorio d’arte, la pagina di una mostra, l’apertura del portfolio di un illustratore, una galleria che vuole un tono da carta stampata. Anche la pagina di un prodotto di carta, di una banca o di una zecca.

Sul telefono

La stessa animazione con le misure adattate: la lastra è larga quasi quanto lo schermo e ha meno righe, un po’ più fitte di spessore. La lente si apre sotto il dito.

Con il movimento ridotto

Niente si incide né si gonfia e non c’è lente: l’immagine è già incisa, e una lascia il posto all’altra con una dissolvenza.

Trappole

Con la spinta della lente troppo forte le righe spinte in su si appoggiavano su quelle sopra e il bordo della pera diventava una macchia: la spinta è più dolce e continua, senza salti fra sopra e sotto.
La lente seguiva il puntatore anche fuori dalla lastra e restava aperta sul bordo: uscendo dalla lastra la forza torna a zero sulla sua molla.
Leggendo l’immagine in un solo punto per riga, i dettagli piccoli (il picciolo, i crateri) cadevano fra due righe e sparivano: ogni riga fa la media di tutta la sua striscia.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 7,0 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.