La transizione a mezzatinta

TransizioniGSAP, CanvasMediaPeso compresso: Demo 6,2 KBGSAP 28 KBGratisScarica lo zip

Un cambio di pagina nello stile minimal: dal punto del clic un retino da tipografia, puntini su una griglia girata di 45 gradi, stampa il colore della pagina dopo in un’onda che sfuma dai puntini piccoli a quelli che si toccano. Poi la pagina nuova esce dal colore pieno attraverso dei fori nello stesso retino, e il suo testo compare prima a puntini e poi intero; per ultimo l’inchiostro del titolo si asciuga.

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 halftone transition</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <!-- the first page, on paper -->
    <section class="page page--a is-on" data-page="a" aria-label="Press">
      <header class="bar">
        <span class="brand">Raster</span>
        <nav class="nav" aria-label="Pages">
          <a href="#press" aria-current="page">Press</a>
          <a href="#papers" data-go="b">Papers</a>
        </nav>
      </header>
      <div class="main">
        <h1 class="big" data-big>Printed matter.</h1>
        <div class="below">
          <p class="lede">A small offset and riso press. Posters, zines and books, printed one dot at a time.</p>
          <a class="go" href="#papers" data-go="b" data-autoclic>
            <span class="go__t">See the papers</span>
            <svg class="go__arrow" viewBox="0 0 26 12" aria-hidden="true"><path d="M1 6h22M18.5 1.5 23.5 6l-5 4.5"/></svg>
          </a>
        </div>
      </div>
      <footer class="foot">
        <span>Print studio</span>
        <span>Screen 45 degrees, 85 lines</span>
      </footer>
    </section>

    <!-- the second page, in ink -->
    <section class="page page--b" data-page="b" aria-label="Papers" aria-hidden="true">
      <header class="bar">
        <span class="brand">Raster</span>
        <nav class="nav" aria-label="Pages">
          <a href="#press" data-go="a">Press</a>
          <a href="#papers" aria-current="page">Papers</a>
        </nav>
      </header>
      <div class="main">
        <h2 class="big" data-big>On paper.</h2>
        <ul class="list" aria-label="Papers">
          <li class="row"><span>Uncoated</span><span class="row__soft">Warm white</span><span class="row__end">120 g</span></li>
          <li class="row"><span>Cotton</span><span class="row__soft">Soft, thick</span><span class="row__end">300 g</span></li>
          <li class="row"><span>Newsprint</span><span class="row__soft">Grey, light</span><span class="row__end">52 g</span></li>
        </ul>
        <a class="go go--back" href="#press" data-go="a" data-autoclic>
          <svg class="go__arrow" viewBox="0 0 26 12" aria-hidden="true"><path d="M25 6H3M7.5 1.5 2.5 6l5 4.5"/></svg>
          <span class="go__t">Back to the press</span>
        </a>
      </div>
      <footer class="foot">
        <span>Print studio</span>
        <span>Screen 45 degrees, 85 lines</span>
      </footer>
    </section>

    <!-- the halftone screen: dots that print the next page's colour, then holes that print its text -->
    <canvas class="screen" data-screen aria-hidden="true"></canvas>
  </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.

35 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 transizione a mezzatinta» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Il sito di una piccola stamperia offset e risograph inventata, Raster, in due pagine: la prima color carta, Printed matter., la seconda nera come l’inchiostro, On paper., con tre carte (Uncoated, Cotton, Newsprint) e la loro grammatura. All’apertura la pagina si stampa dalla carta: il testo compare attraverso dei fori che si allargano in un’onda dal centro, prima a puntini e poi pieno, e le lettere del titolo partono un po’ più pesanti e strette e si asciugano con un elastico. Al clic su See the papers dal punto del clic parte un retino nero: i puntini nascono piccolissimi e crescono uno dopo l’altro allontanandosi, così il fronte dell’onda è una sfumatura stampata, puntini radi davanti e puntini che si toccano dietro, finché tutto lo schermo è nero pieno. Sotto il nero le pagine si scambiano, e la seconda esce dal nero attraverso i fori dello stesso retino, di nuovo dal punto del clic: le parole chiare compaiono a puntini e poi intere, e il titolo On paper. si asciuga lettera per lettera. Al clic su Back to the press succede lo stesso con il retino color carta.

