Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
La parola sul rullo
Una riga sola, nello stile minimal: «We make» e l’ultima parola su un rullo che gira in 3D come il tamburo di un contatore meccanico, con lo scatto. Ogni parola ha la sua larghezza: la finestra del rullo si allarga o si stringe con una molla, la parola la riempie sull’asse della larghezza del carattere e il resto della frase si sposta per farle posto, lettera dopo lettera.
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 reel</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>
<main class="stage" data-stage>
<!-- one line: the first words stay, the last one sits on a reel that turns on its horizontal axis. The script
builds the letters and the faces of the reel, and moves the whole line to make room for every new word -->
<h1 class="line" data-line>
<span class="sr" data-sr>We make brands.</span>
<span class="prefix" data-prefix aria-hidden="true"></span>
<span class="reel" data-reel aria-hidden="true"></span>
<span class="dot" data-dot aria-hidden="true"><span class="dot__ink">.</span></span>
</h1>
</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.
18 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 sul rullo» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo le lettere di «We make» salgono una alla volta da sotto la riga di base. Accanto si apre una fessura: dentro gira veloce un rullo di parole blu, rallenta, passa la fermata di un soffio, torna indietro e si ferma su «brands», mentre la finestra si allarga con un rimbalzo e spinge la frase a sinistra, con il punto che chiude la riga. Poi, a intervalli regolari, il rullo scatta come un contatore: un piccolo arretramento, un colpo in avanti, la fermata superata di qualche grado e il ritorno. La parola nuova arriva dal basso con la larghezza della vecchia, stretta o allargata sull’asse del carattere, e si distende alla sua misura insieme alla finestra; il resto della frase si sposta perché tutto resti al centro, e le lettere di «We make» seguono una dopo l’altra, come i vagoni di un trenino, la più vicina per prima. Il punto, a ogni scatto, fa un piccolo inchino. Mentre il rullo gira si intravedono le parole sopra e sotto, inclinate; da fermo restano un’ombra. Dopo l’ultima parola il rullo la porta via mentre la finestra si chiude, «We make» torna da solo al centro e affonda, e tutto ricomincia.
Come funziona
Un rullo vero, fatto di poche facce
Il rullo è un cilindro con una parola ogni 36 gradi: il raggio è quello che rende ogni faccia alta esattamente una riga (mezza riga diviso il seno di 18 gradi). Un numero p dice dove si trova il rullo, in parole: 2,5 è a metà fra la terza e la quarta. A ogni fotogramma sette elementi prendono le posizioni entro un quarto di giro dal davanti, con translateZ(-r) rotateX(-θ) translateZ(r): la faccia ruota intorno all’asse del cilindro, non intorno a sé stessa. La prospettiva sta sul contenitore, centrata sulla finestra, e una maschera a gradiente sfuma le facce verso l’alto e verso il basso.
Lo scatto del contatore
Ogni scatto è un tween di p da una parola alla successiva con una easing scritta a mano: per il primo quinto il rullo arretra del 6% (un seno al quadrato, che parte e arriva con velocità zero), poi una molla smorzata lo porta avanti e oltre la fermata del 14%, e lo riporta esattamente su 1. Lo smorzamento si ricava dal superamento voluto, così la molla finisce sempre in tempo. Il giro veloce dell’apertura usa la stessa molla con un superamento di un decimo di parola diviso per il numero di parole percorse, per fermarsi con lo stesso colpo.
La finestra con la molla
Per ogni parola si misura la larghezza a riposo e una tabella di 22 larghezze lungo l’asse wdth di Archivo, da 62 a 125. La finestra vuole la larghezza della parola davanti, mescolata con uno smoothstep a metà dello scatto; una molla vera (integrata a passi di 1/240 di secondo, BOUNCE decide lo smorzamento) la insegue e la supera un poco. Ogni faccia riempie la finestra: dalla tabella si trova il valore dell’asse che la rende lunga quanto la finestra, e se l’asse non basta il resto lo fa scaleX. Così il punto, messo in fondo alla finestra, tocca sempre l’ultima lettera.
Il trenino di «We make»
La riga è centrata: quando la finestra cresce di 40 pixel, la frase va a sinistra di 20. Ogni lettera di «We make», misurata con un Range per tenere la crenatura, insegue il suo posto con una sua molla, più rigida per la lettera vicina al rullo e più morbida andando a sinistra. Come i respingenti di un treno, una lettera non può allontanarsi dal suo posto più di un capello (1,2% della grandezza del carattere) rispetto alla lettera alla sua destra: la frase si comprime e si distende appena, senza mai attaccarsi.
Le parole intorno e il punto
Le facce lontane dal davanti hanno l’opacità di GHOST, ma la velocità del rullo (quanto cambia p a ogni fotogramma) le accende di più mentre gira e le lascia spegnere un attimo dopo, come una scia. Il punto finale è un elemento a parte: compare con la finestra e a ogni scatto scende di un ventesimo di riga e si schiaccia, poi torna con un elastic.out. Tutta la regia è una timeline GSAP che si ripete; SPEED cambia il suo timeScale e anche il passo delle molle.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PREFIX | script.js | 'We make' | Le parole che restano, prima del rullo. |
WORDS | script.js | ['brands', 'type', 'motion', 'websites', 'objects', 'noise'] | Le parole del rullo, una per scatto. Più sono diverse di lunghezza, più la frase si muove. |
WEIGHT | script.js | 720 | Il peso della parola sul rullo, da 100 (un capello) a 900 (nerissimo). |
HOLD | script.js | 1.3 | Quanti secondi resta ogni parola prima che il rullo scatti. |
BOUNCE | script.js | 0.45 | Quanto la finestra e la frase vanno oltre il loro posto prima di fermarsi: 0 niente, 1 molto. |
GHOST | script.js | 0.05 | Quanto si vedono le parole sopra e sotto quando il rullo è fermo: 0 solo la parola nella finestra. |
SPEED | script.js | 1 | La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà. |
LOOP | script.js | true | Se alla fine il rullo porta via la parola e tutto ricomincia. Con false resta sull’ultima parola. |
Quando usarla
Per il titolo d’apertura di uno studio, di un’agenzia o di un portfolio che fa più cose e le vuole dire in una riga sola («We make brands, type, motion…»); anche per una landing che elenca a chi serve un prodotto o le città di un evento. Funziona con una frase breve e parole di lunghezza diversa, che fanno muovere la riga.
Sul telefono
La stessa animazione su una riga: il carattere si misura per far stare la frase con la parola più lunga in nove decimi dello schermo, e il rullo, le molle e il trenino restano uguali, in proporzione.
Con il movimento ridotto
Niente gira e niente si sposta: la frase compare in dissolvenza già composta, e a ogni parola nuova svanisce e ricompare con la parola nuova e la misura giusta. Alla fine svanisce e ricomincia.
Trappole
- Il punto che fa l’inchino a ogni scatto scendeva del 7% della riga, e in quell’attimo sembrava staccato dalla parola: al 5% si legge come un inchino e resta attaccato.
- Le lettere di «We make» che inseguono il loro posto con una molla restavano indietro quando la parola cresceva in fretta, e la frase si leggeva «Wemake» o «makemotion»: senza un limite, il ritardo di una molla dipende dalla velocità. Il limite fra una lettera e l’altra (come i respingenti di un treno) tiene il movimento ma non lascia mai sparire uno spazio.
- Riempire la finestra anche con le facce lontane allargava «type» oltre l’asse del carattere con scaleX, e le parole fantasma diventavano lastre stirate: solo la parola davanti si allunga oltre l’asse, le altre al massimo si stringono.
- Le parole sopra e sotto, sempre visibili, rendevano la riga affollata da ferma: ora la loro opacità segue la velocità del rullo, che si accende nello scatto e si spegne un attimo dopo.
- Dopo l’ultima parola una pausa vuota di un secondo sembrava la fine dell’animazione: ridotta a un terzo di secondo, «We make» risale quasi subito. Il salto di p all’inizio del giro non si vede perché in quel momento la finestra è chiusa.
Librerie
GSAP 3.15.0, Archivo (font variabile, assi wdth e wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,3 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 14 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.
