Gli anelli del giroscopio
3D, Intro
NuovaGratis
Torna alla libreria
Il marchio che diventa una mappa
Il marchio di uno studio del suono letto come un paesaggio, nello stile minimal: visto dall’alto è solo un fascio di curve di livello sottili; poi le linee salgono, la vista si inclina e i tratti del marchio diventano valli. La linea più profonda, in blu, disegna il marchio. Si gira col trascinamento.
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 mark that becomes a map</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the mark of a made-up sound studio, seen from above as thin contour lines; the lines rise into a landscape
where the strokes of the mark are valleys, the view tilts, and the deepest line, the mark itself, turns blue -->
<main class="soglia" data-soglia>
<canvas class="tela" data-tela aria-hidden="true"></canvas>
<p class="nome"><span>Halde</span><span class="nome__sotto">sound</span></p>
<p class="aiuto">Drag to turn the map</p>
</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.
15 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 marchio che diventa una mappa» da Animorio e adattala al mio sitoCosa fa
Il marchio di Halde, uno studio del suono inventato, come una carta topografica. All’inizio lo si guarda da sopra: è fatto solo di curve di livello chiare e sottili, strette intorno ai tre tratti, il cerchio, la vetta e l’onda, e in fondo a ogni tratto corre una linea blu. Poi le linee salgono, ognuna alla sua quota, e un attimo dopo la vista si inclina e si posa con un piccolo rimbalzo: i tratti sono valli scavate in un altopiano rotondo, con le pareti un poco irregolari, e la linea blu è il fondo delle valli. La mappa gira piano su sé stessa, dopo qualche secondo torna piatta e risale. Trascinando si gira e si inclina, la rotella la avvicina.
Come funziona
Il marchio in punti
I tre tratti (un arco, una vetta, un’onda di due curve di Bézier) diventano circa 360 punti in un quadrato da -1 a 1. Su una griglia di 121 per 121 punti, dentro un cerchio, lo script calcola una volta sola la distanza di ogni punto dal tratto più vicino.
Dalla distanza alla quota
La quota è una valle: meno DEPTH sul tratto, zero oltre WIDTH, con uno smoothstep in mezzo, quindi il fondo è piatto e l’altopiano anche. Sulle pareti, e solo lì, si aggiunge un rumore di ROUGH che le rende irregolari come terra vera.
Le curve di livello
Per ogni livello, LEVELS in tutto, lo script passa ogni quadratino della griglia (marching squares): dove la quota attraversa il livello fra due angoli, trova il punto esatto con una proporzione e unisce i punti a coppie. Il risultato sono tanti segmentini, che vanno una volta sola in un buffer di WebGL, uno per livello.
La proiezione
Una curva di livello sta tutta alla stessa quota, quindi girarla intorno all’asse verticale (giro) e inclinarla (piega) è una sola matrice 2 per 3, che a ogni fotogramma va allo shader insieme alla quota: la quota, moltiplicata per un numero che va da 0 a 1 (alza), sale sullo schermo col seno dell’inclinazione, la profondità si accorcia col coseno. WebGL disegna le linee con gl.LINES; il livello più basso è blu, gli altri sempre più chiari salendo. Una timeline GSAP fa salire le linee in RISE_TIME secondi e inclina la vista con back.out, che si posa con un piccolo rimbalzo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LEVELS | script.js | 12 | Quante curve di livello. |
DEPTH | script.js | 0.2 | Quanto sono profonde le valli, in frazione del raggio della mappa. |
WIDTH | script.js | 0.16 | Quanto sono larghe le valli. |
ROUGH | script.js | 0.04 | Quanto sono irregolari le pareti. |
TILT | script.js | 0.8 | Quanto si inclina la vista, in radianti (0 è da sopra). |
RISE_TIME | script.js | 2.6 | I secondi che le linee ci mettono a salire. |
SPIN | script.js | 0.08 | Quanto gira da sola la mappa, in giri ogni dieci secondi. |
STAY | script.js | 6 | I secondi in cui il paesaggio resta su prima di tornare piatto; 0 per restare su. |
Quando usarla
Per l’apertura di uno studio del suono, di un’agenzia di viaggi a piedi, di uno studio di paesaggio o di un marchio di montagna, o come pagina «chi siamo» che mostra il marchio sotto un’altra luce. Funziona con qualunque marchio fatto di tratti, anche con una parola.
Sul telefono
Uguale, con la mappa che prende la larghezza; col dito si gira e si inclina.
Con il movimento ridotto
Il paesaggio è già in piedi e inclinato, non gira da solo e non torna piatto; trascinando si gira lo stesso.
Trappole
- Le curve di livello vanno calcolate una volta sola: a ogni fotogramma si girano e si proiettano solo i segmenti già trovati. Rifare le marching squares a ogni fotogramma costa decine di volte di più.
- La quota va fatta con uno smoothstep e non con una gaussiana: la gaussiana non arriva mai a zero e riempie l’altopiano di linee, la mappa diventa un groviglio.
- Il rumore va messo solo sulle pareti: sull’altopiano piatto basta un millimetro di rumore perché compaiano macchie di linee dappertutto.
- Le linee di WebGL sono larghe un pixel del dispositivo, mezzo pixel CSS su uno schermo retina: lì ogni livello si disegna tre volte, spostato di un pixel a destra e di uno in basso, così è spesso come una riga CSS.
- Disegnate col canvas 2D, le migliaia di segmenti a ogni fotogramma fermavano il browser senza scheda grafica: con WebGL vanno nella memoria della scheda una volta sola e ogni fotogramma cambia solo una matrice.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,6 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.
