Il cubo di filo
3D, Fisica, Testo
NuovaGratis
Torna alla libreria
Il globo dei nomi
Un globo fatto solo di meridiani e paralleli sottili, nello stile minimal, con sopra nomi di posti inventati: davanti si leggono, dietro diventano sottilissimi, chiari e a specchio. Lo prendi e lo lanci: continua a girare con la velocità della mano, rallenta e una molla lo ferma su un nome, che prende peso e il colore d’accento mentre il suo meridiano si disegna fino ai poli.
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 globe of names</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full-italic.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage tabindex="0" aria-label="A globe of thin lines with invented place names on it. Drag it, or use the arrow keys, to turn it.">
<!-- the globe is drawn in two layers: the lines on the far side (under everything), then the names behind, then
the lines on the near side, then the names in front. The script moves every name from one layer to the other
as it goes round -->
<canvas class="lines lines--back" data-back aria-hidden="true"></canvas>
<div class="names" data-names aria-hidden="true"></div>
<canvas class="lines lines--front" data-front aria-hidden="true"></canvas>
<p class="hint" data-hint>Drag to turn the globe</p>
<p class="sr" data-live aria-live="polite"></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.
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 «Il globo dei nomi» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo una penna invisibile disegna un globo: prima il contorno, che parte dall’alto e si chiude in basso dalle due parti, poi i paralleli dall’equatore verso i poli, poi i meridiani da polo a polo, mentre il globo gira già piano su sé stesso. Sopra salgono otto nomi di posti inventati, ognuno con una crocetta sottile sul suo punto. I nomi davanti si leggono pieni, quelli di lato si stringono con la curva del globo, quelli dietro si vedono attraverso le linee, sottilissimi, chiari e a specchio. Poi una spinta: il globo accelera, corre (i nomi si assottigliano con la velocità), rallenta e una molla lo ferma su «Orvane», passandolo di un capello e tornando indietro; il nome prende peso con un piccolo elastico e diventa blu, e il suo meridiano si disegna in blu dal posto fino ai due poli. Anche l’occhio si sposta un poco verso il nome scelto: più dall’alto per i posti a nord, più di fronte per quelli a sud. Lasciato solo, il globo riprende a girare piano, viene lanciato di nuovo e si ferma da sé su un altro nome (due più in là, poi quello accanto, poi un giro lungo fino al primo). Si prende col mouse o col dito e si lancia: la velocità della mano diventa inerzia e la molla sceglie il nome più vicino a dove il globo si fermerebbe; tirando in su e in giù lo si inclina, con un elastico che lo riporta. Le frecce della tastiera lo portano al nome dopo o a quello prima.
Come funziona
Un globo che è solo un modo di girare dei punti
Ogni punto del globo è dato da due angoli: quanto è in alto rispetto all’equatore e quanto è avanti lungo il giro. Lo script lo mette nello spazio (x, y, z) sulla sfera di raggio R, aggiunge l’angolo di cui il globo ha girato, lo inclina verso l’occhio e lo proietta con la prospettiva di CSS (x per P diviso P meno z). I meridiani e i paralleli sono curve fatte di questi punti, una ogni GRID gradi, campionate a ogni fotogramma. Un punto è sulla faccia visibile quando z supera R al quadrato diviso P: lì la curva passa dal canvas di dietro a quello davanti, così le linee lontane restano chiare e quelle vicine più scure.
I nomi stanno appoggiati sulla superficie
Ogni nome è un elemento HTML, non un disegno, così resta testo nitido con il suo carattere variabile. Per appoggiarlo sul globo lo script proietta il suo punto e due punti vicinissimi, uno verso est e uno verso nord: le differenze sullo schermo danno i quattro numeri di una matrix() di CSS, che stringe il nome verso il bordo e lo gira a specchio quando passa dietro. Da quanto il punto guarda l’occhio vengono il peso (wght da 110 dietro a 360 davanti), l’opacità e il livello: davanti alle linee vicine o sotto di loro.
Il lancio: inerzia e attrito
Trascinando di lato il punto davanti segue il dito (il giro cambia di dx diviso il raggio sullo schermo); trascinando in su e in giù l’occhio si inclina, trattenuto da una tangente iperbolica che fa da elastico. Al rilascio la velocità è lo spostamento degli ultimi 90 millisecondi diviso il tempo. Poi a ogni passo di fisica, 1/240 di secondo, il giro avanza della velocità e l’attrito la moltiplica per e alla meno attrito per dt; i nomi si assottigliano finché il globo corre.
La molla sceglie un nome e ci si ferma
Quando la velocità scende sotto 1,5 radianti al secondo, il globo da solo si fermerebbe più avanti della velocità divisa l’attrito: si sceglie il nome più vicino a quel punto, fra quelli ancora davanti nel verso del giro (se la mano si è appena mossa, il più vicino da qualunque parte). Un tween con back.out porta il giro esattamente lì. Il back.out parte a (c1 + 3) volte la velocità media, quindi la sua durata si calcola perché la molla parta alla stessa velocità del globo, senza scatti; c1 viene da SNAP ed è il capello di cui passa il nome. Nel momento in cui lo raggiunge, il nome prende peso con elastic.out, diventa del colore d’accento e il suo meridiano si disegna dal posto ai poli; l’occhio si sposta un poco verso il nome.
La regia è una timeline GSAP
L’apertura è una timeline: il contorno, i paralleli e i meridiani crescono sfalsati mentre il globo gira piano, i nomi salgono uno dopo l’altro, poi un lancio. Ogni lancio è uguale: una spinta di 0,3 secondi con power2.in, con la velocità calcolata perché l’attrito porti il globo proprio sul nome voluto, poi il volo libero e la molla. Il giro da solo è una timeline che si ripete: il globo riprende a girare piano, un lancio, il nome, e di nuovo, finché torna al primo; si ferma al primo tocco e dopo sei secondi di quiete riparte dal primo nome, raggiunto per la via più corta.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PLACES | script.js | [['Orvane', 24, 0], ['Calvesh', -14, 44], ['Ulmaro', 38, 92], ['Ilvara', -30, 136], ['Teshwick', 12, 178], ['Sabeline', 40, 226], ['Quenna', -22, 268], ['Marrowby', 6, 314]] | I posti: il nome, quanti gradi sopra o sotto l’equatore (da -60 a 60) e quanti gradi lungo il giro (da 0 a 360). Il globo si ferma sempre su uno di questi; il primo è quello dell’apertura. |
WEIGHT | script.js | 760 | Il peso che prende il nome scelto, da 300 a 900. Gli altri restano leggeri davanti e sottilissimi dietro. |
SPIN | script.js | 8 | I gradi al secondo di cui gira piano il globo quando nessuno lo tocca. |
GLIDE | script.js | 1 | Quanto continua a girare il globo dopo che lo lasci: 2 il doppio, 0.5 la metà. |
SNAP | script.js | 0.5 | La molla che lo ferma: 0 si posa morbido sul nome, 1 lo passa e torna indietro. |
TILT | script.js | 18 | I gradi da cui l’occhio guarda il globo dall’alto: 0 l’equatore dritto davanti. |
GRID | script.js | 20 | I gradi fra due meridiani e fra due paralleli: 15 una rete fitta, 45 poche linee. |
HOLD | script.js | 1.6 | Quanti secondi resta fermo su ogni nome quando gira da solo. |
Quando usarla
Per la pagina delle destinazioni di un’agenzia di viaggi o di un albergo con più sedi, per le tappe di un tour o di un festival, per le città in cui lavora uno studio: un oggetto da toccare che dice «siamo qui» senza una mappa vera. Funziona con nomi corti (fino a nove o dieci lettere), da sei a dieci posti e un solo colore d’accento.
Sul telefono
La stessa animazione: il globo si misura sulla larghezza dello schermo, i nomi crescono con lui, si lancia col dito con la stessa inerzia e la stessa molla, e la pagina non scorre mentre lo giri.
Con il movimento ridotto
Niente gira e niente si sposta: il globo compare in dissolvenza già disegnato e fermo sul primo nome, pieno e colorato, col suo meridiano. Ogni passaggio (da solo, col trascinamento o con le frecce) è una dissolvenza verso il nome dopo, già al suo posto.
Trappole
- Con la sola fisica, un lancio della regia calcolato per fermarsi su un nome ne prendeva un altro quando il browser perdeva fotogrammi (il passo di tempo, tagliato a 50 millisecondi, faceva perdere strada al globo, ma non ai tween): i lanci della regia ricordano il nome a cui sono diretti e la molla va lì, qualunque sia la velocità della macchina.
- Un tocco leggero sul globo fermo (cinque pixel di trascinamento) lo mandava su un nome lontano, perché la molla cercava solo i nomi davanti nel verso del movimento: sotto 0,6 radianti al secondo la molla prende il nome più vicino, da qualunque parte stia.
- Con una mano lenta la durata della molla, calcolata per partire alla stessa velocità del globo, arrivava a 2,4 secondi e il globo strisciava fino al nome: la durata ha un tetto che dipende dalla strada che resta, e la molla tira un po’ più forte della mano.
- Dopo sei secondi di quiete il giro da solo ripartiva dal primo nome sempre nello stesso verso, e da un nome vicino faceva quasi un giro intero: per tornare al primo il globo prende la via più corta.
Librerie
GSAP 3.15.0, Fraunces (font variabile, corsivo, asse wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 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.
