Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
I fili che disegnano la curva
Scorri dentro l’anteprima
Animazione allo scroll nello stile minimal: quattro bracci sottili con gli spilli e, scendendo, fili dritti tesi da uno spillo all’altro, uno dopo l’altro, finché i loro incroci disegnano una stella curva che nessun filo disegna da solo. Ogni filo vibra quando si tende, il titolo Taut si stringe e prende peso a ogni filo tirato e alla fine la curva si ripassa in vermiglio. Col mouse i fili si pizzicano.
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 threads that draw the curve</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>
<!-- a made-up embroidery thread maker, Tension. The stage sticks while you scroll: four thin arms with pins, and
straight threads stretched pin to pin, one after the other, until their crossings draw a curved star that no
thread draws on its own. The title gets heavier with every thread pulled taut. The threads are drawn by the script -->
<main>
<section class="corsa" data-corsa>
<div class="palco" data-palco>
<svg class="tela" data-tela aria-hidden="true">
<g class="bracci" data-bracci></g>
<g class="fili" data-fili></g>
<path class="curva" data-curva d="" pathLength="1" />
</svg>
<header class="testa" data-entra>
<span class="testa__nome">Tension</span>
<span class="testa__nota">Embroidery thread, dyed by hand</span>
</header>
<div class="titolo-box" data-titolo-box>
<h1 class="titolo" data-titolo>Taut</h1>
<p class="sotto" data-sotto>Thread that holds its line. Every curve here is made of straight ones.</p>
</div>
<p class="cenno" data-entra><span class="cenno__dentro" data-cenno><span>Scroll</span><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 3v13M4.5 10.5 10 16l5.5-5.5"/></svg></span></p>
</div>
</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="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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 «I fili che disegnano la curva» da Animorio e adattala al mio sitoCosa fa
La pagina di un produttore inventato di filo da ricamo, Tension: carta avorio, il nome in alto a sinistra e accanto, a destra, Embroidery thread, dyed by hand; in basso a sinistra un titolo enorme, Taut, sottilissimo e largo. Arrivando, da un punto a destra crescono quattro bracci sottili, in alto, a destra, in basso e a sinistra, e lungo ognuno spuntano le tacche degli spilli, dal centro verso la punta. Scorrendo il palco resta fermo e i fili cominciano a tendersi: il primo va dallo spillo vicino al centro su un braccio allo spillo in punta su quello dopo, il secondo dallo spillo dopo a quello prima, e così via, un quarto alla volta. Ogni filo si stende un po’ lento, con una piccola pancia, e quando arriva in fondo si tende di colpo e vibra come una corda pizzicata, sempre meno, finché si ferma. Sono tutti dritti, ma i loro incroci disegnano una curva: alla fine dei quattro quarti c’è una stella a quattro punte con i lati curvi. Intanto il titolo Taut prende peso e si stringe sull’asse della larghezza a ogni filo teso, con un piccolo rimbalzo, fino al nero pieno e stretto. Per ultima, una riga vermiglia ripassa la curva che nessun filo disegna da solo, e sotto il titolo compare la frase del marchio. Col mouse, attraversando i fili tesi, ogni filo toccato vibra, più forte se il mouse va veloce. Risalendo, i fili si tolgono all’indietro e il titolo si allenta.
Come funziona
Fili dritti, curva vera
Il filo i di un quarto va dallo spillo a i/N di un braccio allo spillo a (N−i)/N del braccio dopo. L’inviluppo di queste rette è una parabola: la curva di Bézier quadratica che va da una punta all’altra con la maniglia nel centro. La riga vermiglia finale è proprio quella, quattro comandi Q nello stesso path.
Lo scroll stende, il tempo vibra
Una timeline con ScrollTrigger e scrub, su un palco sticky alto 100lvh e Lenis per lo scorrimento morbido, anima un solo numero: quanto della posa è fatto. Da lì ogni filo ricava la sua parte (sfalsata, con power2.inOut). La vibrazione invece va col tempo: quando un filo arriva a 1 parte un seno smorzato, ampiezza·e^(−t/RING)·sin(2π·7t), che sposta il punto di controllo di una curva Q lungo la normale al filo. Così il filo continua a vibrare anche se lo scroll si ferma.
Il titolo teso
A ogni cambio GSAP porta font-variation-settings di Taut (Archivo variabile) verso wght 120 + 660·u e wdth 125 − 55·u, dove u è la quota di fili tesi, con back.out(2): ogni filo gli dà un piccolo strattone.
Pizzicare col mouse
A ogni pointermove si guarda se il segmento fra la posizione di prima e quella di adesso incrocia un filo teso (due prodotti vettoriali di segno opposto, per tutte e due le rette). Il filo toccato riparte a vibrare con un’ampiezza che cresce con la velocità del mouse. Un tocco o un clic pizzica i fili che passano a meno di 14 pixel dal dito.
Movimento ridotto
Niente si stende e niente vibra: lo scroll passa per tre tappe (i bracci, tutti i fili col titolo stretto, la curva vermiglia con la frase) e fra una tappa e l’altra il disegno cambia con una dissolvenza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PINS | script.js | 16 | Gli spilli su ogni braccio: più spilli, più fili e una curva più liscia. |
ARMS | script.js | 4 | Quanti bracci escono dal centro (da 3 a 8): la stella ha tante punte quanti bracci. |
SIZE | script.js | 0.38 | Quanto sono lunghi i bracci, in parte dell’altezza del palco. |
TWANG | script.js | 1 | Quanto forte vibra ogni filo quando si tende (0 = non vibra). |
RING | script.js | 0.7 | I secondi che una vibrazione impiega a spegnersi. |
PULL | script.js | 1 | Quanto si stringe il titolo: 0 = non cambia. |
RIDE | script.js | 1 | Quanto scroll serve per tutto: 2 è lungo il doppio. |
Quando usarla
Nella prima pagina di una merceria, di un produttore di filati o di un laboratorio di ricamo; nella pagina «come lavoriamo» di uno studio di design o di architettura; ovunque serva l’idea di tante cose semplici e dritte che insieme fanno una forma curva.
Sul telefono
Le stesse animazioni con le misure adattate: la stella sta in alto al centro, grande quasi quanto la larghezza, e il titolo sotto è più grande; i fili vibrano uguale. Senza mouse un tocco pizzica i fili che stanno sotto il dito.
Con il movimento ridotto
Niente si stende e niente vibra: tre tappe allo scroll, i bracci, tutti i fili col titolo già stretto e la curva vermiglia con la frase, che cambiano con una dissolvenza.
Trappole
- Unendo lo spillo i allo spillo N+1−i (la somma che sembra naturale) l’inviluppo uscirebbe oltre le punte dei bracci: la somma delle due distanze deve fare esattamente un braccio, quindi i e N−i, e il primo e l’ultimo filo, che starebbero sui bracci, non si mettono.
- La vibrazione non può stare nella timeline con scrub: si fermerebbe con lo scroll e tornerebbe indietro risalendo. È un seno smorzato nel ticker di GSAP, che si accende quando il filo arriva in fondo.
- Il titolo era la stessa parola del nome in alto, Tension, e si leggeva due volte: il titolo è diventato Taut, che è anche quello che succede ai fili.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Lenis 1.3.26, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,6 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 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.
