Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
La parola piegata a fisarmonica
Nello stile minimal: una striscia di carta con una parola grande stampata sopra si piega a fisarmonica in 3D lungo pieghe verticali, si chiude quasi del tutto, il pacchetto stretto si capovolge e la striscia si riapre sull’altra faccia, dove è stampata la parola successiva. Ogni parola riempie la striscia sull’asse della larghezza del carattere, e una quota sottile misura la carta mentre si chiude e si riapre.
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 accordion-folded word</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the words people read; everything drawn below is only their picture -->
<h1 class="sr" data-read>Fold. Turn. Open. Again.</h1>
<!-- one strip of paper with a word printed on each side. The script cuts it into panels along vertical creases,
folds them like an accordion, turns the folded strip over and opens it on the other side, where the next
word is printed. Above it, a dimension line measures how long the strip is -->
<div class="scene" data-scene aria-hidden="true">
<div class="shadow" data-shadow></div>
<div class="strip" data-strip></div>
<div class="quota" data-quota>
<i class="quota__line" data-quota-line></i>
<i class="quota__tick" data-quota-tick></i>
<i class="quota__tick" data-quota-tick></i>
<span class="quota__label" data-quota-label>420 mm</span>
</div>
</div>
<!-- an invisible copy of the printed word, to measure its width and its baseline -->
<div class="probe" data-probe aria-hidden="true"></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 «La parola piegata a fisarmonica» da Animorio e adattala al mio sitoCosa fa
Su una pagina bianco caldo arriva dall’alto un pacchetto di carta già piegato: atterra con un piccolo rimbalzo e si apre dal centro verso i lati, pannello dopo pannello, fino a diventare una striscia lunga con «FOLD» stampato da un bordo all’altro. La carta non torna mai perfettamente piatta: ricorda le sue pieghe, e i pannelli girati verso la luce sono un filo più chiari degli altri. Sulle pieghe, in alto e in basso, due tacche vermiglie dicono dove si piega; sopra, una quota sottile misura la striscia: 420 mm. Dopo un momento la carta prende fiato (le pieghe si aprono di un soffio), poi le due estremità spingono verso il centro e la striscia si chiude a fisarmonica, con la quota che scende insieme a lei, fino a un pacchetto stretto e profondo. Il pacchetto si alza, si capovolge sull’asse orizzontale (a metà giro se ne vede solo il profilo a zig zag) e ricade, e la striscia si riapre dal centro mostrando il retro della carta, un tono più caldo, con stampata «TURN». Nell’aprirsi va appena oltre le sue pieghe e torna indietro, e la quota passa i 420 mm di un millimetro prima di posarsi. Poi «OPEN», «AGAIN», e di nuovo «FOLD», per sempre.
Come funziona
Una catena di pannelli
La striscia è fatta di PANELS pannelli di CSS, ognuno largo un ottavo della striscia e girato sul suo bordo sinistro (transform-origin: 0 50%) con rotateY. I pannelli si girano a turno da una parte e dall’altra, e ognuno comincia dove finisce quello prima: x cresce di w·cos a e z cala di w·sin a. A ogni fotogramma la catena si ricalcola e si rimette al centro, così la striscia che si chiude resta in mezzo alla pagina. Un numero per pannello, k, dice quanto è chiuso: 0 aperto sulla piega che la carta ricorda (REST), 1 chiuso (CLOSE).
Una parola intera in ogni pannello
Ogni pannello ha due facce con backface-visibility: hidden, e in ognuna c’è la parola intera, spostata a sinistra di tante larghezze di pannello quanto è il suo numero: il pannello ritaglia il suo pezzo con overflow: hidden. Così i pezzi combaciano sempre e la parola si legge anche quando la striscia è mezza chiusa. Il retro è girato con rotateX(180deg): quando tutta la striscia si capovolge sull’asse orizzontale, si legge diritto e nello stesso ordine, senza specchiature.
La parola che riempie la striscia
Le maiuscole di ogni parola sono alte FILL volte la striscia (l’altezza delle maiuscole si misura con measureText su un canvas), e il margine è lo stesso sui quattro lati. Per la larghezza una ricerca binaria sull’asse wdth di Anybody, da 50 a 150, trova il valore che rende la parola lunga quanto la striscia meno i margini: «FOLD» si allarga, «AGAIN» si stringe. La linea di base si misura con un inline-block alto zero allineato alla base, perché il testo stia esattamente al centro.
Piega, capovolta, riapertura
Tutta la regia è una timeline GSAP che si ripete, un passo per parola. La piega è un tween di k con lo stagger dai bordi verso il centro e una easing scritta a mano: prima le pieghe si aprono del 4% (la carta prende fiato), poi una molla smorzata chiude e va oltre di un soffio. Prima che la piega finisca il pacchetto si alza e gira di 180 gradi su rotateX, con un’altra molla, e ricade; la riapertura parte dal centro con una molla che va oltre la piega a riposo e torna. BOUNCE decide quanto vanno oltre tutte le molle.
Quale parola su quale faccia, la luce e la quota
Il davanti mostra la parola del giro pari più vicino (2·round(giro/360)), il retro quella del giro dispari in cui si trova: ognuna cambia solo mentre la sua faccia guarda dall’altra parte, quindi non si vede mai cambiare. La luce viene da sinistra e dal davanti: il prodotto fra la normale di ogni faccia e la luce decide l’opacità di un velo scuro sopra la faccia. La quota proietta i bordi della striscia con la stessa prospettiva del CSS (P / (P − z)) e scrive i millimetri; l’ombra si stringe con la striscia e sbiadisce quando il pacchetto si alza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORDS | script.js | ['Fold', 'Turn', 'Open', 'Again'] | Le parole, una per faccia della carta: a ogni capovolta arriva la successiva. Corte vengono meglio. |
PANELS | script.js | 8 | In quanti pannelli si piega la striscia. |
CLOSE | script.js | 80 | Quanto si chiude la striscia, in gradi: 90 sarebbe chiusa del tutto, piatta. |
REST | script.js | 6 | Le pieghe che la carta ricorda quando è aperta, in gradi: 0 è perfettamente piatta. |
WEIGHT | script.js | 800 | Il peso della parola stampata, da 100 (un capello) a 900 (nerissimo). |
HOLD | script.js | 1.4 | Quanti secondi resta aperta ogni parola prima che la striscia si pieghi di nuovo. |
BOUNCE | script.js | 0.4 | Quanto la carta va oltre il suo posto prima di fermarsi: 0 niente, 1 molto. |
SPEED | script.js | 1 | La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà. |
Quando usarla
Per il titolo d’apertura di una tipografia, di uno studio di grafica o di stampa, di una cartoleria o di una rivista di carta, dove la parola che cambia è anche un oggetto; anche per una landing che dice in tre o quattro parole cosa fa un prodotto, o per l’attesa prima di un evento. Funziona con parole corte, che riempiono la striscia senza stringersi troppo.
Sul telefono
La stessa animazione: la striscia prende nove decimi della larghezza dello schermo, la parola e i pannelli si misurano su di lei, e la piega, la capovolta e le molle restano uguali, in proporzione.
Con il movimento ridotto
Niente si piega e niente gira: la striscia compare in dissolvenza già aperta, con le sue pieghe leggere, e a ogni passo la parola stampata svanisce e ricompare come la parola successiva.
Trappole
- Una fisarmonica che si chiude e si riapre dalla stessa parte mostra sempre le stesse facce: per vedere il retro bisogna capovolgere il pacchetto. Sull’asse verticale, a metà giro i pannelli inclinati di 80 gradi si metterebbero quasi di fronte e si vedrebbe un mucchio di pezzi di parola; sull’asse orizzontale restano sempre di taglio, e a metà giro si vede solo il profilo a zig zag.
- Il retro va girato sullo stesso asse della capovolta, con rotateX(180deg): girato con rotateY(180deg), dopo la capovolta orizzontale si leggerebbe a testa in giù. Così il pezzo n della parola sul retro sta semplicemente nel pannello n, nello stesso ordine del davanti.
- Cambiare la parola di una faccia con una chiamata della timeline non regge quando la timeline si riavvolge o salta avanti: la parola di ogni faccia si ricava dall’angolo della capovolta a ogni fotogramma, e cambia solo mentre la faccia guarda dall’altra parte, quindi non si vede mai cambiare.
- Dentro una timeline GSAP fromTo mette subito i valori di partenza (immediateRender): la striscia, che deve arrivare chiusa, comparirebbe aperta per un fotogramma. Ogni fromTo della regia ha immediateRender: false.
- Con pannelli larghi esattamente un ottavo, a certi angoli fra uno e l’altro può passare un filo della pagina: ogni pannello è largo sei decimi di pixel in più e copre la piega.
Librerie
GSAP 3.15.0, Anybody (font variabile, assi wdth e wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,7 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 15 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.
