La carta olografica
Card, 3D, Hover
Gratis
Tutti i componenti
Il pulsante lenticolare
Il pulsante Pre-order di un negozio stampato come una cartolina lenticolare: la faccia è una fila di lenti sottili, prismi a tre facce con un'immagine per faccia. Da sinistra dice Pre-order, da destra Ships Nov 14, e passando il puntatore le lenti si girano a onda col tremolio a righe e la luce che corre sulle creste; premuto, ogni lente gira fino a Reserved, con una spunta che si disegna.
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 lenticular button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the lenticular button: the Pre-order button of a shop, printed like a lenticular postcard. Its face is a row of
thin ribbed lenses, each a little prism with three pictures on it, one per face: seen from the left the card
says Pre-order, from the right Ships Nov 14, and a press turns every lens over to Reserved. The lenses and
their light are drawn by the script on the canvas -->
<div class="lenti" data-lenti>
<button class="lenti__card" type="button" data-card data-autoclic>
<canvas class="lenti__lenses" aria-hidden="true" data-lenses></canvas>
<span class="lenti__sheet" aria-hidden="true"></span>
<span class="sr" data-name></span>
</button>
<p class="sr" aria-live="polite" data-live></p>
</div>
</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.
20 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 «Il pulsante lenticolare» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una tessera di plastica a coste fini, con gli angoli arrotondati e un filo di luce sul bordo di sopra, come una cartolina lenticolare: blu oltremare, con un sacchetto della spesa e Pre-order in color crema, in Bricolage Grotesque. Sulle coste sta ferma una fascia di riflessi sottili, uno per lente. Col mouse sopra, la fascia di luce segue il puntatore scorrendo sulle creste e le lenti si inclinano appena, così le coste si vedono di più. Passato il mezzo, le lenti si girano a onda partendo dal puntatore, ognuna sulla sua molla e un filo in ritardo o in anticipo sulle vicine: per un attimo le due immagini si alternano a righe, blu e arancio, come in una cartolina vera, e la tessera diventa arancio con un pacco e Ships Nov 14. Tornando a sinistra, o uscendo, l'onda la riporta a Pre-order. Premuta, la tessera si schiaccia un poco e ogni lente gira in avanti, dal punto premuto verso i bordi, oltre l'arancio fino alla terza immagine, color carta, con Reserved in blu notte: una spunta blu si disegna mentre atterrano le ultime lenti e una banda di luce corre una volta su tutte le creste. Dopo un momento le lenti finiscono il giro, da un capo all'altro, e tornano all'immagine che il puntatore chiede. All'apertura la tessera arriva girata verso Ships Nov 14 e le lenti si posano su Pre-order da sinistra.
Come funziona
Tre immagini tagliate a strisce
Ogni immagine (fondo, icona, scritta) si dipinge una volta sola su un canvas suo, alla densità dello schermo, e si taglia in strisce larghe quanto una lente (LENS pixel, aggiustati perché ne entri un numero intero). Ogni lente è un prisma a tre facce con l'asse in verticale: la faccia k mostra la sua striscia dell'immagine k, con drawImage dal pezzo giusto. Con tutte le lenti girate verso l'occhio l'immagine torna intera; a metà giro ogni lente ne mostra due, schiacciate, e le immagini si alternano a righe.
Un prisma visto di fronte
Per ogni lente girata di φ gradi, la faccia k ha la normale a θ = φ − 120·k (riportato fra −180 e 180) e si vede se cos θ è positivo. Il suo centro si sposta di a·sin θ (a è l'apotema del triangolo, larghezza / 2√3) e la sua larghezza diventa larghezza · cos θ: su queste misure si disegna la striscia. Fra una lente e l'altra, quando girano, si vede il fondo scuro della tessera.
La luce calcolata per faccia
Ogni faccia è un po' bombata: la sua normale va da θ − 14° a θ + 14° da un bordo all'altro. Per tre punti della faccia la luce morbida del cielo, che viene da sinistra, dà ambiente + diffusa · cos(θ − cielo), divisa per quella della faccia dritta: sotto 1 è un velo nero, sopra 1 un velo bianco, in un gradiente lungo la faccia. Così a riposo si vedono le coste, e una lente che gira si scurisce voltandosi.
Il riflesso sulle creste
Per ogni lente si calcola il vettore a metà fra la direzione della lampada e quella dell'occhio, che sta dove sta il puntatore (il vettore di Blinn). Una faccia luccica dove la sua bombatura gira la normale lungo quel vettore: se la differenza fra i due angoli sta entro 9°, una riga bianca sottile cade nel punto giusto della faccia, più forte al centro, con un alone e un velo morbido intorno. Siccome l'angolo cambia piano lungo la tessera, le righe formano una fascia che segue il puntatore e salta da una lente all'altra quando girano.
Le onde e le molle
Ogni lente ha la sua molla (rigidità SPRING, smorzamento da BOUNCE, due mezzi passi a fotogramma, mai più lunghi di un trentesimo di secondo) e una mossa in attesa con la sua ora sull'orologio di GSAP: una lente parte quando arriva la sua ora, più tardi quanto più è lontana dal puntatore o dal punto premuto, più un ritardo suo fino a 0,07 secondi, così il fronte dell'onda è frastagliato come in una stampa vera. La pressione porta tutte le lenti a 240 gradi passando per 120, e il ritorno le porta avanti a 360 (o indietro a 120, se il puntatore è a destra): alla fine si tolgono 360 gradi a tutte, che è lo stesso angolo.
Il puntatore, il dito, i tasti
Il puntatore inclina le lenti di TILT gradi al massimo e sposta l'occhio; l'immagine cambia solo passato il mezzo di un 6 per cento, così una mano ferma in mezzo non la fa tremare. Un dito trascinato di traverso fa lo stesso (touch-action: pan-y), e il clic che segue un trascinamento non è una pressione. Il focus dal tasto Tab mostra la seconda immagine; Invio e Spazio premono il pulsante, e lo schiacciano da soli perché non c'è niente da lasciare.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FIRST | script.js | Pre-order | La scritta della prima immagine: a riposo, e vista da sinistra. |
SECOND | script.js | Ships Nov 14 | La scritta della seconda immagine: vista da destra, o raggiunta col tasto Tab. |
THIRD | script.js | Reserved | La scritta della terza immagine, dopo una pressione, con la spunta. |
LENS | script.js | 5 | Quanto è larga una lente, in pixel: le immagini si tagliano in strisce così. |
TILT | script.js | 16 | Di quanto si inclinano le lenti seguendo il puntatore, in gradi. |
WAVE | script.js | 0.5 | I secondi che una pressione impiega a girare le lenti da un capo all'altro della tessera. |
SPRING | script.js | 240 | Quanto è rigida la molla di ogni lente: più alta, giri più secchi. |
BOUNCE | script.js | 0.42 | Di quanto una lente oltrepassa la sua immagine prima di fermarsi: 0 per niente. |
GLINT | script.js | 1 | La luce sulle creste delle lenti: 0 niente, 2 il doppio. |
HOLD | script.js | 1.8 | I secondi in cui resta Reserved prima che la tessera torni a girare. |
Quando usarla
Per il pulsante di un preordine o di un'uscita a data fissa: un disco, un libro, una stampa, un paio di scarpe, un oggetto in tiratura limitata. Sta bene dove c'entrano la stampa, i ricordi e le cose da collezione, e dove due informazioni brevi (l'azione e la data) stanno meglio nello stesso posto che una sotto l'altra. Scritte brevi, fino a una quindicina di lettere: il carattere si stringe da solo per entrare. È un pulsante da far vedere, uno per pagina.
Sul telefono
La tessera è alta 60 pixel come gli altri pulsanti e larga 300, o lo schermo meno 48; le lenti si ricontano per la misura vera. Senza mouse il dito trascinato di traverso inclina la tessera e la gira come il puntatore (touch-action: pan-y, così in su e in giù la pagina scorre ancora), e un attimo dopo che si è alzato la tessera torna a Pre-order; un tocco breve è la pressione, e l'onda parte da dove ha toccato il dito.
Con il movimento ridotto
Le lenti non girano e non si inclinano, e la fascia di luce resta ferma. Le immagini passano dall'una all'altra in dissolvenza (un terzo di secondo), col puntatore a destra o col focus come con la pressione; Reserved arriva con la spunta già disegnata e all'apertura c'è già Pre-order. Premuta, la tessera si scurisce appena invece di schiacciarsi.
Trappole
- L'inclinazione verso il puntatore e lo spostamento dell'occhio muovevano la fascia di riflessi in versi opposti, e la fascia restava quasi ferma: le lenti si inclinano dall'altra parte, e ora la luce segue la mano.
- Coi riflessi presi da una lampada lontana e una bombatura larga (24 gradi) ogni lente luccicava, e la tessera sembrava a righe invece che lucida: con la lampada e l'occhio vicini e una bombatura di 9 gradi l'angolo cambia abbastanza lungo la tessera da lasciare una fascia sola. La luce diffusa invece viene da una direzione fissa, perché la lampada vicina scuriva di più un capo della tessera dell'altro.
- Dopo un giro intero l'angolo di una lente è 360 gradi e il riflesso spariva, perché la differenza con il vettore di Blinn non stava più fra −180 e 180: l'angolo di ogni faccia si riporta sempre in quell'intervallo.
- Un fronte d'onda pulito sembrava una tendina, non una stampa lenticolare: un ritardo diverso per ogni lente (fino a 0,07 secondi) lo rende frastagliato, e le due immagini si alternano a righe come in una cartolina vera.
- Il riflesso bianco sulla terza immagine, color carta, non si vedeva: nella banda di luce della pressione ogni cresta getta accanto al suo riflesso un filo d'ombra, e la banda si legge anche sul chiaro.
- La spunta disegnata nella stessa scatola delle altre due icone sembrava un segno a matita: senza un riquadro intorno va disegnata più grande e più spessa (22 pixel invece di 17).
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10,0 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 12 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.
