Lo sfondo di fili come un tessuto
Sfondi, Hover
NuovaGratis
Torna alla libreria
Lo sfondo delle linee di campo
Uno sfondo animato da mettere dietro a un titolo: su un nero quasi puro, le linee sottili di un campo magnetico fra due poli che si spostano lentissimi, con un filo di luce che scorre lungo ognuna. Il puntatore è un terzo polo su una molla: tira a sé le linee vicine, che si accendono di vermiglio, e un tocco gli cambia segno. 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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fieldline</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the background: the field lines between two invisible poles, drawn on a canvas behind the page;
the pointer is a third pole that bends the lines near it, a tap flips it -->
<main class="pagina" data-pagina>
<canvas class="fondo" aria-hidden="true" data-fondo></canvas>
<header class="testa">
<p class="marchio" data-entra>Fieldline</p>
<p class="testa__nota" data-entra>Studio for physical interfaces</p>
</header>
<section class="eroe">
<div class="blocco" data-blocco>
<p class="occhiello" data-entra>Objects that answer back</p>
<h1 class="titolo">
<span class="riga"><span class="riga__dentro" data-riga>Pulled by things</span></span>
<span class="riga"><span class="riga__dentro" data-riga>you can’t see.</span></span>
</h1>
<div class="azione" data-entra>
<a class="pillola" href="#" data-pillola>
<span class="pillola__scritta">See the work</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>
<footer class="piede">
<p class="piede__nota" data-entra>Move to bend the field, tap to flip the pole</p>
<p class="piede__lettura" aria-hidden="true" data-entra>
<svg class="polo" viewBox="0 0 12 12" aria-hidden="true"><path d="M2.6 6h6.8" /><path data-verticale d="M6 2.6v6.8" /></svg>
<span data-segno>Attract</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.
21 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 «Lo sfondo delle linee di campo» da Animorio e adattala al mio sitoCosa fa
Una pagina intera nera, il fondo di uno studio inventato che progetta oggetti e interfacce, Fieldline. Dietro a tutto, su un canvas, trenta linee sottili partono a raggiera da un polo nord e si piegano fino a un polo sud: sono le linee di un campo vero, calcolate a ogni fotogramma passo dopo passo. I due poli non stanno mai fermi: fanno un giro ellittico lentissimo, sfasati, e la raggiera intanto ruota di pochissimo, così le linee respirano. Sono più spesse vicino ai poli e si assottigliano lontano, e lungo ognuna scorre un filo di luce, trattini corti a passo fisso dal nord verso il sud, come la limatura che si mette in fila. Il puntatore è un terzo polo, su una molla: tira a sé le linee vicine, che si piegano verso di lui e si accendono di vermiglio, e se si ferma resta lì a tenerle. Un tocco gli cambia segno: passa per lo zero con un piccolo rimbalzo oltre e da attirare diventa respingere, e le linee che teneva le spinge via; in basso a destra la scritta Attract diventa Repel e il segno più perde il suo tratto verticale. Sul computer i poli stanno di fianco, in una casella alta uno sopra e uno sotto. Al centro, sopra un velo nero morbido dove le linee si spengono, il titolo: Pulled by things you can’t see, in Bricolage Grotesque stretto, e una pillola chiara (See the work) con la freccia. All'apertura le linee nascono dal nord una dopo l'altra e si allungano fino al sud. Quando nessuno muove il puntatore, un polo finto gira per la pagina e ogni tanto cambia segno da solo.
Come funziona
Il campo dei tre poli
Ogni polo ha una carica: il nord +1, il sud −1, il puntatore il suo segno per FORZA per quanto è presente. Il campo in un punto è la somma di ogni carica per la distanza diviso la distanza al quadrato (il campo di un polo in due dimensioni va come 1/r), con un piccolo nucleo morbido perché vicino al polo non esploda.
Tracciare una linea
Ogni linea parte da un cerchietto di 7 px intorno al nord e avanza lungo la direzione del campo con un passo di punto medio: il passo è corto vicino ai poli e lungo lontano (da 2,4 a 8 px), e si ferma quando arriva a un polo che la prende o esce da un margine largo oltre la pagina. Se il puntatore respinge, altre linee partono anche da lui, in proporzione alla sua forza.
Lo spessore e l'accento
Ogni tratto finisce in una di quattro misure secondo quanto è vicino a un polo, e ogni misura è un solo percorso: quattro stroke in tutto. Le linee che finiscono sul puntatore o partono da lui, o gli passano molto vicino, si ridisegnano sopra nel vermiglio, in tre mazzi di trasparenza.
Il filo di luce
Lungo ogni linea si misura la lunghezza a ogni passo; i trattini da 7 px stanno a 92 px l'uno dall'altro e il loro inizio avanza di FLUSSO px al secondo, sfasato per ogni linea. Tutti i trattini sono un solo percorso chiaro sopra le linee.
La molla, il tocco, il polo finto
Il polo del puntatore segue il dito o il mouse su una molla (MOLLA) e la sua presenza cresce e cala piano. Un pointerdown porta il segno da −1 a +1 (o al contrario) con elastic.out in 0,9 s, quindi passa per lo zero e va appena oltre. Dopo 2,4 s senza il puntatore vero il polo segue una curva di Lissajous e cambia segno ogni 6,5 s. IntersectionObserver e visibilitychange fermano il disegno quando la pagina non si vede.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LINEE | script.js | 30 | Quante linee partono dal polo nord. |
FORZA | script.js | 0.5 | Quanto è forte il polo del puntatore rispetto ai due poli fissi. |
DERIVA | script.js | 26 | In quanti secondi i due poli fanno il loro giro lento. |
FLUSSO | script.js | 34 | Quanto scorre veloce la luce lungo le linee, in px al secondo. |
MOLLA | script.js | [60, 10] | La molla del polo del puntatore: quanto è rigida e quanto è frenata. |
SPESSORE | script.js | 1 | Lo spessore delle linee vicino ai poli, in px. |
Quando usarla
Come fondo della prima schermata di uno studio di design di prodotto, di un laboratorio di fisica o di un museo della scienza, di una startup di hardware, di una rivista di scienza o di un evento su tecnologia e ricerca; in generale dietro a un titolo corto quando si vuole un fondo scuro che si muove piano e risponde al puntatore. Il colore delle linee e l'accento si cambiano nel CSS.
Sul telefono
Le stesse animazioni a misure adattate: in una pagina alta i poli stanno uno sopra e uno sotto, così le linee riempiono tutta la casella; il titolo è più piccolo e le scritte di lato non ci sono. Il dito sposta il polo mentre tocca e trascina, un tocco gli cambia segno; la pagina continua a scorrere in verticale.
Con il movimento ridotto
Il campo è fermo, coi due poli al loro posto e senza il polo del puntatore: niente deriva, niente filo di luce, niente cambi di segno. Il titolo e le scritte compaiono in dissolvenza.
Trappole
- Con un tratto per ogni segmento disegnato a sé, migliaia di stroke rallentano il telefono: le linee vanno in quattro percorsi per spessore, l'accento in tre e i trattini di luce in uno.
- Con un passo fisso le linee vicine ai poli fanno gli spigoli e quelle lontane costano troppo: il passo cresce con la distanza dal polo più vicino.
- In una casella alta i poli di fianco lasciano mezza pagina vuota: si mettono sul lato lungo della pagina.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,2 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.
