Il pulsante d’invio
Pulsanti, Transizioni, SVG
NuovaGratis
Tutti i componenti
La galleria delle serigrafie
Le stampe di un piccolo laboratorio di serigrafia, ognuna fatta di tre inchiostri trasparenti che dove si incrociano fanno un terzo colore. Aprendone una, il foglio vola grande in mezzo alla galleria con gli inchiostri che restano un poco indietro e tornano a registro quando atterra; da una stampa all’altra si passa con la racla, che stende sul foglio il primo inchiostro della nuova, si gira, torna col secondo e riparte col terzo, e la stampa si compone dietro la lama.
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 screen-print gallery</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/national-park@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/caveat@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the prints of a small screen-print studio. Every print is three inks on its own paper, drawn by the script as
three separations; open, a print is big in the middle of the gallery, and the squeegee pulls the next one over
it, an ink at a time -->
<section class="prints" aria-label="Screen prints" data-gallery data-autoclic>
<svg class="prints__sprite" aria-hidden="true" focusable="false" data-sprite></svg>
<ul class="prints__grid" data-grid></ul>
<div class="view" role="dialog" aria-modal="true" aria-labelledby="view-title" aria-describedby="view-alt" tabindex="-1" hidden data-view>
<div class="press" data-press>
<h2 class="press__title" id="view-title" data-title></h2>
</div>
<div class="squeegee" aria-hidden="true" data-squeegee></div>
<button class="view__btn view__close" type="button" aria-label="Close the print" data-close>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6.5 6.5l11 11M17.5 6.5l-11 11"/></svg>
</button>
<button class="view__btn view__step view__step--back" type="button" data-prev>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14.5 6 8.5 12l6 6"/></svg>
</button>
<button class="view__btn view__step view__step--on" type="button" data-next>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9.5 6l6 6-6 6"/></svg>
</button>
<p class="sr" id="view-alt" data-alt></p>
<p class="sr" aria-live="polite" data-live></p>
</div>
</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.
15 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 galleria delle serigrafie» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una griglia di sei stampe, ognuna su un foglio con il margine e un’ombra leggera, con sotto il nome e il prezzo: Night Ferry, un traghetto con le finestre accese in un porto di notte sotto la luna; Heron at Dawn, un airone su una zampa fra le canne davanti al sole che sorge; Lemons, tre limoni su un piatto bianco e blu su una tovaglia a righe; The Glasshouse, una serra con la cupola piena di palme sotto un cielo rosa; Koi Pond, due carpe koi che si girano intorno fra le ninfee, viste dall’alto; Last Light, un rifugio con le finestre accese sotto le cime rosa del tramonto. Ogni stampa è fatta di tre inchiostri piatti stesi uno sull’altro, trasparenti come quelli veri: dove il blu passa sul corallo viene il malva, dove il verde passa sul giallo viene l’oliva, e i chiaroscuri sono tratteggi o righe che si assottigliano, come li fa un serigrafo. Sotto il puntatore il foglio si alza e i tre inchiostri si scostano appena, come tre pellicole. Aprendo una stampa, il foglio vola dal suo posto al centro della galleria e si ingrandisce, e i tre inchiostri gli restano un poco dietro, ognuno di più, in proporzione alla velocità: si vedono fuori registro e tornano a posto quando atterra; poi nel margine si scrive a matita il nome. Compaiono una croce per chiudere e due frecce. Andando avanti (frecce, tasti, rotella del trackpad o il dito) una racla di legno con la lama di gomma si posa sul bordo del foglio e lo attraversa: dietro la lama resta la carta della nuova stampa col suo primo inchiostro, lucida di bagnato per un attimo, mentre davanti alla lama rotola il cordone d’inchiostro, che si assottiglia. In fondo la racla si inclina dall’altra parte, prende il secondo inchiostro e torna indietro, poi riparte col terzo, e la stampa si compone sotto gli occhi; la racla si solleva e il nome si scrive a matita. Col dito sul foglio la racla è in mano: trascinata a sinistra stende la stampa dopo, a destra quella prima; lasciata oltre un terzo, o lanciata, continua da sola, altrimenti torna indietro e si solleva. Chiudendo, il foglio torna a volo nel suo posto nella griglia.
Come funziona
Tre telai per stampa
Le stampe le disegna lo script come le preparerebbe un serigrafo: per ognuna tre simboli SVG, uno per inchiostro, su un foglio di 400 per 500. Ogni inchiostro è una forma piena con delle parti tolte (una mask con i buchi in nero), e quello che viene dopo si stampa sopra; le sfumature sono righe che si assottigliano e i chiaroscuri tratteggi (pattern). Nella pagina i tre inchiostri stanno uno sull’altro con mix-blend-mode multiply sopra la carta, così dove due si incrociano fanno un terzo colore, come gli inchiostri trasparenti veri; sopra tutto una grana di carta disegnata una volta su un canvas.
Il volo fuori registro
Aprendo, il foglio grande è già al suo posto e lo script lo riporta sopra la miniatura con translate e scale; poi GSAP lo porta al centro in OPEN secondi. A ogni fotogramma si misura la velocità del foglio e ogni inchiostro viene spostato all’indietro di velocità per DRIFT per la sua quota (0,6, 1,2 e 1,8), con un tetto di 14 pixel: corre fuori registro e ci torna da solo quando il foglio rallenta. Chiudendo, lo stesso verso il suo posto nella griglia.
La racla
Sopra il foglio grande ci sono tre mani della stampa nuova, ognuna con la carta e gli inchiostri fino al suo, tagliate da un clip-path inset il cui bordo è la lama: la prima si stende in un verso, la seconda nell’altro, la terza di nuovo nel primo, in PASS secondi ciascuna. Fra una passata e l’altra la racla si inclina dall’altra parte (il manico passa sopra la lama) e davanti alla lama cambia il colore del cordone. Il cordone è un path ridisegnato a ogni fotogramma, mosso da due seni che scorrono con la lama e più sottile man mano che l’inchiostro si posa; dietro la lama una sfumatura bianca in screen fa la lucentezza del bagnato (SHEEN).
La racla in mano
Un trascinamento di lato sul foglio prende la racla: segue il dito uno a uno e stende il primo inchiostro della stampa dopo (a sinistra) o di quella prima (a destra); oltre l’ultima stampa cede con una resistenza e non stampa niente. Lasciata oltre PULL della larghezza, o lanciata a più di 450 pixel al secondo, la passata continua con la velocità del dito e le altre due seguono; altrimenti la racla torna al bordo e si solleva. In verticale il dito scorre la pagina (touch-action pan-y).
Fretta, tasti e anteprima
Chiedendo un’altra stampa mentre la racla lavora, la passata in corso accelera di quattro volte e la stampa chiesta per ultima viene subito dopo; quelle in mezzo si saltano. La vista grande è una finestra (role dialog, aria-modal) con le frecce, Inizio, Fine, Esc e Tab che resta dentro; il nome a matita è il titolo della finestra, la descrizione di ogni stampa è in aria-describedby e un aria-live dice il nome della stampa nuova. Chiusa, la focalizzazione torna alla miniatura. Un clic da script (l’anteprima della libreria) apre una stampa, ne tira due e la richiude.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PASS | script.js | 0.28 | I secondi che la racla impiega a stendere un inchiostro su tutta la stampa. |
OPEN | script.js | 0.56 | I secondi del volo di una stampa dalla griglia alla vista grande (a tornare va un po’ più svelta). |
DRIFT | script.js | 0.007 | Quanto gli inchiostri restano indietro rispetto alla carta mentre vola, in secondi della sua velocità (0 li tiene a registro). |
SHEEN | script.js | 0.8 | Quanto luccica l’inchiostro bagnato subito dietro la racla. |
PULL | script.js | 0.3 | La parte della stampa che il dito deve far attraversare alla racla perché tiri la stampa dopo. |
Quando usarla
Per il negozio di un illustratore o di un laboratorio di stampa, il catalogo di una galleria d’arte, le tavole di un libro illustrato, i manifesti di un festival: ovunque le immagini siano stampe, o abbiano il sapore della carta e dell’inchiostro.
Sul telefono
Due colonne di stampe. Aperta, la stampa prende la larghezza dello schermo meno lo spazio per la racla ai lati, con la croce sopra e le frecce sotto; il dito trascina la racla di lato e in verticale fa scorrere la pagina. Il sollevarsi sotto il puntatore sul telefono non c’è.
Con il movimento ridotto
Niente volo, niente racla, niente inchiostri che si scostano: la stampa aperta compare con una dissolvenza al suo posto mentre la griglia svanisce, fra una stampa e l’altra c’è una dissolvenza incrociata, chiudendo il foglio svanisce e torna la griglia. I pulsanti e il nome a matita compaiono sfumando.
Trappole
- Più forme messe nello stesso path, se si sovrappongono girando in versi opposti, nella sovrapposizione lasciano un buco (regola nonzero): la collina davanti al sole usciva del colore sbagliato. Ogni forma è un path a sé.
- Un inchiostro chiaro stampato sopra uno scuro lo scurisce ancora (multiply): i cerchi blu del piatto passavano sopra i limoni facendo righe verde scuro. Quello che sta sopra va tolto dal telaio di quello che sta sotto, come in una serigrafia vera.
- Se il fondo dell’immagine è del colore della carta (la neve, un vialetto) l’immagine si confonde col margine e sembra non finire: quelle parti hanno un inchiostro.
- Ogni mano della stampa nuova porta con sé anche la carta, non solo gli inchiostri: così la racla copre davvero la stampa vecchia e il suo nome a matita, che sta sotto le mani.
- Il nome a matita è il titolo della finestra per i lettori di schermo: non si svuota mai, si nasconde con un clip-path e si scrive allargandolo, altrimenti la finestra si apriva senza nome.
- I pulsanti messi a posto con transform si portavano dietro la transition del premuto e scivolavano dall’angolo alla prima apertura: si mettono con left e top.
- Una funzione globale chiamata screen copriva window.screen: i nomi globali non usano le proprietà della finestra.
- Una stampa chiesta mentre la racla lavora non taglia la passata a metà (salterebbe): quella in corso accelera e la nuova parte dopo.
Librerie
GSAP 3.15.0, National Park (font variabile) 5.3.0, Caveat (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 24 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 7 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.
