Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
Il titolo di nastro piegato
Ogni lettera del titolo è un nastro di carta colorata che si scrive piegandosi: il nastro corre dritto, si ferma, e il pezzo appena uscito si ribalta in 3D sulla piega e ricade piatto con un rimbalzo, mostrando il retro più chiaro. Sotto il puntatore la carta si alza e si inclina come una molla; poi i nastri si spiegano all’indietro e tutto ricomincia. Un clic lo ripiega.
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 folded ribbon title</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="scena" data-scene>
<!-- the title, for screen readers: the paper ribbons only draw it -->
<h1 class="leggibile" data-reader>Fold Works. Paper goods, folded by hand</h1>
<!-- the stage: the script sizes it to the window and draws the ribbons, their folds and their shadows -->
<canvas class="palco" data-stage aria-hidden="true"></canvas>
<p class="sotto" data-sub>Paper goods, folded by hand</p>
<p class="nota" data-hint>Click to fold it again</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.
25 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 titolo di nastro piegato» da Animorio e adattala al mio sitoCosa fa
Su un cartoncino color crema compare il nome di un laboratorio di cartoleria inventato, «Fold Works», scritto da nove nastri di carta, uno per lettera, ognuno di un colore: vermiglio, zafferano, verde, blu cobalto e rosa. Le lettere partono una dopo l’altra. Il nastro esce dal suo capo e corre dritto per un tratto, frenando; poi il tratto appena uscito si solleva sulla piega, si ribalta in aria in prospettiva, più grande perché più vicino, e ricade dall’altra parte con un piccolo rimbalzo, schiacciandosi sul cartoncino. Siccome ogni piega gira la carta, il pezzo ribaltato mostra il retro, una tinta più chiara dello stesso colore, e agli angoli restano gli smussi a triangolo e gli strati della carta piegata davvero, con una riga di luce sulla piega. Poi il nastro corre di nuovo dritto e si ripiega dall’altra parte, e così la F, la O, la L, la D e le altre si formano piega dopo piega. Le barrette di mezzo (quella della F, quella della A, della E) sono nastri più corti infilati sotto. Mentre un lembo è in aria la sua ombra sul cartoncino si allarga e si sfuma, e quando atterra la carta sotto dà un piccolo sussulto. Finito il titolo, sotto salgono le lettere della riga «Paper goods, folded by hand», allargandosi. Poi uno spiffero attraversa il titolo da sinistra a destra: i nastri si sollevano uno dopo l’altro, si inclinano e ricadono ondeggiando. Col puntatore succede lo stesso: la carta sotto il puntatore si alza dal cartoncino, si inclina verso di lui e, quando se ne va, torna giù con un’oscillazione elastica. Dopo qualche secondo la riga scende e i nastri si spiegano all’indietro, come un film riavvolto, sempre più in fretta, fino a sparire nei loro capi; poi tutto ricomincia. Un clic ripiega il titolo subito (se i nastri stanno ancora piegando, finiscono in fretta e poi si riavvolgono).
Come funziona
Un alfabeto fatto di pieghe
Le lettere non vengono da un carattere: sono maiuscole squadrate disegnate per la demo, dalla A alla Z, alte 10 unità. Ogni lettera è uno o più nastri, e ogni nastro è la linea che passa nel mezzo della carta: a ogni angolo il nastro gira piegandosi. Una piega che fa girare il nastro di un angolo è una linea che attraversa la striscia a metà di quell’angolo, quindi gli angoli vengono smussati da soli, come nella carta vera. Le svolte troppo strette (meno di una cinquantina di gradi) farebbero pieghe lunghissime: le lettere usano angoli retti, diagonali e mezzi giri.
Il nastro steso e il nastro piegato
Ogni nastro vive in due sistemi. Steso, è una striscia dritta: u lungo la striscia, v di traverso, e ogni pezzo è il tratto fra due pieghe, tagliato dalle due linee e dal capo che avanza (un poligono ritagliato con tre semipiani). Piegato, ogni piega è una rotazione 3D intorno alla sua linea, e la posizione di un pezzo è il prodotto delle rotazioni di tutte le pieghe che lo precedono, come i giunti di un braccio meccanico. Con le pieghe a mezzo giro il disegno torna esattamente sulla lettera; a metà strada il pezzo è in aria.
Il disegno su canvas
A ogni fotogramma i pezzi passano dalle matrici 3D allo schermo con una prospettiva leggera (più vicini, più grandi). La normale di ogni pezzo dice quale faccia si vede, il colore o il retro più chiaro, e quanta luce prende, così un lembo che si ribalta si scurisce e si schiarisce. Le ombre sono gli stessi poligoni proiettati sul cartoncino lungo la direzione della luce, disegnati su due canvas piccole e poi allargate: quella a un terzo è l’ombra di contatto, quella a un nono l’ombra morbida dei lembi in aria.
La regia
Per ogni nastro una timeline GSAP in pausa fa correre il capo (power2.out) e poi gira la piega di mezzo giro con una curva scritta a mano: parte svelta, accelera cadendo, rimbalza una volta e si posa. La timeline principale manda avanti quella delle pieghe con un tween sulla sua progress, poi la riga sotto, lo spiffero, e alla fine lo stesso tween all’indietro (power2.in), che spiega tutto come un film riavvolto. Un richiamo a ogni atterraggio dà un colpetto alla carta sotto.
La carta come una molla
Ogni pezzo ha due molle, l’altezza e l’inclinazione intorno alla sua linea di mezzo, aggiornate a ogni tick con la fisica (forza, smorzamento, passi da 1/120 di secondo). La vicinanza del puntatore, o dello spiffero, decide quanto alzarsi e da che parte inclinarsi: si alza il bordo più vicino. Il bordo più basso non scende mai sotto il cartoncino. Con il movimento ridotto il titolo piegato compare e sparisce in dissolvenza e la carta resta ferma.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TITLE | script.js | 'Fold Works' | Il titolo che i nastri scrivono: lettere dalla A alla Z e spazi (si scrive in maiuscolo, gli altri segni si saltano). Con più parole, se c’è posto per lettere più grandi, va una parola per riga. |
SUBTITLE | script.js | 'Paper goods, folded by hand' | La riga sotto il titolo, che sale lettera per lettera (vuota = niente riga). |
SPEED | script.js | 1 | La velocità dei nastri, mentre corrono e mentre si piegano: 2 il doppio, 0.5 la metà. |
RIBBON | script.js | 1 | La larghezza del nastro di carta: 1.2 più largo e pieno, 0.8 più sottile. |
LIFT | script.js | 1 | Quanto la carta si alza e si inclina sotto il puntatore e nello spiffero (0 = resta piatta). |
SPRING | script.js | 0.6 | Quanto è elastica la carta: 1 oscilla a lungo prima di posarsi, 0 si posa subito. Vale anche per il sussulto quando un lembo atterra. |
REST | script.js | 2 | Quanti secondi il titolo piegato resta fermo, dopo lo spiffero, prima che i nastri si riavvolgano. |
Quando usarla
Per aprire il sito di una cartoleria, di una legatoria o di uno studio di packaging, di un negozio di origami o di carte regalo, di un laboratorio per bambini, di una scuola di design; per un titolo giocoso che si presenta e se ne va, in una pagina d’attesa, in un evento o in un post.
Sul telefono
La stessa animazione con le misure adattate: le due parole vanno su due righe larghe quanto lo schermo, i nastri, le pieghe e le ombre si rimpiccioliscono con lui. Trascinando il dito sul titolo la carta si alza come col puntatore; un tocco lo ripiega.
Con il movimento ridotto
Niente si muove: il titolo già piegato compare in dissolvenza con la riga sotto, resta qualche secondo e sparisce in dissolvenza; poi ricomincia. La carta non si alza sotto il puntatore e lo spiffero non c’è. Un clic lo fa sparire subito.
Trappole
- Il lembo deve sempre alzarsi verso chi guarda, ma dopo una piega la carta è girata e il suo sopra è il sotto del cartoncino: il verso della rotazione dipende da quante pieghe ci sono prima (pari o dispari) e da che parte gira la linea della piega. Sbagliando, metà dei lembi passerebbe sotto il cartoncino.
- Una svolta stretta mette la linea della piega quasi lungo il nastro, e il pezzo fra due pieghe vicine può diventare un quadrilatero rovesciato su sé stesso. Ogni pezzo è l’intersezione della striscia con dei semipiani, non un quadrilatero coi quattro angoli calcolati: se una piega lo mangia del tutto resta un triangolo, o niente.
- Il capo che corre e la piega del pezzo dopo non devono essere due tween sulla stessa proprietà che si accavallano: all’indietro il riavvolgimento salterebbe. Ogni corsa del capo comincia esattamente dove finisce quella prima; ad accavallarsi sono solo la corsa e la piega, che muovono cose diverse.
- La timeline delle pieghe va avanti e indietro con progress(): i richiami del rimbalzo partono anche nel riavvolgimento, e la carta sussulterebbe a vuoto. Un segnale dice quando si sta riavvolgendo e il colpetto si salta.
- Con l’ordine fisso dei disegni un lembo in aria passerebbe sotto la lettera accanto. I pezzi alti più di un’unità vanno in fondo all’elenco, ordinati per altezza; gli altri tengono l’ordine della carta, così gli strati appoggiati non si scambiano mentre la carta ondeggia.
- Ruotare un pezzo intorno al suo centro lo staccherebbe dai vicini; l’inclinazione si fa intorno alla sua linea di mezzo, che resta al suo posto, e l’altezza aggiunta è almeno quella del bordo che scende, così non entra nel cartoncino.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 13 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.
