Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
La scala a chiocciola di parole
Scorri dentro l’anteprima
Animazione di scroll in 3D nello stile minimal: i capitoli di una rivista inventata salgono una scala a chiocciola intorno a un asse invisibile. Davanti le parole sono larghe e piene, sul retro strette e chiare; quella che passa davanti al livello di lettura prende l’accento blu, e alla fine l’elica si distende nell’indice.
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 spiral staircase of words</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 quarterly, Coil. The stage sticks while you scroll: the chapters of the issue climb a spiral staircase
around an invisible axis, the one passing the reading line in front takes the accent, and at the end the spiral
lays itself down into the contents page. The words 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>Coil</a>
<p class="testa__nota" data-entra>Issue nine, autumn</p>
</header>
<div class="livello" data-livello aria-hidden="true">
<span class="livello__tacca livello__tacca--sx"></span>
<span class="livello__tacca livello__tacca--dx"></span>
</div>
<div class="scena" data-scena>
<div class="elica" data-elica role="list" aria-label="Chapters of the issue"></div>
</div>
<div class="indice" data-indice aria-hidden="true">
<p class="indice__titolo" data-indice-titolo>In this issue</p>
</div>
<p class="cenno" data-entra><span data-cenno>Scroll to climb</span></p>
</div>
</section>
<section class="dopo">
<p class="dopo__testo">Twelve chapters, one staircase. Read them in any order.</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.
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 «La scala a chiocciola di parole» da Animorio e adattala al mio sitoCosa fa
Una pagina bianco caldo con in alto il nome di una rivista inventata, Coil, e il numero dell’uscita. A metà altezza una riga sottile attraversa la pagina, con una tacca a ogni capo: è il livello di lettura. Intorno a un asse che non si vede, i dodici capitoli dell’uscita (Arrivals, Maps, Rooms, Weather e gli altri) stanno su una scala a chiocciola, ognuno girato verso l’esterno, sei per giro, ognuno un gradino più in alto del precedente; all’apertura compaiono uno dopo l’altro, salendo appena. Scorrendo la pagina resta ferma e l’elica gira e sale: ogni parola arriva da destra, passa davanti e se ne va a sinistra un gradino più su. Le parole davanti sono nitide, larghe e pesanti; mentre girano sul retro si stringono, si assottigliano, schiariscono e si leggono al contrario, come attraverso un vetro. La parola che passa davanti sul livello di lettura si colora di blu e, appena ci arriva, sobbalza di un niente e si assesta. Verso la fine della sezione l’elica si distende: una parola dopo l’altra, dalla prima all’ultima, smette di girare, rimpicciolisce e scivola al suo posto in una colonna, l’indice dell’uscita, con un piccolo oltre e ritorno. Il livello di lettura si ritira dai due capi, sotto ogni voce si disegna un filo, compaiono il titoletto In this issue e i numeri di pagina a destra.
Come funziona
La scala intorno all’asse
Ogni parola è uno span dentro un contenitore 3D (transform-style preserve-3d) al centro del palco, con la prospettiva sul palco. La parola i sta all’angolo i per il passo (360 diviso PER_TURN) e all’altezza i per RISE: la sua trasformazione è translate3d, rotateY dell’angolo, translateZ del raggio e translate(-50%, -50%), così il testo sta centrato sulla sua faccia e guarda verso l’esterno.
Girare e salire insieme
Lo scroll muove un numero solo, giro, da 0 a 1, che diventa l’angolo phi: ogni parola sta a i per il passo meno phi, e la sua altezza a (i meno phi diviso il passo) per RISE. Così la parola che arriva davanti arriva anche sul livello di lettura: l’elica è una vite. Una funzione sul ticker di GSAP ridisegna le dodici parole a ogni fotogramma.
La profondità nel carattere
Dal coseno dell’angolo viene la profondità, da 0 sul retro a 1 davanti. Da lì vengono il peso (fra i due valori di WEIGHT), la larghezza (font-stretch fra i due di WIDTH, Archivo va da 62 a 125) e l’inchiostro: niente filtri sfocati, che costano e sporcano. Le parole che escono dall’alto o dal basso sfumano in un margine.
Il livello di lettura
L’accento dipende da quanto la parola è vicina al davanti (meno di 26 gradi) e al livello (meno di metà gradino): il colore si mescola fra l’inchiostro e il blu, quindi passa piano. Quando cambia la parola davanti, la sua molla (un oggetto con un numero) parte da 1 e torna a 0 con elastic.out: la parola sobbalza di un decimo della sua altezza e si assesta, verso l’alto o verso il basso secondo il verso dello scroll.
L’elica che si distende
Un secondo numero, piatto, porta ogni parola dalla scala all’indice, con uno sfasamento da STAGGER: l’angolo e il raggio vanno a zero con power2.inOut, la scala del testo scende alla misura dell’indice, l’ancora passa dal centro al bordo sinistro, e la posizione verticale arriva con back.out, un piccolo oltre e ritorno. L’opacità sale con il cubo del progresso, così le parole del retro restano chiare finché non sono a posto. Poi si disegnano i fili e compaiono i numeri di pagina.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORDS | script.js | ['Arrivals', 'Maps', 'Rooms', 'Weather', 'Letters', 'Gardens', 'Bridges', 'Night', 'Rivers', 'Kitchens', 'Islands', 'Endings'] | I capitoli sulla scala, dal basso in alto (diventano l’indice; fino a 24). |
FIRST_PAGE | script.js | 6 | Il numero di pagina del primo capitolo nell’indice. |
PER_TURN | script.js | 6 | Quante parole fanno un giro intero dell’elica: meno parole, gradini più larghi. |
RISE | script.js | 0.88 | Quanto sale l’elica da una parola all’altra, in altezze di parola. |
RADIUS | script.js | 1 | Quanto stanno lontane le parole dall’asse (1 = quanto sta nello schermo). |
SIZE | script.js | 1 | Quanto sono grandi le parole (1 = quanto sta nello schermo). |
WEIGHT | script.js | [210, 720] | Il peso delle parole sul retro e davanti. |
WIDTH | script.js | [64, 122] | La larghezza del carattere (font-stretch, in percento) sul retro e davanti; Archivo va da 62 a 125. |
STAGGER | script.js | 0.45 | Quanto sono sfalsate le parole mentre si distendono nell’indice (0 = tutte insieme). |
SMOOTH | script.js | 0.6 | Quanto morbidamente l’elica segue lo scroll, in secondi (0 = attaccata). |
RIDE | script.js | 1 | Quanto scroll serve per tutto: 2 è il doppio. |
--accento | style.css | #2b45ff | L’unico accento: la parola sul livello di lettura. |
Quando usarla
Per l’indice di una rivista o di un racconto lungo, i capitoli di un libro, i servizi di uno studio, le sezioni di un sito di cui vale la pena far vedere tutti i titoli prima di cominciare.
Sul telefono
La stessa animazione con le misure adattate: le parole più piccole, il raggio più stretto perché le parole davanti stiano nello schermo, e l’indice finale che sta tutto in altezza.
Con il movimento ridotto
Niente scroll ammorbidito e niente rotazione: compare in dissolvenza direttamente l’indice, con i fili e i numeri di pagina.
Trappole
- Con lo sfasamento, le ultime righe dell’indice non arrivavano mai in fondo: il loro filo restava a metà e il numero chiaro. I tempi delle righe ora si misurano sulla frazione i diviso n meno 1, così l’ultima finisce proprio a fine corsa.
- Distendendo l’elica, le parole del retro diventavano piene mentre erano ancora grandi e storte, e per un attimo coprivano l’indice: l’opacità ora sale con il cubo del progresso.
- Con un gradino di 0,62 altezze le parole vicine al davanti si toccavano: i gradini ora sono di 0,88.
- L’angolo di ogni parola va riportato fra −180 e 180 gradi prima di distendere l’elica, altrimenti le parole dell’ultimo giro fanno due giri interi per tornare dritte.
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 6,1 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.
Collaudo
Provata il 21 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.
