Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
La parola tessuta al telaio
Scorri dentro l’anteprima
Una tessitoria di etichette tesse una parola mentre scorri, nello stile minimal: l’ordito è una fila di fili neri sottili fra due subbi, e a ogni colpo una trama vermiglia corre da un lato all’altro, sopra l’ordito dove c’è la parola e sotto dappertutto altrove; il pettine la batte nel tessuto con un piccolo colpo. Riga dopo riga, dal basso, la parola esce dai fili; alla fine l’ordito si taglia e i capi tornano su di scatto.
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 on the loom</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a made-up mill of woven labels, Tessa, weaves a word while you scroll. The warp is a row of black hairlines
between two beams; every pick, a vermilion weft runs across, over the warp where the word is and under it
everywhere else, and the reed beats it into the cloth with a small knock. Row by row, from the bottom, the word
comes out of the threads; at the end the warp is cut and springs back to the top beam -->
<main>
<section class="apertura">
<p class="piccolo">Tessa, woven labels</p>
<h1 class="titolo">Your name,<br>one thread at a time.</h1>
<p class="piccolo piccolo--tenue">Scroll to weave it.</p>
</section>
<section class="racconto" data-racconto>
<div class="palco" data-palco>
<header class="testa">
<p class="marchio">Tessa</p>
<p class="piccolo piccolo--tenue">Jacquard labels, made to order</p>
</header>
<h2 class="nascosto" data-nome>A word woven on a loom</h2>
<svg class="telaio" data-telaio aria-hidden="true">
<g data-sotto></g>
<g data-ordito></g>
<g data-sopra></g>
<g data-telai></g>
</svg>
<div class="piede">
<p class="didascalia" aria-hidden="true">
<span class="didascalia__riga" data-dida>The warp is set.</span>
<span class="didascalia__riga" data-dida>Over, under, over, under.</span>
<span class="didascalia__riga" data-dida>Cut from the loom.</span>
</p>
<p class="misura"><span data-cm>0.0</span> cm woven</p>
</div>
</div>
</section>
<section class="apertura apertura--fine">
<h2 class="titolo titolo--medio">Sewn into the collar,<br>it outlasts the shirt.</h2>
</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 «La parola tessuta al telaio» da Animorio e adattala al mio sitoCosa fa
Una tessitoria di etichette inventata, Tessa, su un bianco caldo con fili neri sottili e un solo vermiglio. Dopo l’apertura lo schermo si ferma e l’ordito si disegna: i fili scendono uno dopo l’altro dal subbio in alto fino a quello in basso. Scendendo, a ogni colpo il pettine (una riga sottile) si alza, la trama corre sopra il tessuto già fatto, una volta da sinistra e una da destra, e dove c’è la parola galleggia sopra i fili in vermiglio, mentre dappertutto altrove passa sotto e si vede appena, una riga chiara fra un filo e l’altro. Arrivata dall’altra parte, il pettine scende e la batte nel tessuto, va un pixel troppo in là e torna. Riga dopo riga, dal basso verso l’alto, dai punti vermigli esce la parola WOVEN, in lettere strette e spaziate perché non si tocchino; in basso a destra i centimetri tessuti crescono di due millimetri a colpo. Alla fine l’ordito si taglia appena sopra il tessuto: i capi liberi tornano su di scatto fino al subbio, uno dopo l’altro con un piccolo elastico, lasciando una frangia corta, e l’etichetta si assesta di un pixel. In basso la didascalia cambia frase a ogni fase. Tutto segue lo scorrimento, avanti e indietro.
Come funziona
La parola diventa punti
Lo script disegna la parola su un canvas nascosto otto volte più grande del tessuto, nel peso 720 e nella larghezza condensed di Mona Sans (scritta nel font del canvas: «condensed 720 …px»), una lettera alla volta con un punto e mezzo di vuoto fra l’una e l’altra. Poi ogni punto del tessuto guarda gli 8 per 8 pixel che copre: se più di metà è inchiostro, lì la trama passa sopra. L’altezza della parola, in colpi, è la più grande che la larghezza permette, più MARGIN righe di tessuto liscio sopra e sotto.
Tre strati in un SVG
Nell’SVG del palco fissato (position: sticky, alto 100lvh) ci sono tre gruppi uno sopra l’altro: le trame che passano sotto, poi l’ordito, poi le trame che passano sopra, che coprono i fili. Così sopra e sotto si vedono davvero. Le righe già tessute sono un path solo per strato, rifatto solo quando una riga si chiude; quella sulla navetta si ridisegna a ogni fotogramma, fino alla testa della trama.
Un colpo: la corsa e la battuta
La timeline, legata allo scorrimento con scrub SCRUB, porta un numero da 0 a 1 che diventa i colpi fatti. In ogni colpo, per il primo 72 per cento la trama corre (power1.inOut) col pettine alzato di quasi due righe, una volta da sinistra e una da destra; poi il pettine scende con la curva BEAT, un back.out che lo porta un pixel oltre, e la trama, che gli sta sempre appena sotto, entra nel tessuto con lui.
Il taglio
Ogni filo dell’ordito è fatto di due linee che si incontrano appena sopra l’ultima riga. Al taglio la parte alta si accorcia fino al subbio con un elastic.out, un filo dopo l’altro da sinistra, e resta una frangia corta sopra il tessuto; il tessuto cala di un pixel e mezzo e torna. Le didascalie in basso escono in alto da una finestra con overflow hidden allargandosi con l’asse wdth.
Misure che si rifanno
A ogni refresh di ScrollTrigger e a ogni resize lo script ricalcola la misura del punto (metà sul telefono), quante colonne stanno nella larghezza, l’altezza della parola e dei subbi, e rifà la mappa dei punti. Per questo la timeline lavora in frazioni del tessuto e non in righe: se cambia il numero di righe, lo scorrimento non si rompe.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'WOVEN' | La parola dell’etichetta: corta, in maiuscolo. |
CELL | script.js | 12 | La misura di un punto in pixel (metà sul telefono): più è piccola, più la parola è fine. |
MARGIN | script.js | 4 | Le righe di tessuto liscio sopra e sotto la parola. |
BEAT | script.js | 'back.out(1.6)' | Come il pettine batte ogni colpo: il numero fra parentesi è quanto va oltre. |
LENGTH | script.js | 10 | Quanto scorrimento prende la tessitura, in passi del racconto. |
SCRUB | script.js | 0.6 | Quanti secondi ci mette il disegno a raggiungere lo scorrimento. |
Quando usarla
Per un marchio di abbigliamento, una sartoria, una tessitoria, un negozio di stoffe o di filati, o per la pagina che racconta come si fa un prodotto artigianale: il nome nasce davanti agli occhi, un filo alla volta.
Sul telefono
Uguale, con misure adattate: i punti sono grandi la metà, così nella larghezza del telefono stanno abbastanza colonne per una parola leggibile; la didascalia e i centimetri vanno uno sotto l’altro.
Con il movimento ridotto
Niente corse né battute: ogni riga compare intera in dissolvenza, il pettine non c’è, l’ordito si accende in dissolvenza e al taglio la parte alta dei fili sfuma invece di scattare; le didascalie si danno il cambio sfumando.
Trappole
- Il pettine e la trama vanno calcolati dallo stesso numero: la trama sta sempre mezza riga sotto il pettine, così quando il pettine va un pixel oltre la trama lo segue e nessuno dei due resta indietro.
- Con la parola alta quanto il tessuto le lettere uscivano basse e larghe, poco leggibili: l’altezza ora la decide la larghezza, nella versione condensed del carattere.
- ctx.fontStretch viene rimesso a normal ogni volta che si scrive ctx.font: la larghezza condensed va scritta dentro il font del canvas («condensed 720 …px»).
- Le lettere composte di seguito si toccavano nei punti (la W con la O): ognuna si scrive da sola, con un punto e mezzo di vuoto dopo.
- Con la soglia di inchiostro al 42 per cento le lettere tonde avevano un punto staccato in cima: al 50 per cento la O resta pulita.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,9 KB; le librerie: GSAP + ScrollTrigger 45 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.
