La carta olografica

Card, 3D, HoverGSAPMediaPeso compresso: Demo 6,3 KBGSAP 28 KBGratisScarica lo zip

Un pass da museo che si inclina verso il puntatore, su molle: le linee incise e il titolo hanno una lamina arcobaleno che scorre mentre la carta si piega, un riflesso segue la luce e, premuta, la carta si gira e mostra il retro.

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 holographic card</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/unbounded@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <!-- the card: a museum pass that leans towards the pointer on springs. The foil on its engraved lines turns
         through the colours as it tilts, a glare follows the light, and a press turns it over. The engraving is
         drawn by the script -->
    <div class="pass" data-pass>
      <button class="card" type="button" aria-pressed="false" aria-label="Annual pass. Turn it over" data-card>
        <span class="card__face card__face--front">
          <svg class="card__lines" viewBox="0 0 340 476" preserveAspectRatio="none" aria-hidden="true" data-lines>
            <defs>
              <linearGradient id="foil" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="340" y2="476" data-foil>
                <stop offset="0" stop-color="#ff7aa8"/>
                <stop offset="0.17" stop-color="#ffd36e"/>
                <stop offset="0.34" stop-color="#7dffbe"/>
                <stop offset="0.5" stop-color="#6cd4ff"/>
                <stop offset="0.67" stop-color="#b38cff"/>
                <stop offset="0.84" stop-color="#ff7aa8"/>
                <stop offset="1" stop-color="#ffd36e"/>
              </linearGradient>
            </defs>
            <g data-engraving></g>
          </svg>
          <span class="card__scrim" aria-hidden="true"></span>
          <span class="card__sheen" aria-hidden="true"></span>
          <span class="card__top">
            <svg class="card__mark" viewBox="0 0 32 32" aria-hidden="true"><path d="M16 3a13 13 0 1 0 0 26a13 13 0 1 0 0-26zM16 9a7 7 0 1 1 0 14M3 16h26"/></svg>
            <span class="card__brand">Lumen</span>
            <span class="card__kind">House of Light</span>
          </span>
          <span class="card__title">Annual<br>pass</span>
          <span class="card__foot">
            <span><span class="card__small">Member</span><span class="card__name">Mara Lindqvist</span></span>
            <span><span class="card__small">Valid until</span><span class="card__name">10/2027</span></span>
          </span>
        </span>
        <span class="card__face card__face--back">
          <span class="card__small">Scan at the door</span>
          <svg class="card__code" viewBox="0 0 220 64" preserveAspectRatio="none" aria-hidden="true" data-code></svg>
          <span class="card__note">One person, every day the house is open. Keep it with you: it is not transferable.</span>
          <span class="card__brand card__brand--back">Lumen</span>
        </span>
        <span class="card__glare" aria-hidden="true"></span>
      </button>
      <p class="pass__hint" aria-hidden="true" data-hint>Press to turn it over</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.

24 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 carta olografica» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero una carta viola scurissimo dagli angoli tondi: in alto il segno e la scritta LUMEN, House of Light, in mezzo una rosetta di linee ondulate incise e il titolo Annual pass, in fondo Member Mara Lindqvist e Valid until 10/2027; sotto la carta, Press to turn it over. La carta entra di sbieco e si raddrizza su una molla. Col puntatore sopra si inclina verso di lui e si ingrandisce un poco: le linee incise cambiano colore come una lamina olografica, con rosa, giallo, verde, azzurro e viola che scorrono, il titolo luccica con un’altra sfumatura, una fascia di luce la attraversa e un riflesso chiaro segue l’inclinazione; le scritte galleggiano appena sopra la carta. Col puntatore lontano la carta si volta solo un poco verso di lui, e quando nessuno la tocca ondeggia piano da sola. Premuta, si gira su una molla, si stringe un attimo quando è di taglio e mostra il retro: Scan at the door, un codice a barre nero su un’etichetta bianca, una nota e LUMEN; la scritta sotto diventa Press to see the front.

Come funziona

Due facce

La carta è un pulsante con transform-style: preserve-3d e due facce con backface-visibility: hidden, il retro già girato di 180 gradi. Lo script le dà rotateX, rotateY e scale, e quando la carta è di taglio nasconde anche con visibility la faccia che si gira via; le dissolvenze stanno sul contenitore, perché un’opacità sulla carta la appiattirebbe e il retro si vedrebbe attraverso il davanti.

