La parola di vetro
WebGL, 3D, Scroll, Testo
Gratis
Torna alla libreria
Il foglio che si distende
Nello stile minimal, per un’app di scrittura inventata: un foglio a righe accartocciato sotto una luce radente, su un tavolo nero. Le pieghe si lasciano andare una dopo l’altra, ognuna oltre il piano di un soffio, e il foglio torna liscio con la sua parola, «Again.»; restano solo le righe sottili dove era piegato. Dopo un po’, o a un clic, si accartoccia di nuovo con pieghe nuove: a ogni giro il foglio ricorda qualche riga in più.
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 sheet that smooths out</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
<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>
<!-- a sheet of ruled paper from a made-up writing app, crumpled, lies under a low light. Its creases let go one
after the other and the sheet smooths out, keeping only faint lines where it was folded. A click crumples it
again. The script draws the sheet in 3D on the canvas -->
<main class="stage" data-stage>
<canvas class="canvas" data-canvas aria-hidden="true"></canvas>
<h1 class="sr" data-sr>Again. Redraft, a quiet place to write.</h1>
<button class="again" type="button" data-again data-autoclic>Crumple it</button>
</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.
16 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 foglio che si distende» da Animorio e adattala al mio sitoCosa fa
Su un tavolo nero compare un foglio a righe accartocciato, più piccolo del suo formato, con le pieghe che la luce bassa da sinistra fa vedere chiare e scure. Le pieghe piccole si lasciano andare per prime, una dopo l’altra, poi le due lunghe: ognuna va oltre il piano di un soffio e si assesta, e intanto il foglio si raddrizza, torna alla sua misura e si mette in piano. Sopra c’è stampato «Again.» in un serif sottile, il nome dell’app e una riga piccola in alto, le righe pallide e la riga del margine in vermiglio, che piegate seguivano la carta. Disteso, il foglio tiene solo righe sottilissime dove era piegato. Dopo qualche secondo si accartoccia di colpo con pieghe nuove e un piccolo giro, e si distende di nuovo: a ogni giro restano le righe di un’altra accartocciata, come in una bozza vera. Il puntatore fa inclinare piano il foglio verso di sé; un clic, o «Crumple it», lo accartoccia subito.
Come funziona
Un foglio fatto di pieghe
Il foglio è una griglia di 96 × 136 quadretti in WebGL, nelle proporzioni di un A4. Nel vertex shader l’altezza di ogni punto è la somma delle pieghe: ognuna è una cresta (o una valle) lungo una linea, che scende dritta da uno spigolo vivo, max(0, 1 − |distanza| / larghezza), e sfuma verso i suoi capi. Ogni accartocciata ne fa quattordici: due lunghe che attraversano il foglio e dodici corte.
La carta che si ritira
La carta che sale in una piega viene dai lati: ogni piega tira il contorno piatto verso la sua linea, così da accartocciato il bordo del foglio si fa irregolare; in più tutto il foglio si stringe del 10% verso il centro. Le normali per la luce vengono dalle differenze dell’altezza a un quadretto di distanza.
La luce radente
La luce arriva bassa da sinistra (LIGHT dice quanto). Il colore della carta si moltiplica per 1 + 1,8 · (luce − luce del foglio piatto): il foglio disteso ha esattamente il suo colore, le facce girate verso la luce si schiariscono e le altre si scuriscono. Quello che è stampato (inchiostro nel canale rosso, accento nel verde) prende la stessa luce.
La memoria della carta
Quando un giro di pieghe si distende, le sue linee si disegnano sottili nel canale blu della texture, sfumate ai capi: nello shader scuriscono appena la carta. Così le pieghe tornano a zero ma il foglio ricorda dov’erano, e a ogni accartocciata nuova (fino a tre giri) le righe aumentano.
La regia
Ogni giro è una timeline GSAP: le pieghe del giro si alzano quasi insieme in 0,45 s con un power3.out e il foglio si stringe girando appena; poi si lasciano andare sfalsate di STAGGER, le piccole prima e le lunghe per ultime, ognuna con un back.out(SPRINGY) che la porta oltre il piano e la riporta; il foglio torna alla sua misura e si raddrizza. Il foglio si ridisegna solo mentre qualcosa cambia.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'Again.' | La parola grande stampata sul foglio. |
BRAND | script.js | 'Redraft' | Il nome in cima al foglio. |
LINE | script.js | 'A quiet place to write' | La riga piccola accanto al nome. |
DEPTH | script.js | 1 | Quanto sono profonde le pieghe: 0,3 appena stropicciato, 1,6 molto. |
STAGGER | script.js | 0.07 | I secondi fra una piega che si lascia andare e la successiva. |
SPRINGY | script.js | 1.8 | Quanto una piega va oltre il piano prima di posarsi. |
MEMORY | script.js | 0.06 | Quanto ogni piega resta nella carta: 0 niente. |
HOLD | script.js | 3.2 | I secondi che il foglio resta disteso prima di accartocciarsi di nuovo. |
LIGHT | script.js | 0.75 | Quanto è bassa la luce: 0 dall’alto, 1 radente. |
Quando usarla
Per l’apertura di un’app di scrittura o di appunti, di un blog personale, di una rivista o di uno studio di grafica che parla di bozze e di ricominciare: il foglio si distende e la parola si legge. Anche come pagina «riprova» dopo un errore.
Sul telefono
Lo stesso foglio, largo quattro quinti dello schermo, con le stesse pieghe e la stessa luce; un tocco lo accartoccia di nuovo. Il foglio non si inclina verso il dito.
Con il movimento ridotto
Niente si accartoccia: il foglio compare in dissolvenza già disteso, con le righe sottili di una piega vecchia, e resta fermo.
Trappole
- Lasciare un poco di ogni piega nella geometria, per la memoria della carta, faceva bande grigie larghe come le pieghe e non righe: la memoria è passata in linee sottili disegnate nella texture.
- Con le normali misurate a una distanza più piccola di un quadretto della griglia, le creste uscivano a dente di sega: misurate a un quadretto di distanza la luce sulle pieghe è continua.
- La prima versione aveva pieghe basse e la luce troppo morbida: accartocciato, il foglio sembrava solo un po’ sporco. Pieghe più profonde, contorno tirato verso le pieghe e luce più radente lo fanno sembrare carta vera.
- Il canvas della stampa si chiamava print e copriva window.print: ora si chiama printed.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Archivo (font variabile, assi wdth e wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,5 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
