Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
Il cubo che stampa la parola
Animazione di testo in 3D nello stile minimal: un cubo vero in CSS, sei facce di carta col bordo d’inchiostro, rotola lungo una riga sottile una capriola alla volta. Sulle facce che vanno a terra c’è una lettera rovesciata come su un timbro, e a ogni atterraggio la lettera resta stampata sulla riga, si posa larga e leggera e prende peso, finché il nome è scritto.
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>Tumble</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="palco" data-palco>
<header class="testa">
<p class="marchio">Tumble</p>
<p class="nota">Letterpress studio</p>
</header>
<!-- one cube with six real faces rolls along a thin baseline, tipping over its bottom edge; every face that
lands prints its letter on the line, and the letters stay behind it to spell the name -->
<div class="scena" data-scena>
<svg class="riga" data-riga aria-hidden="true"><path class="riga__filo" data-filo d="" /></svg>
<p class="parola" data-parola></p>
<div class="posto" data-posto aria-hidden="true">
<div class="rullo" data-rullo>
<div class="corpo">
<span class="faccia faccia--davanti"></span>
<span class="faccia faccia--dietro"></span>
<span class="faccia faccia--anello" data-faccia="destra"><span class="faccia__lettera"></span></span>
<span class="faccia faccia--anello" data-faccia="sotto"><span class="faccia__lettera"></span></span>
<span class="faccia faccia--anello" data-faccia="sinistra"><span class="faccia__lettera"></span></span>
<span class="faccia faccia--anello" data-faccia="sopra"><span class="faccia__lettera"></span></span>
</div>
</div>
</div>
</div>
<div class="azione">
<button class="pillola" type="button" data-ancora data-autoclic>
<span class="pillola__scritta" data-testo="Again">Again</span>
<svg class="pillola__segno" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.6 6.1A5 5 0 1 0 13 9.4" /><path d="M13.2 2.6v3.7H9.5" /></svg>
</button>
</div>
</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.
19 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 cubo che stampa la parola» da Animorio e adattala al mio sitoCosa fa
Una pagina bianco caldo, con il nome di una stamperia inventata, Tumble, in alto. Dal centro si disegna una riga sottile, e su di lei cade un cubo di carta col bordo d’inchiostro, a sinistra della riga: è un cubo vero, si vedono la faccia davanti, quella di sopra e quella di destra, e sulle facce ci sono lettere rovesciate, come su un timbro. Il cubo si inclina sul suo spigolo in basso a destra, piano all’inizio e sempre più in fretta, e cade di lato sulla faccia di destra: atterrando si dondola indietro di un grado e torna giù, e la riga cede un poco sotto il colpo. Quando riparte per la capriola dopo, dove era appoggiato resta stampata la lettera della faccia che ha toccato terra, dritta: arriva larga e leggera e si stringe prendendo peso. Le facce cambiano tono mentre girano, più chiare verso la luce in alto a destra. Una capriola dopo l’altra il cubo stampa T, u, m, b, l, e; poi fa un’ultima capriola oltre la parola e si posa con una faccia vuota, mentre l’ultima lettera si scopre nel vermiglio. In basso compare «Again»: un clic (o un tocco, o Invio) fa alzare le lettere, sparire il cubo, ritirare la riga verso il centro, e tutto ricomincia.
Come funziona
Un cubo vero in CSS
Il cubo è un rullo con dentro un corpo e sei facce: davanti, dietro e le quattro dell’anello che tocca terra (destra, sotto, sinistra, sopra). Il corpo sta mezzo lato dietro al piano della pagina, così la faccia davanti è proprio sul piano della riga e delle lettere e la prospettiva non la fa scendere sotto la riga. Le facce dell’anello sono la faccia di destra girata di un quarto alla volta intorno al centro: una faccia che arriva al posto di un’altra ha lo stesso verso, e le lettere non saltano. La prospettiva sta sul contenitore di ogni cubo, col punto di vista in alto a destra calcolato in pixel dal lato, così il cubo si vede uguale dovunque sia.
La capriola sullo spigolo
Il rullo gira intorno al suo spigolo in basso a destra (transform-origin 100% 100%): da 0 a 90 gradi con power2.in, lento a staccarsi e veloce nella caduta, poi indietro di ROCK gradi con power2.out e di nuovo a 90 con power2.in, il dondolio dell’atterraggio. A quel punto il cubo, simmetrico, si rimette dritto sulla cella dopo: non si vede, e la capriola dopo riparte da zero. Le lettere sulle facce dipendono solo dalla cella: a destra quella che atterra dopo, sopra quella dopo ancora, a sinistra (nascosta) la successiva.
La riga e la luce
La riga è un path ridisegnato a ogni fotogramma con un punto ogni sei pixel: all’apertura cresce dal centro, e a ogni atterraggio cede a campana sotto la cella colpita, con una profondità che torna a zero con elastic.out. Ogni faccia dell’anello prende il suo tono dall’angolo in cui sta in quel momento rispetto alla luce in alto a destra (un coseno fra il chiaro e lo scuro), quindi la faccia di sopra si scurisce mentre gira e diventa quella di destra.
Le lettere stampate
Ogni lettera sta in una cella larga quanto il cubo. Per riempirla come un carattere di legno, all’avvio se ne misura la larghezza a wdth 100 e si sceglie la larghezza dell’asse che la porta a otto decimi della cella. Quando il cubo riparte dalla cella, la lettera compare con l’opacità e va dal peso LIGHT a HEAVY e da 14 punti di wdth in più alla sua larghezza, con power3.out: arriva larga e leggera e si posa stretta e piena.
La regia e il movimento ridotto
Tutto quello che si muove è un oggetto di numeri (la cella, l’angolo, la riga, le lettere) in una timeline GSAP sola, e una funzione disegna ogni fotogramma: al cambio di misura della finestra basta ridisegnare. «Again» compare a parola finita e prima ignora i clic, così niente la interrompe a metà. Con il movimento ridotto la parola è già stampata e il cubo è fermo dopo l’ultima lettera, e la scena entra in dissolvenza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'Tumble' | La parola da stampare: una capriola per lettera, fino a 8 lettere. |
CUBE_SIZE | script.js | 108 | Il lato del cubo al computer, in px; sul telefono si stringe perché la parola stia nella larghezza. |
ROLL_TIME | script.js | 0.52 | Quanto dura una capriola, in secondi. |
PAUSE | script.js | 0.12 | La sosta fra una capriola e l’altra, in secondi. |
ROCK | script.js | 1.6 | Di quanti gradi il cubo si dondola indietro atterrando. |
DIP | script.js | 3 | Di quanti px la riga cede sotto il colpo. |
LIGHT | script.js | 220 | Il peso della lettera appena stampata. |
HEAVY | script.js | 760 | Il peso della lettera posata. |
Quando usarla
Per l’apertura di uno studio di grafica, di una stamperia o di una fonderia di caratteri, per il nome di un gioco da tavolo o di un marchio corto che vuole arrivare con un gesto fisico, per il caricamento di una pagina che presenta un prodotto.
Sul telefono
La stessa animazione con le misure adattate: il cubo si stringe perché la parola, la cella di partenza e quella d’arrivo stiano nella larghezza; il tasto si tocca col dito.
Con il movimento ridotto
Niente si muove: la parola compare già stampata sulla riga, col cubo fermo dopo l’ultima lettera, in dissolvenza; «Again» la fa svanire e tornare.
Trappole
- Col cubo centrato sul piano della pagina la faccia davanti stava più vicina a chi guarda e la prospettiva la faceva scendere sotto la riga: il cubo sembrava affondare. Ora il corpo sta mezzo lato dietro al piano, e la faccia davanti è proprio sulla riga.
- Con la prospettiva in percentuale la faccia di destra si vedeva appena: il punto di vista orizzontale risultava molto più vicino di quello scritto. Ora si scrive in pixel dallo script, dal lato del cubo, e si è regolato a occhio fino a vedere bene la faccia di sopra e quella di destra senza che il cubo sembri una scatola lunga.
- Le lettere tutte con la stessa larghezza in celle uguali sembravano battute a macchina («T u m b l e»): ora ognuna si allarga o si stringe con l’asse wdth fino a otto decimi della cella, come i caratteri di legno.
- Le lettere stampate scendevano di qualche pixel sotto la riga e quella sotto il cubo spuntava dal suo bordo: la cima del carattere si mette a 0,855 del corpo sopra la riga, così la linea di base di Archivo cade proprio sulla riga.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,9 KB; le librerie: GSAP 28 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.