Come funziona

Il retino a 45 gradi

I centri dei puntini sono un reticolo quadrato girato di 45 gradi, come il retino di una stampa in bianco e nero: x = (i − j) · s e y = (i + j) · s, con s = CELL / √2, tenendo solo i punti che cadono nello schermo. Si calcolano una volta per misura e stanno in un Float32Array. Il raggio pieno è 0,74 · CELL, appena più della metà della diagonale della cella, così i puntini pieni si toccano e coprono tutto.

L’onda e la sfumatura stampata

Ogni puntino parte quando l’onda lo raggiunge: il suo tempo è la sua distanza dal clic divisa per quella dell’angolo più lontano. Il raggio cresce con power2.inOut in una finestra larga FRONT del tempo totale, quindi in ogni istante il fronte dell’onda mostra tutti i raggi insieme, dal puntino appena nato a quello pieno: la sfumatura di una stampa a mezzatinta.

Stampare la pagina nuova dai fori

Nella seconda metà il canvas si riempie del colore pieno e i puntini si disegnano con globalCompositeOperation destination-out: sono fori. Sotto c’è già la pagina nuova, dello stesso colore, quindi dai fori si vede solo il suo testo, a puntini, finché i fori si toccano e il canvas è vuoto. Ogni fotogramma è un solo path con migliaia di archi e un solo fill.

L’inchiostro che si asciuga

Il titolo è diviso in lettere, inline-block con font-weight e font-stretch legati a due variabili (Anybody va da 50 a 150 di larghezza e da 100 a 900 di peso). Mentre la pagina esce dai fori le lettere partono a peso 900 e larghezza 58 e tornano a 780 e 62 con elastic.out, sfalsate: l’inchiostro che si allarga sotto la pressa e poi si ritira.

Ridimensionare, telefono e movimento ridotto

Il punto di partenza è tenuto come frazione dello schermo e il retino si ricalcola a ogni ridimensionamento, anche a metà: il canvas prende le misure nuove e l’onda continua dallo stesso punto. Il canvas segue la densità dello schermo fino a 2. Al telefono il retino è più fitto (quattro quinti di CELL). Con il movimento ridotto le pagine si scambiano in dissolvenza.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`CELL`	script.js	`14`	I pixel fra due puntini del retino; al telefono quattro quinti.
`COVER`	script.js	`0.8`	I secondi che i puntini impiegano a stampare il colore su tutta la pagina.
`PRINT`	script.js	`0.9`	I secondi che i fori impiegano a stampare la pagina nuova dal colore.
`FRONT`	script.js	`0.4`	Quanto è larga la sfumatura stampata sul fronte dell’onda, come parte del tempo.
`SPEED`	script.js	`1`	La velocità di tutto: 2 è il doppio, 0.5 la metà.

Provali nel Playground

Quando usarla

Per passare da una pagina all’altra in un sito che ha a che fare con la stampa: una tipografia, una stamperia risograph, una casa editrice, una rivista, un archivio di manifesti, un fotografo in bianco e nero. Funziona meglio fra una pagina chiara e una scura, perché il retino stampa proprio il colore della pagina che arriva.

Sul telefono

La stessa onda con un retino più fitto: dal punto del tocco i puntini coprono lo schermo alto e la pagina nuova esce dai fori, con le stesse curve e gli stessi tempi.

Con il movimento ridotto

Niente retino: la pagina nuova compare in dissolvenza sopra quella di prima, con il titolo già asciutto.

Trappole

Un solo colore che copre e poi si ritira avrebbe nascosto la pagina nuova fino alla fine: la seconda metà non ritira il colore ma lo buca, e il testo della pagina nuova si vede subito attraverso i fori.
Il clic del pilota automatico (el.click()) non ha coordinate: in quel caso l’onda parte dal centro del link.
Con il raggio pieno uguale a metà della diagonale della cella resterebbero dei puntini di vuoto fra quattro puntini pieni, per l’antialiasing: il raggio pieno è un po’ più grande, 0,74 · CELL.
Il titolo diviso in lettere perderebbe lo spazio fra le parole: uno spazio da solo in un inline-block si annulla, quindi diventa uno spazio non separabile.

Librerie

GSAP 3.15.0, Anybody (font variabile) 5.3.0.

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