La lamina

Le linee incise le disegna lo script: anelli che ondeggiano (raggio + ampiezza · sin(onde · angolo + giro)), ognuno un po’ girato rispetto a quello dentro, così si incrociano. Il loro tratto è un linearGradient SVG arcobaleno che lo script sposta con gradientTransform secondo l’inclinazione; il titolo ha un gradiente ritagliato sulle lettere con background-clip: text e spostato da --title.

La luce

Dall’inclinazione vengono anche il riflesso (--gx e --gy di un radial-gradient), la fascia di luce (--sheen) e il piccolo spostamento delle scritte (--px e --py): la luce segue le molle e l’ondeggiare, non il puntatore. Sul retro il riflesso è specchiato, perché lo stesso elemento girato vede la luce dal lato opposto.

Le molle

La posizione del puntatore rispetto al centro della carta, da −1 a 1, diventa l’inclinazione voluta: TILT gradi sopra la carta, un terzo da lontano, e LIFT di grandezza sopra la carta. Due molle con SPRING la seguono, calcolate a passi di 4 millisecondi. Senza nessuno sopra la carta, l’inclinazione voluta diventa due onde lente di SWAY gradi.

Il giro

Premuta, la carta vuole girarsi di 180 gradi e una terza molla con TURN la porta lì; una piccola spinta di lato fa partire il giro con un’inclinazione, e quando la carta è di taglio si stringe del 6 per cento. aria-pressed e l’etichetta dicono quale faccia si vede. Col dito: appoggiato sulla carta la inclina, un tocco la gira.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`TILT`	script.js	`16`	Quanto si inclina al massimo la carta verso il puntatore, in gradi.
`SPRING`	script.js	`[170, 0.5]`	La molla dell’inclinazione: quanto è rigida e quanto è frenata (1 = senza rimbalzi).
`LIFT`	script.js	`1.045`	Quanto si ingrandisce la carta col puntatore sopra.
`SWAY`	script.js	`4`	Quanto ondeggia da sola la carta quando nessuno la tocca, in gradi.
`TURN`	script.js	`[120, 0.6]`	La molla che gira la carta: quanto è rigida e quanto è frenata.

Provali nel Playground

Quando usarla

Per una tessera, un biglietto, un buono regalo o un abbonamento; per la carta di un gioco, il badge di un evento, il prodotto da mettere in mostra in una pagina di presentazione.

Sul telefono

La carta prende quasi tutta la larghezza dello schermo. Col dito appoggiato si inclina verso il dito (ha touch-action: none, quindi sopra la carta il dito non fa scorrere la pagina), un tocco la gira, e lasciata torna a ondeggiare da sola.

Con il movimento ridotto

La carta resta dritta: niente inclinazione, ondeggiare o entrata; premuta, mostra l’altra faccia con una breve dissolvenza invece di girarsi.

Trappole

Un’opacità sulla carta, anche solo per un’entrata, la appiattisce: le due facce finiscono sullo stesso piano e backface-visibility non nasconde più il retro. Le dissolvenze stanno sul contenitore.
Una faccia con overflow: hidden appiattisce il 3D dei suoi figli: le scritte non possono stare più avanti con translateZ, e il loro distacco dalla carta è un piccolo spostamento in 2D calcolato dall’inclinazione.
Sul retro il riflesso va specchiato: lo stesso elemento, girato di 180 gradi, vede la luce dal lato opposto.
Safari non sempre nasconde la faccia girata con backface-visibility quando quello che contiene ha una trasformazione sua, e sul retro si leggerebbero, specchiate, le scritte del davanti: lo script nasconde anche con visibility la faccia girata, nell’istante in cui la carta è di taglio e lo scambio non si vede.
Una carta che ondeggia da sola non è mai ferma, e un clic automatico che aspetta un elemento fermo (come quello di Playwright) aspetterebbe per sempre; col puntatore fermo sopra la carta l’ondeggiare non riparte.

Librerie

GSAP 3.15.0, Unbounded (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 6,3 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 3 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Fatto

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.