Lo sfondo di fili come un tessuto

Sfondi, HoverGSAP, Canvas, Solo CSSMediaPeso compresso: Demo 6,4 KBGSAP 28 KBGratisScarica lo zip

Uno sfondo animato da mettere dietro a un titolo o a una sezione: righe sottilissime, fitte come la trama di una tela, che ondeggiano piano come un tessuto steso. Intorno al titolo i fili si aprono come intorno a un'asola, dove passa il puntatore si scostano e tornano al loro posto su una molla; un filo solo è rosso. Stile minimal.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Weft</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/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the background: hairline threads on a canvas behind the whole page; they part round the title like round a
       buttonhole, and move aside where the pointer goes -->
  <main class="pagina" data-pagina>
    <canvas class="fondo" aria-hidden="true" data-fondo></canvas>

    <header class="testa">
      <p class="marchio">Weft</p>
      <p class="testa__nota">Linen goods</p>
    </header>

    <section class="eroe">
      <div class="blocco" data-blocco>
        <p class="occhiello" data-entra>Linen, woven in small runs</p>
        <h1 class="titolo">
          <span class="riga"><span class="riga__dentro" data-riga>Woven slowly,</span></span>
          <span class="riga"><span class="riga__dentro" data-riga>worn for years.</span></span>
        </h1>
        <div class="azione" data-entra>
          <a class="pillola" href="#">
            <span class="pillola__scritta" data-testo="Shop the linen">Shop the linen</span>
            <svg class="pillola__freccia" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 8h10.5M9 3.8 13.2 8 9 12.2" /></svg>
          </a>
        </div>
      </div>
    </section>
  </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.

22 valori da cambiare

Apri il Playground

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 «Lo sfondo di fili come un tessuto» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Una pagina intera color bianco caldo, il fondo di un negozio inventato di lino, Weft. Dietro a tutto, su un canvas, una settantina di righe orizzontali sottilissime e grigie, una ogni dodici pixel, come la trama di una tela; una sola, in basso, è rossa. Al centro, piccolo, il titolo: sopra una riga grigia (Linen, woven in small runs), due righe in Fraunces (Woven slowly, worn for years.) e una pillola nera (Shop the linen) con la freccia; in alto a sinistra il marchio, a destra Linen goods. Intorno al titolo i fili si aprono come intorno a un'asola dai capi arrotondati: quelli sopra salgono, quelli sotto scendono, e si stringono un poco sul bordo dell'apertura, così le parole stanno sulla carta pulita. Tutta la tela ondeggia piano, con due onde che passano di sbieco a velocità diverse e tornano uguali ogni sedici secondi. Dove passa il puntatore i fili si scostano, quelli sopra in su e quelli sotto in giù, e quando se ne va tornano al loro posto su una molla, ogni punto del filo con la sua, con un filo di troppo e il ritorno. Quando nessuno muove il puntatore, un puntatore finto attraversa la tela due volte per giro: da sinistra a destra in basso, da destra a sinistra in alto. All'apertura i fili si tessono uno per volta dal centro verso fuori, avanti e indietro come la spola, poi l'asola si apre su una molla, le due righe del titolo salgono dalla loro finestra prendendo peso e arrivano la riga piccola e la pillola. In cima e in fondo i fili sfumano, così la testata resta pulita.

Come funziona

La tela

Su un canvas a tutta pagina (devicePixelRatio limitato a 2) si calcolano i fili: tanti quanti ne stanno con PASSO pixel fra l'uno e l'altro, centrati, e per ogni filo un punto ogni 10 pixel (5 sul telefono, dove i fili sono più corti e le curve si vedrebbero a spigoli). Tutti i fili grigi sono un solo percorso e un solo stroke; il filo rosso, scelto con FILO_ROSSO, ha il suo.

L'asola intorno al titolo

Si misura il blocco del titolo e intorno si apre un'asola: ogni punto si sposta in su o in giù di ry · w(x) · e^(−|u|/2ry), dove u è la distanza del filo dal centro del titolo e w(x) = (1 − (dx/rx)⁴)³ dà i capi arrotondati senza spigoli. La spinta cala con la distanza meno in fretta di quanto crescerebbe lo spazio fra i fili, quindi non si incrociano mai: sul bordo si stringono a metà, come la stoffa intorno a un'asola.

