Il rilievo a trattini
WebGL, 3D, Hover
Gratis
Torna alla libreria
I luoghi sulla mappa inclinata
Cosa c’è intorno a una residenza, nello stile minimal: a sinistra i luoghi, grandi; a destra una mappa di strade a linee sottili, distesa in prospettiva. Puntando un luogo il nome rotola nel suo corsivo, sulla mappa una luce morbida scivola fin lì e il suo segnale si alza in piedi.
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>Places on the tilted map</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/fraunces@5.3.0/full-italic.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>
<!-- what is around a made-up residence, Linden Court. On the left the places, large; on the right a street map in
thin lines, laid down in perspective. Pointing at a place, its name rolls into italics, a hairline slides under
it, and on the map a soft light moves to it and its marker stands up -->
<main class="intorno" data-intorno>
<section class="elenco">
<p class="occhiello">What’s around</p>
<ul class="luoghi" data-luoghi>
<li><button type="button" data-luogo="0"><span class="nome"><span>Central Station</span><span class="corsivo" aria-hidden="true">Central Station</span></span><span class="tempo">6 min by bike</span></button></li>
<li><button type="button" data-luogo="1"><span class="nome"><span>Riverside School</span><span class="corsivo" aria-hidden="true">Riverside School</span></span><span class="tempo">4 min on foot</span></button></li>
<li><button type="button" data-luogo="2"><span class="nome"><span>West Market</span><span class="corsivo" aria-hidden="true">West Market</span></span><span class="tempo">9 min on foot</span></button></li>
<li><button type="button" data-luogo="3"><span class="nome"><span>Harbour Park</span><span class="corsivo" aria-hidden="true">Harbour Park</span></span><span class="tempo">3 min on foot</span></button></li>
<li><button type="button" data-luogo="4"><span class="nome"><span>Old Mill Hall</span><span class="corsivo" aria-hidden="true">Old Mill Hall</span></span><span class="tempo">12 min by tram</span></button></li>
<li><button type="button" data-luogo="5"><span class="nome"><span>City Airport</span><span class="corsivo" aria-hidden="true">City Airport</span></span><span class="tempo">20 min by car</span></button></li>
</ul>
<span class="filo" data-filo aria-hidden="true"></span>
</section>
<div class="mappa" aria-hidden="true">
<div class="piano" data-piano>
<svg class="strade" viewBox="0 0 100 100" data-strade>
<defs>
<radialGradient id="luce">
<stop offset="0" stop-color="#fff" />
<stop offset="0.55" stop-color="#fff" stop-opacity="0.6" />
<stop offset="1" stop-color="#fff" stop-opacity="0" />
</radialGradient>
<mask id="faro" maskUnits="userSpaceOnUse" x="-10" y="-10" width="120" height="120">
<circle data-faro cx="50" cy="50" r="0" fill="url(#luce)" />
</mask>
</defs>
<g class="strade__tenui" data-tenui></g>
<g class="strade__accese" mask="url(#faro)" data-accese></g>
</svg>
<div class="casa" data-casa style="--x: 47%; --y: 52%"><span class="casa__blocco"></span><span class="segno">Linden Court</span></div>
</div>
</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.
33 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 «I luoghi sulla mappa inclinata» da Animorio e adattala al mio sitoCosa fa
La pagina dei dintorni di Linden Court, una residenza inventata. A sinistra sei luoghi, la stazione, la scuola, il mercato, il parco, una sala, l’aeroporto, scritti grandi in un serif chiaro; a destra una mappa di strade sottili, un fiume e la casa, un piccolo blocco oro, distesa all’indietro e girata, come vista da un tetto. Puntando un luogo (o arrivandoci col tasto Tab) il nome sale e al suo posto arriva da sotto la stessa parola in corsivo, più scura; una riga sottile scivola fino a lui e compare il tempo per arrivarci. Sulla mappa una luce morbida scivola sul luogo: sotto la luce le strade diventano scure, e il segnale del luogo, un’asta oro col nome, si alza in piedi con una piccola molla. Tutta la mappa si piega appena verso il puntatore. Se nessuno punta niente, i luoghi si accendono da soli uno dopo l’altro.
Come funziona
La mappa in prospettiva
La mappa è un SVG dentro un piano di CSS: il contenitore ha la prospettiva, il piano ha transform-style: preserve-3d e gira con rotateX(TILT) e rotateZ(TURN). Le strade sono un tracciato solo, fatto di viali, vie corte a caso e un fiume, sfumato ai bordi con una maschera radiale.
Il faro
Le strade sono disegnate due volte: chiare sotto, scure sopra. Il gruppo scuro ha una maschera SVG con un cerchio a sfumatura radiale: GSAP sposta il centro del cerchio sul luogo e ne allarga il raggio a LIGHT, così le strade si scuriscono solo lì, come sotto una torcia.
I segnali in piedi
Ogni segnale sta nel piano, alla sua posizione, ma il suo contenuto ha la rotazione inversa del piano, rotateZ(-TURN) e poi rotateX(-TILT): così si rimette dritto davanti a chi guarda. L’asta del luogo attivo cresce con back.out e un poco di ritardo dopo la luce; le altre restano basse.
Il nome che rotola
Ogni nome ha la sua copia in corsivo nella stessa cella di griglia, con overflow nascosto. Puntandolo, il dritto sale del cento per cento e il corsivo arriva da sotto, in 0,6 secondi con power3.out; la riga sottile va alla voce in BAR_TIME secondi, alta l’80 per cento della riga, come sul sito. La piega verso il puntatore insegue il mouse con FOLLOW a ogni fotogramma.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TILT | script.js | 58 | Quanto è distesa all’indietro la mappa, in gradi. |
TURN | script.js | 38 | Quanto è girata, in gradi. |
LEAN | script.js | [2, 3] | Di quanti gradi si piega verso il puntatore, su e giù e di lato. |
FOLLOW | script.js | 0.08 | Quanto in fretta insegue il puntatore, a ogni fotogramma. |
LIGHT | script.js | 24 | Quanto è grande la luce sulla mappa. |
BAR_TIME | script.js | 0.3 | Quanto ci mette la riga a scivolare su un luogo, in secondi. |
AUTO | script.js | 2.4 | I secondi fra un luogo e l’altro quando nessuno punta; 0 per stare fermi. |
Quando usarla
Per la pagina dei dintorni di una residenza, di un albergo, di una casa vacanza, di un ristorante o di un evento in città: i luoghi vicini, quanto ci vuole, dove sono. La mappa può essere quella vera, disegnata a linee.
Sul telefono
Uguale, con la mappa sopra e i luoghi sotto, più piccoli; si tocca un luogo col dito.
Con il movimento ridotto
La mappa non si piega verso il puntatore, il nome passa al corsivo in dissolvenza invece di rotolare, la luce e la riga saltano subito al luogo.
Trappole
- La maschera che sfuma i bordi va sull’SVG delle strade, non sul piano: una maschera (come overflow o filter) sul piano lo appiattisce, e i segnali resterebbero sdraiati.
- Per rimettere dritto un segnale l’ordine delle rotazioni inverse conta: prima rotateZ(-TURN), poi rotateX(-TILT). Al contrario resta storto.
- Il faro va fatto con una maschera su una seconda copia delle strade: cambiare il colore di ogni strada vicina al luogo sarebbe a scatti e costerebbe molto di più.
- Ogni voce è un pulsante, così si raggiunge col tasto Tab e il focus fa lo stesso del puntatore.
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 6,0 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 17 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.
