La foto in tre passate

Immagini, TransizioniGSAP, CanvasMediaPeso compresso: Demo 7,8 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal: una stampa fotografica si colora in tre passate, come nelle stampanti a sublimazione. Una testina sottile scende tre volte sul cartoncino bianco e lascia il giallo, poi il magenta, poi il ciano, ogni inchiostro fuori registro di qualche pixel finché non scatta al suo posto; un’ultima passata trasparente la fa lucida.

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 photo in three passes</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <header class="top">
      <p class="mark">Dyeline</p>
      <p class="note">Proof</p>
    </header>

    <!-- a print card: a head runs down it three times, laying yellow, then magenta, then cyan, each ink a beat out
         of register until it settles; a last clear pass makes it shine. Click for the next print -->
    <section class="press" data-press>
      <figure class="card" data-card role="img">
        <div class="print" data-print>
          <canvas class="ink" data-ink="y" aria-hidden="true"></canvas>
          <canvas class="ink" data-ink="m" aria-hidden="true"></canvas>
          <canvas class="ink" data-ink="c" aria-hidden="true"></canvas>
          <div class="sheen" aria-hidden="true"><i class="sheen__band" data-band></i><i class="sheen__satin" data-satin></i></div>
          <i class="head" data-head aria-hidden="true"></i>
        </div>
      </figure>

      <ol class="passes" data-passes aria-hidden="true">
        <li class="pass">Yellow</li>
        <li class="pass">Magenta</li>
        <li class="pass">Cyan</li>
        <li class="pass">Coat</li>
      </ol>

      <p class="cap" data-cap aria-live="polite"><span class="cap__title" data-title></span><span class="cap__meta" data-meta></span></p>
    </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.

23 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 «La foto in tre passate» 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 stampa fotografica inventato, Dyeline. Dal basso sale un cartoncino bianco, vuoto, con un bordo largo, e si posa un pixel oltre il suo posto prima di fermarsi. Accanto ci sono quattro parole una sotto l’altra, Yellow, Magenta, Cyan, Coat, sottili e grigie. Prende peso Yellow e una riga gialla, un po’ più larga della stampa, scende lungo il cartoncino: dove è passata resta la foto fatta del solo giallo, chiarissima. Poi la riga diventa magenta e scende di nuovo, e la foto diventa rosa e arancio; poi ciano, e la foto arriva ai suoi colori veri: tre limoni su una tovaglia blu con una foglia. Ogni inchiostro arriva fuori registro di due o tre pixel, e sui bordi della foto si vede per un attimo un filo del colore nuovo; finita la passata scivola al suo posto con una molla. Per ultima prende peso Coat: una riga grigia scende con una fascia di luce che la segue, e sulla stampa resta un riflesso morbido di raso. Sotto la stampa sale il titolo, Lemons on blue, con la misura a destra. Dopo un momento la stampa scivola via verso l’alto e arriva un cartoncino nuovo: una ciambella rosa che galleggia in una piscina, poi una porta rossa in un muro di terracotta al sole. Un clic sulla stampa passa subito alla prossima.

Come funziona

La foto divisa in tre inchiostri

Lo script disegna la foto su una canvas e ne fa tre separazioni: il giallo tiene solo il canale blu (gli altri due a 255), il magenta solo il verde, il ciano solo il rosso. Sono tre canvas una sopra l’altra con mix-blend-mode: multiply sopra il bianco: moltiplicate, ridanno la foto esatta.

La testina e il taglio

Ogni inchiostro ha un numero, r, da 0 a 1, che dice fin dove è stampato: la sua canvas è tagliata con clip-path: inset(0 0 (1 − r) × 100% 0). La testina è un elemento alto due pixel che scende con la stessa curva (sine.inOut) e nello stesso tempo, così il bordo dell’inchiostro è sempre esattamente sotto di lei. Il colore della testina è quello che sta stampando.

Fuori registro, poi a posto

Ogni inchiostro parte spostato di qualche pixel (OFF_REGISTER, in direzioni diverse per magenta e ciano), e verso la fine della passata torna a zero con elastic.out: sui bordi si vede un filo di colore che scatta al suo posto, come nelle prove di stampa progressive.

La passata trasparente

L’ultima passata ha la testina grigia e una fascia di luce bianca in modalità screen che la segue appena sopra; intanto un riflesso diagonale molto leggero cresce e resta sulla stampa finita, come la vernice lucida delle stampe a sublimazione.

Le parole delle passate

Yellow, Magenta, Cyan e Coat sono in Roboto Flex, carattere variabile con gli assi wght e wdth. La parola della passata in corso va a peso 760 con elastic.out e si stringe a larghezza 92; le altre tornano a 300 e 118, grigie. Tutta la regia è una timeline GSAP sola per ogni stampa.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`PRINTS`	script.js	`3 stampe`	Le stampe, una dopo l’altra: il titolo e la riga piccola sotto il cartoncino (le foto le disegna lo script).
`PASS`	script.js	`1.25`	I secondi che la testina impiega a scendere lungo la stampa.
`GAP_BETWEEN`	script.js	`0.35`	I secondi fra una passata e la successiva.
`OFF_REGISTER`	script.js	`3`	Di quanti pixel ogni inchiostro arriva fuori registro prima di scattare al suo posto (0 = sempre a registro).
`HOLD`	script.js	`2.2`	I secondi che la stampa finita resta prima della successiva.

Provali nel Playground

Quando usarla

Per chi stampa o vende stampe: un laboratorio fotografico online, la pagina di un servizio di stampa su carta o cartolina, la scheda di una stampa in edizione limitata, il momento in cui un ordine «va in stampa». Anche come caricamento di una foto in un portfolio.

Sul telefono

La stessa animazione con le misure adattate: il cartoncino è largo quasi quanto lo schermo e le quattro parole stanno in fila sotto, più piccole. Un tocco sulla stampa passa alla prossima.

Con il movimento ridotto

Niente scende e niente scivola: le stampe sono già finite e una lascia il posto all’altra con una dissolvenza.

Trappole

Senza isolation, il multiply delle tre separazioni moltiplicherebbe anche il colore della carta della pagina e la foto verrebbe più calda e scura: il riquadro della stampa ha isolation: isolate e un fondo bianco suo.
La fascia di luce della passata trasparente, piena e larga, sembrava nebbia sulla foto: è al 26% e corre appena sopra la testina, in modalità screen.

Librerie

GSAP 3.15.0, Roboto Flex (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 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.