I glifi che si voltano
Hover, Testo, 3D
NuovaGratis
Torna alla libreria
La parola nei fogli a ventaglio
Nello stile minimal: una pila di fogli sottilissimi in 3D, vista di taglio, con una lettera stampata nell’angolo di ogni foglio. Chiusa si vedono solo i bordi dei fogli, righe sottili e una vermiglia; il puntatore, o il dito, gira la pila di tre quarti e la apre a ventaglio come un mazzo di carte, ogni foglio sulla sua molla, finché le lettere scoperte si leggono come una parola.
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 in the fanned sheets</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>
<!-- the word people read; the sheets below are only its picture -->
<h1 class="sr" data-read>Sheaf</h1>
<!-- a stack of very thin sheets seen from three quarters, one letter on each. Closed and turned edge on, only the
edges of the sheets show, one of them in the accent colour; across the page the pointer (or a finger) turns
the stack towards you and fans it open like a deck of cards, until the letters read as a word -->
<div class="scene" aria-hidden="true" data-scene>
<div class="deck" data-deck></div>
</div>
<!-- the same thing for the keyboard: a slider that opens and closes the fan -->
<div class="handle" role="slider" tabindex="0" aria-label="Fan the sheets" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" data-handle></div>
<p class="note" aria-hidden="true">
<span class="note__hint" data-hint>Move across the page</span>
<span class="note__rule"></span>
<span class="note__deg" data-deg>0°</span>
</p>
<!-- an invisible letter, to measure how wide each one is on the width axis -->
<div class="probe" aria-hidden="true" data-probe></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.
15 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 nei fogli a ventaglio» da Animorio e adattala al mio sitoCosa fa
Su una pagina bianco caldo, in mezzo, si disegnano dall’alto in basso cinque righe sottili e fitte, una dopo l’altra: sono i bordi di cinque fogli in piedi, visti esattamente di taglio, e l’ultima a disegnarsi è vermiglia. Ogni riga va un filo oltre la sua lunghezza e torna. Poi la pila gira verso di te: i fogli si allargano da righe a rettangoli bianchi, si vede che sono fogli veri, sottili e un poco staccati, e sul primo c’è una F stretta e leggera. Girata di tre quarti, la pila si apre a ventaglio come un mazzo di carte: ogni foglio gira attorno a un perno sotto il piede della pila, su una sua molla, quelli davanti un poco prima di quelli dietro, e si posa con un pixel di troppo e il ritorno. Ogni foglio, scivolando, scopre l’angolo di quello sotto, dove è stampata una lettera: S, H, E, A, F. Mentre la sua striscia si apre, ogni lettera si allarga sull’asse della larghezza del carattere fino a riempirla e prende peso, e alla fine si legge SHEAF. In basso, una riga piccola dice di passare sulla pagina e quanti gradi è aperto il ventaglio. Da lì comanda il puntatore: a destra la pila resta aperta, andando verso sinistra il ventaglio si richiude, le lettere si stringono e si alleggeriscono, la pila torna di taglio e restano solo le righe dei bordi, con quella vermiglia. Su e giù il puntatore la inclina un poco. Quando il mouse esce dalla pagina, o il dito si stacca, la pila torna da sola aperta sulla parola.
Come funziona
Una pila di fogli in CSS 3D
Ogni lettera della parola è un foglio: un div con transform-style: preserve-3d dentro un mazzo che ha la prospettiva, distanziato dagli altri di GAP pixel su translateZ. Lo spessore del foglio è un secondo div largo un pixel e mezzo, girato di 90 gradi con rotateY sul bordo sinistro: quando tutto il mazzo è girato di 90 gradi le facce spariscono di taglio e restano solo questi bordi, righe fitte con una vermiglia (il foglio in fondo alla pila). Il mazzo intero gira con rotateY da 90 gradi a TURN e si inclina di qualche grado con rotateX, così lo si guarda un poco dall’alto.
Il ventaglio attorno a un perno
Ogni foglio gira nel suo piano con rotateZ, e il transform-origin è un punto fuori dal foglio, sotto il suo piede (a PIVOT altezze di distanza): così i fogli si aprono come un mazzo tenuto in mano, in un arco morbido. L’angolo del foglio i è (i − metà) volte FAN diviso il numero dei fogli meno uno, moltiplicato per quanto è aperto quel foglio. La misura dei fogli si calcola girando i quattro angoli di ogni foglio attorno al perno: il ventaglio aperto deve stare nella pagina, sul computer e sul telefono.
Le molle, una per foglio
Il puntatore non muove i fogli: dice a che punto deve essere la pila, da 0 (chiusa di taglio) a 1 (aperta). Prima la pila gira verso di te (fino a 0,55), poi si apre il ventaglio (da 0,3): chiudendo succede il contrario. Ogni foglio insegue il suo bersaglio con una molla smorzata calcolata a piccoli passi di 1/240 di secondo; i fogli davanti hanno la molla più rigida di quelli dietro, quindi il ventaglio si apre e si chiude a onda. BOUNCE abbassa lo smorzamento: col valore normale ogni foglio va oltre di un pixel e torna. Quando una molla è ferma si blocca del tutto, così il browser smette di ridisegnare e le lettere tornano nitide.
La lettera che riempie la sua striscia
La lettera sta nell’angolo in alto a sinistra di ogni foglio, nella striscia che il foglio sopra lascia scoperta. Quella striscia si calcola: il bordo sinistro del foglio sopra, girato attorno al perno della differenza fra i due angoli, dove taglia il piede della lettera. Con il ventaglio aperto una ricerca binaria sull’asse wdth di Archivo, da 62 a 125, trova la larghezza che riempie la striscia per ogni lettera; a ogni fotogramma la lettera prende la parte di quella larghezza (e del peso, da 300 a WEIGHT) che corrisponde a quanto la sua striscia è aperta. Se la lettera più larga non ci sta nemmeno stretta, tutte diventano più piccole.
L’apertura, il puntatore e i tasti
L’apertura è una timeline GSAP: i bordi si disegnano con scaleY dall’alto, uno dopo l’altro, quello vermiglio per ultimo, con back.out che va un filo oltre; le facce compaiono, e un tween porta la pila da 0 a 1 mentre le molle la seguono. Poi comanda il puntatore: la sua posizione orizzontale, fra il 15 e il 70 per cento della pagina, è l’apertura, e quella verticale inclina la pila di qualche grado. Il dito comanda solo mentre tocca; quando esce il mouse o si stacca il dito un tween riporta la pila aperta. Per la tastiera c’è un role=slider: le frecce aprono e chiudono a quarti, Home e End agli estremi.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'Sheaf' | La parola: un foglio per ogni lettera, da 2 a 9 lettere. Gli spazi si tolgono. |
FAN | script.js | 40 | Quanto si apre il ventaglio, in gradi, dal primo foglio all’ultimo. Più è aperto, più le lettere hanno spazio. |
TURN | script.js | 30 | Quanto resta girata la pila aperta, in gradi: 0 è di fronte, 60 molto di sbieco. |
GAP | script.js | 5 | Lo spazio fra un foglio e l’altro, in pixel: decide quanto è ariosa la pila vista di taglio. |
WEIGHT | script.js | 720 | Il peso di una lettera quando la sua striscia è aperta, da 300 a 900; coperta pesa 300. |
BOUNCE | script.js | 0.35 | Quanto i fogli vanno oltre il loro posto prima di fermarsi: 0 niente, 1 un piccolo rimbalzo. |
SPEED | script.js | 1 | La velocità delle molle e dell’apertura: 2 è il doppio, 0.5 la metà. |
Quando usarla
Per il titolo d’apertura di una cartoleria, di una legatoria o di una tipografia, di un archivio, di una rivista di carta o di uno studio di grafica, dove la parola è anche un oggetto da sfogliare; anche per il nome di un marchio corto in una landing, o per un portfolio che si presenta con una parola sola. Funziona con parole da quattro a sette lettere.
Sul telefono
La stessa animazione: il ventaglio aperto prende più di otto decimi della larghezza dello schermo, i fogli e le lettere si misurano su di lui, e la pila si apre e si chiude trascinando il dito sulla pagina; staccato il dito, torna aperta.
Con il movimento ridotto
Niente gira e niente si apre: il ventaglio compare in dissolvenza già aperto, di tre quarti, con la parola che si legge; il puntatore non lo muove e la riga in basso non c’è.
Trappole
- Un foglio in CSS non ha spessore: visto esattamente di taglio sparisce. Per vedere i bordi della pila chiusa ogni foglio ha un secondo div, stretto quanto lo spessore e girato di 90 gradi, che di taglio diventa una riga e di tre quarti quasi non si vede.
- Il transform-origin può stare fuori dall’elemento: messo sotto il piede del foglio (in pixel, ricalcolato a ogni ridimensionamento) fa girare i fogli attorno allo stesso perno, come un mazzo in mano. Con il perno al centro del foglio il ventaglio diventa una girandola.
- Una molla che si avvicina al bersaglio senza fermarsi cambia il transform di qualche millesimo a ogni fotogramma, e Chrome continua a disegnare i fogli in bassa qualità come durante un’animazione: le lettere restano sgranate. Sotto una soglia la molla si blocca sul bersaglio e il transform non cambia più.
- La striscia scoperta di un foglio non cresce in modo lineare con l’angolo, e all’inizio è negativa (la lettera è ancora coperta): la larghezza della lettera si ricava dalla striscia vera, calcolata col bordo del foglio sopra girato attorno al perno, non dall’angolo.
- Il pilota automatico delle anteprime manda eventi pointerleave da ogni elemento che attraversa: per capire che il mouse è davvero uscito dalla pagina si ascolta pointerout senza relatedTarget e con le coordinate fuori dalla finestra.
Librerie
GSAP 3.15.0, Archivo (font variabile, assi wdth e wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,0 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 16 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.
