La parola dietro il vetro cannettato
WebGL, Testo, Hover
NuovaGratis
Torna alla libreria
Il titolo di lino che si increspa
Titolo animato in WebGL, nello stile minimal: una parola stampata su un pannello di lino chiaro, al centro di una pagina bianco caldo. Il puntatore pizzica la stoffa e la tira: il tessuto segue il dito e le pieghe corrono nella direzione del tiro, con la luce che le scolpisce e l'ombra del pannello che si allarga. Lasciando, il lino torna su una molla e si assesta; un tocco lascia una piega che si distende piano.
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>Ordo Linen</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 word printed on a swatch of linen: the pointer pinches the cloth and pulls it, the folds run along the pull
and spring back when you let go; a tap leaves a crease that slowly relaxes -->
<main class="pagina" data-pagina>
<canvas class="tela" aria-hidden="true" data-tela></canvas>
<div class="ripiego" aria-hidden="true"><span data-ripiego>Woven</span></div>
<h1 class="parola" data-parola>Woven</h1>
<header class="testa">
<p class="marchio" data-entra>Ordo Linen</p>
<p class="testa__nota" data-entra>Washed linen, cut to order</p>
</header>
<footer class="piede">
<p class="nota" data-entra data-nota>Pinch and pull the cloth, tap to crease it</p>
<p class="stato" data-entra>Cloth <span data-stato>resting</span></p>
</footer>
</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.
20 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 lino che si increspa» da Animorio e adattala al mio sitoCosa fa
Al centro di una pagina bianco caldo c'è un pannello di lino di Ordo Linen, un laboratorio di biancheria inventato, con la parola Woven stampata in un carattere con le grazie e una cucitura vermiglia a punto filza lungo l'orlo in alto e in basso. All'arrivo la stoffa si posa con due onde lunghe che si spengono, e l'inchiostro compare come assorbito dal lino. Il puntatore la pizzica: premendo si prende il tessuto in quel punto e trascinando lo si tira. Il lino vicino alla presa segue il dito, sempre meno allontanandosi, e lungo il tiro nascono le pieghe, una cresta al centro e due o tre più basse ai lati, tante e tanto profonde quanto si tira; la parola si piega con loro, la luce da sinistra in alto le scolpisce e l'ombra del pannello sulla pagina si allarga dove la stoffa si solleva. Lasciando, il lino torna al suo posto su una molla, passa un poco oltre e si assesta. Un tocco senza trascinare lascia una piega: la stoffa si raggrinza da sola e si distende piano. Col mouse sopra la stoffa il puntatore preme una piccola conca. La trama è vera: ordito e trama si passano sopra e sotto, ogni filo un poco diverso dall'altro, qualche bava più chiara, e l'inchiostro si rompe sui fili. In basso la scritta dice se la stoffa è ferma, tenuta o si sta assestando. Quando nessuno la tocca, una mano finta la pizzica e la tira due volte, poi la piega con un tocco.
Come funziona
La stoffa in uno shader
Tutto è un solo fragment shader WebGL 2 su un triangolo grande quanto la pagina. Per ogni pixel una funzione, stoffa(p), dice due cose: quanto è alta la stoffa lì, in pixel, e da dove viene il lino che ci sta sopra, cioè di quanto è stato tirato via dal suo posto. Le pieghe sono l'altezza; la trama, l'inchiostro e l'orlo si leggono nel punto d'origine, così si muovono col tessuto.
Una presa
Ogni presa ha il punto dove si è preso il lino e il punto dove sta adesso il dito. Il lino vicino alla presa si sposta col tiro, con un peso gaussiano largo REACH. Le pieghe stanno lungo il tratto fra i due punti, un poco anche dietro, e sono un coseno attraverso il tiro: una cresta al centro, più alta, e due o tre più basse ai lati, profonde quanto è lungo il tiro.
La luce e la trama
La pendenza viene dalle derivate dello schermo, dFdx e dFdy, così la funzione della stoffa si chiama una volta sola per pixel, e diventa una normale; la luce viene da sinistra in alto, con un riflesso sottile. La trama è una griglia di fili di THREAD pixel, ordito e trama che si alternano sopra e sotto come in una tela, ogni filo con il suo spessore a caso e qualche bava più chiara; dove i fili diventano più fini di un pixel la trama si spegne, così non sfarfalla.
La molla
Le prese vivono in JavaScript: tenuta, la stoffa segue il dito con una molla rigida e un filo di ritardo; lasciata, torna al suo posto con una molla più morbida che passa un poco oltre; la piega di un tocco nasce già tirata in una direzione a caso e torna piano. Le prese sono al massimo quattro, e quella tornata a posto si toglie.
L'ombra che si allarga
Sotto il pannello c'è un'ombra morbida calcolata da un rettangolo arrotondato; dove la stoffa si solleva l'ombra scende di qualche pixel e si sfuma di più, come sotto un telo preso fra le dita.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | Woven | La parola stampata sul lino. |
REACH | script.js | 1 | Quanto è larga la presa del dito sulla stoffa: più alto, pieghe più larghe e più lunghe. |
FOLDS | script.js | 1 | Quanto sono profonde le pieghe. |
SPRING | script.js | 1 | Quanto è rigida la molla che riporta la stoffa: più alto, torna prima e oscilla meno. |
CREASE | script.js | 1 | Quanto è forte la piega che lascia un tocco. |
THREAD | script.js | 2.4 | Lo spessore di un filo del lino, in px. |
WEIGHT | script.js | 560 | Il peso della parola. |
Quando usarla
Come titolo dell'apertura di un laboratorio di biancheria, di un negozio di tessuti, di un sarto o di un marchio di abbigliamento; dietro al nome di un hotel o di una casa vacanze che punta sui tessuti; nella pagina di un prodotto tessile, dove la stoffa si deve toccare anche dallo schermo.
Sul telefono
La stessa animazione: il pannello si misura sulla larghezza e sull'altezza e resta dentro la casella con vuoto intorno; il dito preme e trascina la stoffa, un tocco la piega. Senza mouse non c'è la conca del puntatore, e la frase in basso dice press invece di pinch.
Con il movimento ridotto
Il lino è già disteso e fermo con la parola stampata: niente pieghe, niente molle, niente mano finta. Le scritte compaiono in dissolvenza.
Trappole
- La trama a fili di due pixel sfarfalla appena la stoffa si piega o si rimpicciolisce: si spegne dove i fili diventano più fini di un pixel, misurato con fwidth.
- La trama, l'inchiostro e l'orlo vanno letti nel punto da cui viene il lino, non dove si trova adesso: altrimenti le pieghe si muovono e la parola resta ferma sotto, come un adesivo.
- Una molla senza limite lascia tirare la stoffa fuori dalla pagina: il tiro si ferma a poco meno di metà del lato corto del pannello.
- Nel WebGL in software i fotogrammi arrivano tardi: la molla si integra con il tempo vero, in due passi per fotogramma e mai più di un trentesimo di secondo alla volta, così non esplode.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,4 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 24 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.
