Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
La parola sull’anello del pianeta
Scorri dentro l’anteprima
Animazione di scroll in 3D nello stile minimal, per l’intestazione di un planetario inventato: intorno a un pianeta disegnato a filo, le lettere del nome girano su un anello. All’inizio l’anello è di taglio, una riga sola; scorrendo si apre verso di te e le lettere passano davanti, larghe e piene, e dietro, piccole, chiare e a specchio, nascoste dal pianeta. Quella davanti prende l’accento arancio.
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 word on the planet's ring</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>
<!-- a made-up planetarium, Halo. The stage sticks while you scroll: the ring around the planet starts edge-on, a
single line through it, and opens as you scroll while the letters of the name travel round it; the planet hides
the letters going round the back. Ring, planet and letters are placed by the script -->
<main>
<section class="corsa" data-corsa>
<div class="palco" data-palco>
<header class="testa">
<a class="marchio" href="#" data-entra>Halo</a>
<p class="testa__nota" data-entra>Planetarium · open nights</p>
</header>
<svg class="cielo" data-cielo aria-hidden="true"></svg>
<div class="scena" data-scena aria-hidden="true">
<svg class="pianeta" data-svg>
<defs>
<clipPath id="disco"><circle data-clip cx="0" cy="0" r="10"></circle></clipPath>
</defs>
<g data-dietro></g>
<circle class="pianeta__disco" data-disco cx="0" cy="0" r="10"></circle>
<g clip-path="url(#disco)">
<g data-bande></g>
<path class="pianeta__ombra" data-ombra d=""></path>
</g>
<circle class="pianeta__bordo" data-bordo cx="0" cy="0" r="10"></circle>
<g data-davanti></g>
<line class="lettura" data-lettura x1="0" y1="0" x2="0" y2="0"></line>
</svg>
<div class="lettere" data-lettere></div>
</div>
<p class="sr-only" data-frase></p>
<div class="titolo" data-titolo>
<h1 class="titolo__riga">Under one sky.</h1>
<p class="titolo__nota">Shows every night at nine</p>
</div>
<p class="lettura-dati" data-entra><span>Ring tilt <b data-inclina>0.0°</b></span><span>Turn <b data-giro>0°</b></span></p>
<p class="cenno" data-entra><span data-cenno>Scroll to open the ring</span></p>
</div>
</section>
<section class="dopo">
<p class="dopo__testo">A dome, a sky and a guide. Book a seat for tonight.</p>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.
28 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 parola sull’anello del pianeta» da Animorio e adattala al mio sitoCosa fa
Una pagina bianco caldo con in alto il nome di un planetario inventato, Halo, e la scritta delle serate aperte. Nel mezzo c’è un pianeta disegnato con una riga sola, con cinque paralleli sottili e una falce d’ombra appena accennata sul lato destro; intorno qualche croce sottile fa da stella. Il pianeta ha un anello di quattro ellissi sottili, e sull’anello girano le lettere di HALO PLANETARIUM · OPEN NIGHTS, una dopo l’altra, come un nome dipinto intorno a un faro. All’apertura il pianeta cresce con un piccolo oltre, l’anello esce da lui e le lettere arrivano una alla volta, cadendo appena. All’inizio l’anello è di taglio: si vede solo una riga che attraversa il pianeta, con le lettere in fila sopra. Scorrendo la pagina resta ferma e l’anello si apre verso chi guarda, ruota di qualche grado e le lettere fanno più di un giro: davanti sono grandi, larghe e pesanti, dietro piccole, strette, chiare e scritte a specchio, e quelle che passano dietro al pianeta spariscono dietro il suo bordo; anche la metà di dietro dell’anello è più chiara. La lettera che passa davanti si colora d’arancio e, appena arriva, sobbalza di poco e si assesta; una tacca arancio sotto l’anello segna il punto. I paralleli del pianeta si inclinano insieme all’anello, le stelle scivolano piano verso l’alto, le vicine più delle lontane, e in basso a sinistra l’inclinazione dell’anello e il giro si leggono dal vivo. Verso la fine, sotto il pianeta, sale il titolo Under one sky. prendendo peso e larghezza. Il puntatore inclina l’anello di qualche grado su una molla, e un clic gli dà una spinta di tre lettere.
Come funziona
Un anello visto di sbieco
Un punto dell’anello sta all’angolo th e al raggio r sul piano dell’anello: x = r·cos(th), y = r·sin(th)·sin(apertura). Con l’apertura a zero l’anello è una riga, con l’apertura che cresce diventa un’ellisse sempre più tonda. Poi tutto ruota del rollio intorno al centro del pianeta. La metà con sin(th) positivo è quella davanti.
Il pianeta in mezzo
Ogni ellisse dell’anello è disegnata in due metà, due path SVG: prima le metà di dietro, poi il disco del pianeta pieno del colore della carta, poi le metà davanti. Così il pianeta copre il dietro dell’anello e l’anello passa davanti al pianeta, senza calcolare intersezioni.
Le lettere sull’anello
Le lettere sono span posizionati a ogni fotogramma: ognuna sta all’angolo base meno k per il passo (360 gradi diviso le lettere). Si girano secondo la tangente dell’ellisse, così seguono l’anello; dietro la tangente va al contrario e la lettera si specchia con scale(-1, 1). Dal seno dell’angolo vengono la scala, il peso, la larghezza e l’inchiostro.
Il pianeta che nasconde
Le lettere dietro (seno negativo) si spengono quando la loro distanza dal centro scende sotto il raggio del pianeta, con una sfumatura larga quanto mezza lettera: sembrano passare dietro il bordo. Le lettere davanti stanno sopra a tutto.
Lo scroll, l’accento e la mano
Lo scroll muove un numero solo, p, da 0 a 1 (ScrollTrigger con scrub e Lenis): l’apertura va da TILT[0] a TILT[1] nel primo 62% con power2.inOut, il rollio da ROLL[0] a ROLL[1], le lettere fanno TURNS giri. Quando cambia la lettera davanti, la sua molla parte e torna con elastic.out. Il puntatore aggiunge qualche grado di apertura e di rollio con gsap.quickTo; un clic aggiunge tre passi di giro.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PHRASE | script.js | 'HALO PLANETARIUM · OPEN NIGHTS · ' | Le lettere che girano sull’anello (fino a 60). |
TILT | script.js | [1.5, 26] | Quanto è aperto l’anello all’inizio e alla fine dello scroll, in gradi. |
ROLL | script.js | [-15, -8] | Quanto è ruotato l’anello all’inizio e alla fine, in gradi. |
TURNS | script.js | 1.15 | Quanti giri fanno le lettere in tutto lo scroll. |
SIZE | script.js | 1 | Quanto sono grandi il pianeta e il suo anello (1 = quanto sta nello schermo). |
WEIGHT | script.js | [170, 760] | Il peso delle lettere dietro e davanti. |
WIDTH | script.js | [66, 124] | La larghezza delle lettere (font-stretch, in percento) dietro e davanti; Archivo va da 62 a 125. |
STARS | script.js | 24 | Quante croci sottili nel cielo. |
SMOOTH | script.js | 0.6 | Quanto morbidamente l’anello segue lo scroll, in secondi (0 = attaccato). |
RIDE | script.js | 1 | Quanto scroll serve per tutto: 2 è il doppio. |
--accento | style.css | #e2471b | L’unico accento: la lettera che passa davanti e la tacca sotto l’anello. |
Quando usarla
Per l’intestazione di un planetario, un osservatorio, un museo della scienza, una rivista di astronomia o un’azienda dello spazio; e in generale per un nome o un motto che vale la pena far girare intorno a una forma mentre si scende.
Sul telefono
La stessa animazione con le misure adattate: il pianeta e l’anello stanno nella larghezza col margine, le lettere sono un po’ più grandi rispetto al pianeta e il titolo sta sotto, dentro l’altezza.
Con il movimento ridotto
Niente scroll ammorbidito, niente rotazione e niente molle: compare in dissolvenza direttamente l’anello aperto, con le lettere ferme al loro posto e il titolo sotto.
Trappole
- Le lettere dietro, girate secondo la tangente, venivano capovolte: dietro la tangente punta a sinistra. Si aggiunge mezzo giro e si specchia la lettera con scale(-1, 1), così si legge al contrario come attraverso un vetro, ma resta dritta.
- Con l’anello di taglio tutte le lettere stanno sulla stessa riga e quelle dietro passerebbero sopra al pianeta: si spengono in base alla distanza dal centro, non all’altezza.
- I paralleli del pianeta vanno inclinati con lo stesso angolo dell’anello (l’asse del pianeta è perpendicolare all’anello), altrimenti il pianeta sembra girato da un’altra parte.
Librerie
GSAP 3.15.0, ScrollTrigger 3.15.0, Lenis 1.3.26, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,3 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.
Collaudo
Provata il 23 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.