L'onda del tessuto

Ogni punto si alza di ONDA · (0,62 · sin(x·k1 + y·q1 + θ) + 0,38 · sin(x·k2 − y·q2 − 2θ + 1,3)): due onde che passano di sbieco a velocità diverse. θ è la fase di una timeline GSAP in ripetizione che dura GIRO secondi, e le velocità sono giri interi di θ, così a ogni giro la tela torna identica.

Il puntatore e le molle

Il puntatore scosta i fili di SCOSTA · tanh(du/0,25R) · e^(−dx²/2σx² − du²/2σy²): sopra in su, sotto in giù, con R = RAGGIO. Ogni punto di ogni filo segue quello spostamento su una sua molla (MOLLA), integrata a mano sul ticker di GSAP col passo limitato a 1/30 di secondo, e il punto stesso segue il puntatore su una molla quasi frenata del tutto: quando arriva il puntatore vero o torna quello finto (dopo 2,4 secondi di quiete) non c'è nessuno scatto.

L'apertura e la pausa

Una timeline porta la tessitura da 0 a 1: ogni filo si disegna fino a un punto che avanza con un ease cubico, i fili pari da sinistra e i dispari da destra, prima quelli vicini al titolo. Poi l'asola si apre con elastic.out, le righe del titolo salgono con back.out e passano da peso 250 a 380. Un IntersectionObserver e visibilitychange tolgono il disegno dal ticker e mettono in pausa il giro quando la pagina non si vede.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`PASSO`	script.js	`12`	La distanza fra un filo e l'altro, in px: più piccola, una tela più fitta.
`SPESSORE`	script.js	`1`	Lo spessore dei fili, in px.
`ONDA`	script.js	`6`	Quanto ondeggia il tessuto, in px.
`GIRO`	script.js	`16`	In quanti secondi le onde fanno un giro intero e tornano uguali (e il puntatore finto passa due volte).
`SCOSTA`	script.js	`58`	Di quanti px il puntatore scosta i fili.
`RAGGIO`	script.js	`160`	Quanto è grande la zona che il puntatore scosta, in px.
`MOLLA`	script.js	`[150, 13]`	La molla dei fili: quanto è rigida e quanto è frenata. Più frenata, niente oscillazioni.
`ASOLA`	script.js	`1`	Quanto si aprono i fili intorno al titolo: 0 non si aprono, sopra 1 l'apertura è più alta.
`FILO_ROSSO`	script.js	`0.7`	A che altezza passa il filo rosso, da 0 (in cima) a 1 (in fondo).

Provali nel Playground

Quando usarla

Come fondo della prima schermata di un negozio di tessuti, biancheria o abbigliamento, della pagina di un sarto, di una merceria, di un marchio di arredo tessile; in generale dietro a un titolo corto quando si vuole una pagina viva ma calma, che non ruba l'occhio alle parole. Il colore dei fili e del filo rosso si cambia nel CSS.

Sul telefono

Le stesse animazioni a misure adattate: i punti del filo sono due volte più fitti, l'asola è più larga perché il titolo prende quasi tutta la pagina, il titolo è più piccolo. Il dito scosta i fili mentre tocca e trascina; quando si alza torna il puntatore finto.

Con il movimento ridotto

La tela è ferma, già tessuta e con l'asola aperta: niente onde, niente puntatore, niente molle. Il titolo, la riga piccola e la pillola compaiono in dissolvenza.

Trappole

Con l'asola fatta come un'ellisse vera i capi venivano a punta, come un occhio, e i fili ci giravano intorno con uno spigolo: con w(x) = (1 − (dx/rx)⁴)³ e un'asola più larga i capi sono tondi e i fili ci scivolano intorno.
Il puntatore smetteva di agire di colpo a una certa distanza (per risparmiare calcoli) e lì i fili facevano un gradino di un pixel e mezzo: il taglio ora sta dove la spinta è sotto un quinto di pixel.
Sul telefono, con un punto ogni 10 px, le curve intorno all'asola si vedevano a spigoli: il passo dei punti si dimezza sotto i 760 px di larghezza.
La prima spinta del puntatore era troppo morbida e non si vedeva: con la tangente iperbolica più stretta i fili vicini al puntatore si aprono davvero, e restano in ordine perché lo spostamento cresce con la distanza.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 6,4 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.