Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
Il quaderno di una frase
Scorri dentro l’anteprima
Nello stile minimal: un quaderno bianco aperto sul tavolo, una parola sola su ogni pagina. Scorrendo le pagine si girano in 3D, si curvano, atterrano con un piccolo rimbalzo e il bordo si posa sull’aria; girate di fila compongono una frase, che sulla pagina di sinistra cresce parola dopo parola. L’ultima pagina resta aperta, con un punto rosso che cade sulla riga.
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 one-sentence notebook</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a plain white notebook lying open on the table: as you scroll its pages turn in 3D, one word on each, and turned
in a row they make a sentence. The last page stays open with a single red full stop. The words are in WORDS, at
the top of script.js -->
<main>
<section class="racconto" data-racconto>
<div class="palco">
<header class="testa">
<p class="marchio">Quire</p>
<p class="nota">One line per page</p>
</header>
<div class="scena" data-scena>
<div class="libro" data-libro>
<div class="ombra-libro" aria-hidden="true"></div>
<div class="copertina" aria-hidden="true"></div>
<!-- the two pages that never move: the inside of the cover on the left, the last page on the right -->
<div class="fissa fissa--sinistra" data-sinistra aria-hidden="true">
<div class="contenuto contenuto--retro">
<i class="riga"></i>
<span class="sigla">Quire</span>
<i class="velo velo--retro"></i>
</div>
</div>
<div class="fissa fissa--destra" data-destra aria-hidden="true">
<div class="contenuto contenuto--fronte">
<i class="riga"></i>
<span class="parola parola--segno"><span class="segno" data-segno></span></span>
<i class="velo velo--fronte"></i>
</div>
</div>
<!-- the pages that turn are written here by the script -->
</div>
</div>
<!-- the sentence for screen readers -->
<p class="frase-letta" data-frase></p>
<p class="invito" data-invito><span data-invito-testo>Scroll to turn the pages</span></p>
</div>
</section>
<section class="coda">
<p class="coda__testo">Quire makes plain notebooks<br>for one good sentence a day.</p>
<p class="piccolo">Pocket size, 96 pages, one line on each</p>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.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 quaderno di una frase» da Animorio e adattala al mio sitoCosa fa
Su un tavolo bianco caldo c’è un quaderno tascabile bianco, aperto e appena inclinato all’indietro, con un bordo di copertina che spunta intorno alle pagine. Ogni pagina ha una riga sola, sottile, alla stessa altezza su tutte e due le facciate. All’arrivo il quaderno sale sul tavolo, la riga si disegna da sinistra e «Write», sulla pagina di destra, prende peso con un piccolo elastico. Scorrendo, la pagina si stacca dalla pila: prima si alza l’angolo, così la carta si curva in avanti, poi passa sopra il dorso e ricade dall’altra parte con il bordo libero che resta indietro, come la carta nell’aria. Sulla pila di sinistra rimbalza due volte, di pochi gradi, mentre il bordo, più leggero, si solleva e si posa tre volte; il quaderno sente il colpo e si abbassa di un capello. Mentre la pagina sale, la sua ombra copre la pagina sotto partendo dal dorso, poi passa sulla pila di sinistra; la carta che si gira si scurisce quanto più volta le spalle alla luce. Ogni pagina girata scopre la parola successiva, che nasce sottile e morbida e prende peso con un elastico; sul retro della pagina appena girata, a sinistra, c’è la frase letta fin lì, con le parole vecchie in grigio e l’ultima in nero: «Write», «Write one», «Write one thing», «Write one thing well». L’ultima pagina non si gira: quando la pagina sopra se ne va, un punto rosso cade sulla sua riga, si schiaccia, rimbalza appena e torna tondo, e la frase a sinistra diventa tutta nera. Tornando su, tutto torna indietro pagina per pagina. Al telefono il quaderno è rilegato in alto, come un taccuino da cronista: le pagine si girano verso l’alto e la frase sta sopra la parola.
Come funziona
Una pagina fatta di strisce
Ogni pagina che si gira è una catena di dieci strisce verticali, ognuna figlia della precedente e attaccata al suo bordo con transform-origin a sinistra: la prima ruota intorno al dorso con rotateY, le altre aggiungono ciascuna un piccolo angolo, così la carta si curva. Ogni striscia ha due facce, il fronte e il retro (ruotato di 180 gradi, backface-visibility: hidden), e dentro ognuna c’è la pagina intera spostata di quanto serve perché si veda solo la sua fetta. Le strisce sono più larghe di 1,6 pixel della loro parte: si sovrappongono e fra due strisce inclinate non si apre mai una fessura.
Il giro di una pagina, scritto a mano
La timeline muove un solo numero per pagina, p da 0 a 1, e una funzione lo trasforma in angolo e curva. Per i primi otto decimi la pagina è in aria: l’angolo segue u²(2−u), lento a staccarsi dalla pila e ancora in corsa quando arriva dall’altra parte; la curva segue sin(2πu), positiva mentre si alza (l’angolo va avanti) e negativa mentre cade (il bordo resta indietro). Negli ultimi due decimi l’atterraggio: la pagina rimbalza due volte di pochi gradi e il bordo si solleva tre volte, con due seni smorzati che finiscono esattamente a zero. La curva cresce verso il bordo libero e non spinge mai una striscia oltre 0 o 180 gradi, dentro una pila.
Luce e ombre
Ogni faccia si scurisce con l’angolo a cui è girata: il fronte con 1−cos, il retro con 1+cos. Per non vedere le strisce come bande, l’ombra di ogni striscia è un gradiente fra la media dei suoi angoli con la striscia prima e con quella dopo, quindi due strisce vicine combaciano sul bordo. L’ombra che la pagina getta sotto di sé è un altro gradiente, sul fronte della pagina sotto a destra e sul retro di quella sotto a sinistra, che parte dal dorso ed è lungo quanto la pagina vista dall’alto (cos dell’angolo). Le pagine coperte da un’altra non si disegnano affatto.
La parola che prende peso
Le parole sono in Fraunces, un carattere variabile con gli assi del peso e della morbidezza (SOFT). Mentre una pagina si alza, la parola sotto passa da 220 a 600 di peso con un elastic.out calcolato sulla sua corsa, e da morbida diventa netta: con lo scroll avanti e indietro l’elastico si ripete. La misura delle parole è presa dal browser con un elemento nascosto, perché l’asse della grandezza ottica cambia la larghezza e un canvas non sa impostarlo; si misura al peso più alto che l’elastico raggiunge, così una parola non esce mai dalla pagina.
Il punto e il quaderno in verticale
Il punto rosso dell’ultima pagina cade con un’accelerazione costante, si schiaccia toccando la riga e torna tondo con una molla smorzata che oscilla una volta e mezza, tutto legato allo scroll. Poi la variabile --letta porta le parole grigie al nero. Quando lo schermo è stretto il quaderno si rilegge in verticale: le stesse strisce diventano orizzontali, la pagina gira con rotateX intorno al bordo in alto e i gradienti cambiano direzione; la timeline resta la stessa.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORDS | script.js | ['Write', 'one', 'thing', 'well'] | Le parole, una per pagina: girate di fila fanno la frase. Più sono, più lungo è lo scroll di ognuna. |
LAST | script.js | '.' | Il segno sull’ultima pagina, quella che resta aperta, nel colore d’accento: un punto, un punto esclamativo, una parola corta. |
BEND | script.js | 26 | Quanto si curva la carta mentre gira, in gradi: 0 è un cartoncino rigido. |
BOUNCE | script.js | 0.5 | Quanto rimbalza una pagina e quanto si solleva il suo bordo quando atterra: 0 niente, 1 molto. |
TILT | script.js | 16 | Quanto è inclinato all’indietro il quaderno sul tavolo, in gradi (al telefono un po’ meno). |
LIGHT | script.js | 220 | Il peso di una parola quando è ancora coperta. |
BOLD | script.js | 600 | Il peso su cui si posa una parola quando la sua pagina è aperta. |
SCRUB | script.js | 0.9 | Quanti secondi impiegano le pagine a raggiungere lo scroll: 0 le attacca alla rotella. |
Quando usarla
Per l’apertura di un blog o di un diario, il manifesto di uno studio in una frase, il lancio di un prodotto di carta (quaderni, una rivista, un libro), la pagina «chi siamo» di una casa editrice: una frase breve, da quattro a sei parole, che vale la pena leggere una parola alla volta.
Sul telefono
Le stesse pagine, gli stessi rimbalzi e lo stesso punto, ma il quaderno è rilegato in alto: le pagine si girano verso l’alto intorno al bordo superiore, la frase sta sopra e la parola sotto, tutte e due larghe quanto lo schermo.
Con il movimento ridotto
Niente pagine che girano e niente spostamenti: il quaderno resta aperto e, scorrendo, la parola a destra e la frase a sinistra si danno il cambio con una dissolvenza, fino al punto rosso e alla frase tutta nera.
Trappole
- Con le strisce larghe esattamente la loro parte, fra due strisce inclinate si apriva una fessura di un pixel da cui spuntavano le lettere della pagina sotto: le strisce si sovrappongono di 1,6 pixel e le pagine coperte da un’altra non si disegnano.
- Un’ombra tinta unita per striscia faceva vedere la pagina a bande, e togliere l’ombra dalla parte che si sovrappone lasciava righe chiare: ogni striscia ha un gradiente fra gli angoli medi dei suoi due bordi, che nella parte sovrapposta tiene il valore del bordo, così le strisce vicine combaciano.
- La frase della pagina di sinistra, misurata con un canvas, usciva dalla pagina: Fraunces cambia larghezza con l’asse della grandezza ottica, che un canvas non sa impostare. La misura la fa il browser con un elemento nascosto, dentro il palco (fuori faceva sforare la pagina di lato al telefono).
- Un elemento con preserve-3d perde la profondità se ha opacity: l’entrata dissolve la scena che fa da prospettiva, non il quaderno, e le facce hanno overflow hidden ma nessun figlio in 3D.
- Al telefono il quaderno aperto in orizzontale era alto un terzo dello schermo e la frase si leggeva a fatica: rilegato in alto, con le stesse strisce girate di 90 gradi e rotateX al posto di rotateY, prende tutta la larghezza.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Fraunces (font variabile, assi opsz, wght e SOFT) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10 KB; le librerie: GSAP + ScrollTrigger 45 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.
