Certificati che si impilano
Hover, Immagini
NuovaGratis
Torna alla libreria
La mezzatinta che si scioglie
Ogni render di uno studio di CGI sta sotto un campo di colore pieno, con un puntino nero dove l’immagine è scura: a riposo si vede come una stampa a retino. Col mouse sopra, i puntini si restringono uno per uno, ognuno con la sua attesa, il colore svanisce e sotto compare il render a colori; togliendo il mouse il retino torna.
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 halftone that melts away</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/space-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the work page of a small CGI studio: every render is hidden under a flat field of colour, with black dots where
the picture is dark; over a card the dots shrink one by one and the field fades, and the render comes through -->
<main class="pagina">
<header class="testa">
<p class="testa__marchio">Lumen Club</p>
<h1 class="testa__titolo">Selected renders</h1>
<p class="testa__nota">CGI for brands, 2026</p>
</header>
<ul class="griglia">
<li>
<a class="carta" href="#" data-carta data-scena="sfera">
<span class="carta__quadro">
<canvas class="carta__render" data-render aria-hidden="true"></canvas>
<canvas class="carta__retino" data-retino aria-hidden="true"></canvas>
</span>
<span class="carta__nome">Orbit</span>
<span class="carta__dove">a perfume launch</span>
</a>
</li>
<li>
<a class="carta" href="#" data-carta data-scena="anello">
<span class="carta__quadro">
<canvas class="carta__render" data-render aria-hidden="true"></canvas>
<canvas class="carta__retino" data-retino aria-hidden="true"></canvas>
</span>
<span class="carta__nome">Halo</span>
<span class="carta__dove">a headphone brand</span>
</a>
</li>
<li>
<a class="carta" href="#" data-carta data-scena="pila">
<span class="carta__quadro">
<canvas class="carta__render" data-render aria-hidden="true"></canvas>
<canvas class="carta__retino" data-retino aria-hidden="true"></canvas>
</span>
<span class="carta__nome">Stack</span>
<span class="carta__dove">a furniture fair</span>
</a>
</li>
<li>
<a class="carta" href="#" data-carta data-scena="arco">
<span class="carta__quadro">
<canvas class="carta__render" data-render aria-hidden="true"></canvas>
<canvas class="carta__retino" data-retino aria-hidden="true"></canvas>
</span>
<span class="carta__nome">Arch</span>
<span class="carta__dove">a music festival</span>
</a>
</li>
</ul>
</main>
<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.
21 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 mezzatinta che si scioglie» da Animorio e adattala al mio sitoCosa fa
La pagina dei lavori di uno studio inventato, Lumen Club, che fa render per i marchi: quattro carte su un fondo quasi nero, ognuna con il nome del progetto e per chi è. A riposo ogni carta è un rettangolo blu oltremare pieno di puntini neri finissimi; dove il render è chiaro il blu resta pieno, così si leggono le sagome: una palla, un anello, tre scatole impilate, una porta piena di tramonto con una persona in controluce. Passando sopra una carta, i puntini si restringono fino a sparire, non tutti insieme ma ognuno dopo un’attesa sua, mentre il blu si fa trasparente: in mezzo secondo si vede il render a colori, con le luci e le ombre. Uscendo dalla carta il retino torna allo stesso modo, e i puntini ricompaiono nello stesso ordine. Al telefono un tocco scopre la carta e un altro la ricopre.
Come funziona
I render
Ogni carta ha un canvas con il render, dipinto dallo script con gradienti: una stanza scura e un oggetto acceso dall’alto a sinistra. Conta che le ombre siano davvero scure, sotto DARK: lì andranno i puntini, e la forma si legge anche nel retino.
Dove vanno i puntini
Il render si legge rimpicciolito, al massimo SAMPLE pixel di larghezza. La griglia ha celle grandi quanto il lato corto della carta diviso CELL[0], mai meno di CELL[1] pixel. Ogni cella guarda la luminosità del suo centro (0,299 il rosso, 0,587 il verde, 0,114 il blu) e, se è sotto DARK, riceve un puntino.
Un’attesa per ogni puntino
Ogni puntino ha un’attesa fra 0 e 1, presa da un hash della sua riga e della sua colonna: sembra a caso, ma è sempre la stessa, quindi rimpicciolendo la finestra il disegno non tremola e i puntini tornano nell’ordine in cui erano spariti.
Un numero per disegnare tutto
Un numero p va da 0 a 1 in DURATION millisecondi, in linea retta. Il campo si disegna con trasparenza 1 meno p; ogni puntino ha raggio mezza cella per 1 meno (p meno la sua attesa) diviso (1 meno l’attesa), cioè resta pieno finché p non supera la sua attesa e poi si restringe. Tutti i cerchi stanno in un unico tracciato e si riempiono in una volta sola.
Quale carta si scopre
La carta da scoprire la sceglie lo script guardando quale elemento c’è sotto il mouse a ogni movimento, così funziona anche col pilota automatico dell’anteprima; con la tastiera si scopre la carta che ha il fuoco, col dito quella toccata.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
CELL | script.js | [150, 3] | La griglia: il lato corto della carta diviso il primo numero, mai meno del secondo in pixel (come nel sito). |
DARK | script.js | 0.26 | Quanto deve essere scuro un punto per avere il suo puntino, da 0 (nero) a 1 (bianco); nel sito 0,26. |
DURATION | script.js | 520 | I millisecondi in cui i puntini si sciolgono e tornano (nel sito 240). |
SAMPLE | script.js | 1024 | La larghezza massima a cui si legge il render per piazzare i puntini. |
Quando usarla
Per la pagina dei lavori di uno studio, una galleria di prodotti o un archivio di copertine: a riposo la pagina ha un aspetto unico e grafico, e l’immagine vera si guadagna passandoci sopra.
Sul telefono
Uguale, con le carte una sotto l’altra: un tocco scioglie il retino e un altro lo rimette.
Con il movimento ridotto
I puntini non si restringono: il retino intero svanisce con una dissolvenza e torna allo stesso modo.
Trappole
- Un retino fa solo due cose, puntino o niente: se il render ha poche zone scure si vede solo una sagoma piatta. Le facce in ombra vanno dipinte sotto DARK, così la forma si legge anche coperta.
- Il passaggio del mouse lo decide lo script e non :hover né pointerenter: il pilota automatico dell’anteprima manda eventi finti, e un pointerleave che risale da un figlio chiuderebbe la carta mentre il mouse è ancora sopra.
- Migliaia di cerchi disegnati uno per uno rallentano: stanno tutti in un tracciato solo e si riempiono con un unico fill.
Librerie
Space Grotesk (font variabile) 5.3.0, JetBrains Mono (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,2 KB, e non servono librerie.
Collaudo
Provata il 10 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.
