La carta olografica
Card, 3D, Hover
Gratis
Tutti i componenti
La carta in rilievo
La card di un giro in montagna con la mappa fatta di fogli di carta tagliati lungo le curve di livello: quando il puntatore si avvicina i fogli si alzano uno dopo l’altro su molle e la mappa diventa un plastico visto da dove sta il puntatore, coi bordi tagliati e le ombre. Preview route sorvola il giro: la camera si avvicina e segue un segnalino che sale i fogli a gradini, mentre distanza e dislivello contano con lui.
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 relief map card</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geologica@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the card of a mountain loop. Its map is a stack of paper sheets cut along the contour lines: as the pointer
comes near, the sheets rise one after another into a relief seen from where the pointer is. Preview route
flies over the loop with a marker that climbs the sheets. The map is drawn by the script -->
<article class="trail" aria-labelledby="trail-title" data-trail>
<div class="trail__map" data-map-box>
<canvas class="trail__canvas" role="img" aria-label="Relief map of the loop: from Larch Lake up the ridge to Cairn Peak, down the east valley and back to the lake" data-map></canvas>
</div>
<div class="trail__body">
<h2 class="trail__title" id="trail-title" data-title>Cairn Ridge Loop</h2>
<p class="trail__where">A day loop from Larch Lake</p>
<dl class="trail__facts">
<div>
<dt>Distance</dt>
<dd><span data-count>11.4</span><span class="trail__unit"> km</span></dd>
</div>
<div>
<dt>Ascent</dt>
<dd><span data-count>720</span><span class="trail__unit"> m</span></dd>
</div>
</dl>
<button class="go" type="button" data-go>
<span class="go__fill" aria-hidden="true" data-fill></span>
<span class="go__icon" aria-hidden="true">
<span class="go__glyph go__glyph--play" data-icon="play"><svg viewBox="0 0 24 24"><path d="M8.5 5.8v12.4a.8.8 0 0 0 1.2.7l9.6-6.2a.8.8 0 0 0 0-1.4L9.7 5.1a.8.8 0 0 0-1.2.7z"/></svg></span>
<span class="go__glyph" data-icon="cancel"><svg viewBox="0 0 24 24"><path d="M7 7l10 10M17 7L7 17"/></svg></span>
<span class="go__glyph" data-icon="again"><svg viewBox="0 0 24 24"><path d="M18.6 13.2a6.8 6.8 0 1 1-1.9-5.9"/><path d="M17.6 3.8v4.1h-4.1"/></svg></span>
</span>
<span class="go__label" data-label>Preview route</span>
</button>
<p class="sr" aria-live="polite" data-live></p>
</div>
</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.
35 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 carta in rilievo» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una card bianca dagli angoli tondi. In alto la mappa del giro, come una carta topografica: il lago Larch Lake azzurro con le linee d’acqua che seguono la riva, i prati verdi, poi le fasce color sabbia e nocciola che salgono fino alla cima bianca, Cairn Peak 2,214 m col suo triangolo; ogni fascia ha il suo bordo marrone e due curve di livello leggere. Il sentiero è un tratteggio rosso su un filo bianco: parte da un segnavia bianco e rosso sulla riva, sale a tornanti, segue la cresta fino alla cima e torna giù dalla valle a est. Sotto la mappa: Cairn Ridge Loop, A day loop from Larch Lake, Distance 11.4 km, Ascent 720 m e il pulsante verde scuro Preview route. All’arrivo la card sale e i fogli cadono sulla mappa uno dopo l’altro, dal più basso. Quando il puntatore si avvicina, la mappa diventa un plastico di carta: i fogli si alzano uno dopo l’altro su molle che rimbalzano appena, quelli in alto per ultimi; dalla parte del puntatore si vede lo spessore dei bordi tagliati e ogni foglio fa un’ombra morbida su quello sotto. La cima scivola via dal puntatore e cresce un poco, e muovendo il puntatore si gira intorno al rilievo; più il puntatore è lontano, meno la mappa si alza. Intanto gli angoli delle lettere del titolo si fanno più vivi. Col puntatore sul pulsante, il pulsante si gonfia appena e i trattini del sentiero cominciano a camminare nel verso del giro. Premuto, il pulsante diventa Stop preview e si riempie piano di un verde più chiaro: la camera si avvicina e segue una freccia rossa che percorre il sentiero, sale i fogli a gradini con un piccolo salto e si lascia dietro una linea rossa piena, mentre Distance e Ascent contano da zero; i nomi sulla mappa svaniscono finché la camera è vicina. Alla fine la camera torna indietro, il sentiero resta rosso pieno, i dati tornano ai totali e il pulsante dice Preview again. Premuto durante il volo, il sentiero si cancella all’indietro e tutto torna a riposo.
Come funziona
Il terreno
Il rilievo è una funzione d’altezza: una cresta (una gaussiana lungo un segmento), la cima, una spalla e due conche per i laghi, tutto piegato da un rumore a ottave che sposta le coordinate e aggiunge dettaglio. Lo script la calcola su una griglia, un punto ogni 1,5 pixel, insieme alla ripidità; poi ogni pixel dei fogli prende altezza e ripidità per interpolazione, una volta sola.
I fogli, tagliati pixel per pixel
Per ogni foglio, (altezza − livello) / ripidità è la distanza in pixel dalla curva di livello: da lì vengono il bordo sfumato di un pixel, la riga marrone lungo il taglio, due curve leggere stampate sul foglio e la grana della carta. Ogni foglio diventa tre immagini: la faccia, il bordo (la stessa sagoma più scura) e l’ombra (la sagoma sfocata con shadowBlur, disegnata fuori dalla tela perché resti solo l’ombra). I fogli si tagliano uno per fotogramma mentre cadono in entrata.
La prospettiva
L’occhio sta a EYE pixel sopra un punto E della mappa: un foglio alto z si disegna ingrandito di EYE / (EYE − z) intorno a E, quindi i fogli alti crescono e scivolano via dall’occhio. Il bordo è la sagoma scura ripetuta alle altezze fra il foglio sotto e il suo, quanto basta a non lasciare buchi; l’ombra cade sul foglio sotto, spostata dalla parte opposta alla luce. E segue il puntatore, allungato e spostato un po’ a sud, così col puntatore in mezzo il rilievo si vede già di sbieco.
Le molle
La distanza del puntatore dalla mappa, su REACH pixel, dice quanto alzarla. Ogni foglio ha la sua molla con SPRING, calcolata a passi di 4 millisecondi, e più il foglio è in alto più la molla è morbida (LAG): la pila si apre dal basso e la cima arriva per ultima. Un foglio sta sopra quello sotto di RISE pixel per la sua alzata; in entrata cade da un po’ più in alto mentre compare.
Il sentiero sui fogli
Il sentiero è una curva di Catmull-Rom chiusa, misurata un punto per pixel; ogni punto sa su che foglio sta. I tratti si disegnano subito dopo il loro foglio, così i fogli più alti li coprono dove devono, e un punto in più a ogni capo disegna il gradino. Il filo bianco va solo lungo il foglio, il rosso anche sul gradino. I trattini hanno lineDashOffset uguale alla lunghezza percorsa, così il disegno continua da un foglio all’altro; col pulsante puntato scorre in avanti.
Il volo
Una timeline GSAP porta la frazione del giro da 0 a 1 in FLIGHT secondi. La camera si avvicina fino a ZOOM e segue la freccia su molle, l’occhio le sta dietro, la freccia salta su ogni foglio con una molla sua. Distance conta con la lunghezza percorsa, Ascent con la salita accumulata lungo il campo d’altezza, e i totali restano le parole della pagina. Annullato, il sentiero si cancella all’indietro e i dati tornano ai totali.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SHEETS | script.js | 12 | In quanti fogli di carta è tagliato il rilievo. |
RISE | script.js | 3.8 | Quanto sta ogni foglio sopra quello sotto, in pixel. |
SPRING | script.js | [150, 0.42] | La molla dei fogli: quanto è rigida e quanto è frenata (1 = senza rimbalzi). |
LAG | script.js | 0.55 | Quanto in ritardo risponde il foglio in cima rispetto al più basso (0 = tutti insieme). |
EYE | script.js | 460 | Quanto sta in alto l’occhio sopra la mappa, in pixel: più basso, rilievo più forte. |
REACH | script.js | 460 | Fino a quanti pixel dalla mappa il puntatore la alza ancora. |
FLIGHT | script.js | 6.5 | Quanti secondi dura il volo sopra il percorso. |
ZOOM | script.js | 1.4 | Quanto si avvicina la camera durante il volo. |
SUMMIT | script.js | ['Cairn Peak', '2,214 m'] | Il nome e l’altezza della cima sulla mappa. |
LAKE | script.js | 'Larch Lake' | Il nome del lago sulla mappa. |
WORDS | script.js | ['Stop preview', 'Preview again'] | Le scritte del pulsante durante il volo e dopo. |
Quando usarla
Per la scheda di un percorso in un’app di escursioni, di corsa o di bici; per un rifugio, un parco, una gara in montagna, un’isola da visitare: ovunque un luogo abbia un dislivello da raccontare.
Sul telefono
La card è larga 340 pixel, o lo schermo meno 32, e la mappa si ridisegna alla misura vera. Il dito appoggiato sulla mappa la alza e la guarda dalla sua parte (la mappa ha touch-action: none, quindi lì sopra il dito non fa scorrere la pagina), spostandolo si gira intorno al rilievo e, lasciato, i fogli si posano. Preview route si tocca come un pulsante qualsiasi e il volo è lo stesso.
Con il movimento ridotto
Il plastico sta già alzato, visto da sud, e non segue il puntatore; niente fogli che cadono in entrata e niente trattini che camminano. Preview route non vola: il sentiero diventa rosso pieno in una dissolvenza e il pulsante passa a Preview again; le scritte e le icone del pulsante cambiano in dissolvenza, senza scivolare.
Trappole
- Il filo bianco di un tratto, disegnato anche sul gradino, copriva il rosso del tratto prima, e la linea già percorsa sembrava spezzata a ogni curva di livello: il filo bianco va solo lungo il foglio, il rosso anche sul gradino.
- Tagliare dodici fogli pixel per pixel a densità maggiorata per lo zoom costava più di 300 millisecondi, troppo per un telefono: ora i fogli hanno la densità dello schermo, la grana è una piastrella ripetuta, la ripidità si tiene come 1 / ripidità (moltiplicazioni invece di divisioni) e i fogli si tagliano uno per fotogramma mentre cadono in entrata, circa 7 millisecondi l’uno.
- Con la camera vicina il bordo della finestra tagliava a metà i nomi della cima e del lago: le etichette svaniscono mentre la camera si avvicina, e il nome della cima scende quando il rilievo lo spinge contro il bordo in alto.
- Con lineDashOffset uguale a meno l’inizio di ogni tratto il disegno dei trattini saltava da un foglio all’altro: la fase giusta è più l’inizio, cioè la lunghezza lungo il sentiero.
- Dopo un volo annullato il dislivello restava a 719 invece di 720: il conteggio che torna ai totali non arrivava mai all’ultimo passo; alla fine si scrive il totale esatto.
- Il pilota automatico delle anteprime porta il puntatore su tutta la finestra, e con un raggio di 360 pixel la mappa restava piatta per metà del tempo: con REACH a 460 ai lati si alza ancora a metà, vista di sbieco.
Librerie
GSAP 3.15.0, Geologica (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 15 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 6 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.
