Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
La card col passepartout
Nello stile minimal: la card di una stampa in vendita in una piccola galleria, appesa incorniciata su una parete chiara e disegnata in scala. Al passaggio il passepartout bianco si allarga su una molla, come quando il corniciaio prova un passepartout più largo, e la sua misura è scritta dentro in vermiglio come una quota; titolo, artista e prezzo prendono peso. Al clic il formato passa da A3 ad A2 ad A4 e stampa e cornice crescono o si stringono alla misura vera, mentre le quote contano i centimetri.
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 mat card</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the card of a print for sale in a small gallery. On the wall the print hangs framed, drawn to scale: around
it a white mat, and around the mat a thin black frame. With the pointer over the card (or a tap, or the
keyboard) the mat widens on a spring, as when a framer lays a wider mat on the print, and its width is
written in the mat like a dimension on a drawing. Choosing another format (a click on the print, or the three
sizes below) the print and its frame grow or shrink to the new size on their springs, while the overall size
of the frame counts along its two dimension lines. The frame, the mat, the dimensions and the print are drawn
by the script and the CSS -->
<article class="print" aria-labelledby="print-title" data-print>
<button class="wall" type="button" data-wall data-autoclic>
<span class="frame" data-frame>
<span class="window" data-window>
<!-- the print: a black half disc resting on a line, and a vermilion square balanced on top -->
<svg class="art" viewBox="0 0 210 297" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<rect class="art__paper" width="210" height="297" />
<path class="art__dome" d="M47 200a58 58 0 0 1 116 0z" />
<path class="art__line" d="M30 200.5h150" />
<rect class="art__weight" x="95" y="122" width="20" height="20" />
</svg>
</span>
</span>
<svg class="quotes" aria-hidden="true" data-quotes>
<path class="quotes__size" data-size-lines />
<path class="quotes__size" data-size-ticks />
<text class="quotes__label" data-size-w>0 cm</text>
<text class="quotes__label" data-size-h>0 cm</text>
<path class="quotes__mat" data-mat-line />
<text class="quotes__mat-label" data-mat-label>Mat 5 cm</text>
</svg>
<span class="sr" data-wall-label>Resting Weight, framed. Show the next format</span>
</button>
<div class="info">
<p class="kind">Giclée print · Edition of 50</p>
<div class="head">
<h2 class="title" id="print-title" data-title>Resting Weight</h2>
<p class="price" data-price>€190</p>
</div>
<p class="artist" data-artist>Ada Velloso, 2026</p>
<div class="foot">
<div class="formats" role="radiogroup" aria-label="Format" data-formats></div>
<p class="note" data-note>Black ash frame</p>
</div>
</div>
<p class="sr" aria-live="polite" data-live></p>
</article>
</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.
39 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 card col passepartout» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una card larga 340 pixel. In alto una parete grigio caldo e, appesa al centro, una stampa incorniciata disegnata in scala: la cornice nera sottile, il passepartout bianco con il taglio a smusso color crema intorno all’opera, e l’opera stessa, una mezza cupola nera posata su una riga sottile con un quadratino vermiglio in equilibrio sopra. Intorno alla cornice due quote sottili grigie, come in un disegno tecnico, con le linee di richiamo e i tagli obliqui alle estremità: sotto la larghezza e di lato l’altezza, ruotata, in centimetri. Dentro il passepartout, sotto l’opera, una quota vermiglia dice quanto è largo: Mat 5 cm. Sotto la parete il tipo di stampa, il titolo e il prezzo in Fraunces, il nome dell’artista e tre piccoli fogli disegnati in scala, A4, A3 e A2, con quello scelto che ha dentro il suo passepartout. Col puntatore sopra la card il passepartout si allarga a 8 cm su una molla, passa di un pixel e si posa: la cornice cresce, la sua ombra si stacca dalla parete mentre si muove e la quota conta 5, 6, 7, 8; titolo, artista e prezzo prendono peso uno dopo l’altro e le lettere di Fraunces passano da morbide a nette. Un clic sulla stampa, o su uno dei tre fogli, cambia formato: stampa e cornice crescono o si stringono alla misura nuova, il passepartout cede un poco sotto la spinta e si riapre, le quote contano i centimetri lungo le loro linee e il prezzo conta fino al nuovo. Tutti i formati sono appesi con il centro alla stessa altezza, come nelle gallerie.
Come funziona
Tutto in centimetri
La stampa, il passepartout e la cornice hanno la loro misura vera in centimetri (FORMATS, MAT, MOULDING). La scala della parete, in pixel per centimetro, si calcola dalla cornice più grande che deve entrarci (il formato più grande col passepartout largo e un margine per le quote) e si ricalcola con un ResizeObserver quando la card cambia misura, anche a metà movimento.
Tre molle
Larghezza e altezza della stampa e larghezza del passepartout sono tre molle in centimetri, integrate sul ticker di GSAP in quattro sotto-passi col passo limitato a 1/30 di secondo; rigidità STIFFNESS e smorzamento DAMPING. La molla del passepartout è un po’ più rapida di quella della stampa, e a ogni cambio di formato riceve una spinta di GIVE centimetri contro la crescita: cede e si riapre. Quando tutte e tre sono ferme il ticker le lascia andare.
La cornice disegnata a ogni fotogramma
A ogni passo delle molle si ridisegna la cornice vera, non una sua copia ingrandita: il bordo del riquadro è la cornice nera (border-width), lo sfondo è il passepartout e dentro la finestra ha la sua misura in pixel. Così la cornice e il taglio a smusso restano sottili e netti a ogni misura. La velocità della stampa solleva l’ombra della cornice dalla parete con una variabile CSS.
Le quote
Un SVG sopra la parete disegna le quote in path a mezze coordinate: linee di misura interrotte al centro per il numero, linee di richiamo staccate di tre pixel dalla cornice e tagli obliqui alle estremità. I numeri sono la misura della molla in quel fotogramma, con un decimale e le cifre tabellari, quindi contano mentre la cornice si muove; quello del passepartout conta a centimetri interi verso la meta.
Il peso delle parole
Titolo e prezzo sono in Fraunces variabile: al passaggio il wght va da WEIGHT[0] a WEIGHT[1] con un piccolo superamento (back.out) e l’asse SOFT da 50 a 0, così le lettere si fanno nette; l’artista, in Instrument Sans, prende peso e un filo di larghezza. Le tre righe partono sfalsate di 60 millisecondi, e tornano nell’ordine inverso.
Tastiera e tocco
La stampa è un button che passa al formato dopo; i tre fogli sono un radiogroup con le frecce, Home e End, e ogni foglio è disegnato dallo script nella proporzione del suo formato. Il focus da tastiera fa come il passaggio del mouse; al telefono il dito tiene largo il passepartout e lo lascia un secondo e mezzo dopo, così il cambio si vede.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FORMATS | script.js | [{ name: 'A4', width: 21, height: 29.7, price: 140 }, …] | I formati in vendita, in ordine: il nome, larghezza e altezza della stampa in centimetri e il prezzo. La parete si adatta al formato più grande; al massimo cinque. |
START | script.js | 'A3' | Il formato che si vede all’inizio (il nome, come in FORMATS). |
MAT | script.js | [5, 8] | Quanto è largo il passepartout a riposo e col puntatore sopra, in centimetri. |
MOULDING | script.js | 1.6 | Quanto è larga la cornice nera, in centimetri. |
STIFFNESS | script.js | 150 | Quanto è rapida la cornice a cambiare misura (la rigidità delle molle). |
DAMPING | script.js | 0.72 | Lo smorzamento delle molle: con 1 arrivano senza passare, più basso passano di più. |
GIVE | script.js | 0.7 | Quanto cede il passepartout quando la stampa cresce o si stringe, in centimetri. |
WEIGHT | script.js | [340, 580] | Il peso del titolo e del prezzo, a riposo e col puntatore sopra. |
CURRENCY | script.js | '€' | Il segno davanti al prezzo. |
Quando usarla
Per la scheda di una stampa, di un poster o di una fotografia in vendita: il negozio di una galleria, di un illustratore, di un fotografo, di una tipografia d’arte. Funziona ovunque la misura conti e si scelga fra più formati, perché fa vedere quanto è grande davvero quello che si compra, cornice compresa.
Sul telefono
La card è larga 340 pixel, o lo schermo meno 32, e la scala della parete si ricalcola sulla misura vera. Il passaggio del mouse non c’è: il dito sulla card allarga il passepartout come il puntatore, un tocco sulla stampa o su un foglio cambia formato, e il passepartout largo resta un secondo e mezzo dopo il tocco, così si vede la cornice cambiare. Le molle e i tempi sono gli stessi del computer.
Con il movimento ridotto
Niente molle e niente crescita: la cornice cambia misura di colpo, nascosta da una dissolvenza, e le quote sono subito quelle nuove. Il passepartout si allarga allo stesso modo, il peso delle parole cambia senza animazione e all’apertura tutto è già al suo posto.
Trappole
- Un FLIP fatto con scale ingrandirebbe anche la cornice nera e il taglio a smusso, che si ingrosserebbero durante il cambio: la cornice si ridisegna alla misura vera a ogni passo delle molle, con larghezza, altezza e bordo in pixel.
- Il numero del passepartout preso dalla molla direbbe «Mat 4 cm» per un attimo, quando il passepartout cede al cambio di formato: il numero conta verso la meta con un suo tween, la molla muove solo la linea.
- All’entrata le quote crescono dal centro: con la linea più corta della pausa per il numero il path tornava indietro e disegnava un trattino in mezzo, e le linee di richiamo a lunghezza quasi zero facevano dei puntini. Si disegnano solo quando sono più lunghe della pausa, e i tagli obliqui compaiono con una dissolvenza.
- Invio e Spazio sul pulsante fanno un clic senza detail, come quello dell’anteprima: un tasto premuto lo segna, così da tastiera si cambia formato e non parte il giro dimostrativo.
- La scala della parete viene dalla cornice più grande, col passepartout largo, la spinta del cambio e un margine: altrimenti l’A2 col passepartout largo uscirebbe dalla parete e le quote finirebbero fuori.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,8 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 16 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.
