La nav con la limatura di ferro

Navigazione, Fisica, HoverCanvasImpegnativaPeso compresso: Demo 7,0 KBsenza librerieGratisScarica lo zip

Una fila di link su un foglio chiaro cosparso di migliaia di trattini di limatura di ferro. Sotto il link corrente c'è un magnete nascosto: la limatura intorno si allinea lungo il suo campo e disegna le curve fra i due poli attorno alla parola. Puntando un altro link il campo si sposta e ogni trattino ruota sulla sua molla, un po' più tardi quanto più è lontano.

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>The iron filings nav</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the nav: a pale sheet strewn with iron filings, and a magnet hidden under the current link. The filings line up
         along its field and draw the curves between its two poles around the word; pointing at another link the
         field moves there, and every filing turns on its own spring -->
    <nav class="ff" aria-label="Main" data-nav>
      <canvas class="ff__field" aria-hidden="true" data-still></canvas>
      <canvas class="ff__field" aria-hidden="true" data-field></canvas>
      <ul class="ff__list" data-list>
        <li><a class="ff__link" href="#" aria-current="page" data-link><span class="ff__word" data-word>Work</span></a></li>
        <li><a class="ff__link" href="#" data-link data-autoclic><span class="ff__word" data-word>Studio</span></a></li>
        <li><a class="ff__link" href="#" data-link data-autoclic><span class="ff__word" data-word>Process</span></a></li>
        <li><a class="ff__link" href="#" data-link data-autoclic><span class="ff__word" data-word>Journal</span></a></li>
        <li><a class="ff__link" href="#" data-link data-autoclic><span class="ff__word" data-word>Contact</span></a></li>
      </ul>
    </nav>
  </main>

  <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.

18 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 «La nav con la limatura di ferro» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco un foglio color carta con gli angoli tondi e una fila di link al centro: Work, Studio, Process, Journal e Contact, grigi tranne quello corrente, nero. Tutto il foglio è cosparso di trattini sottili di limatura di ferro, sparsi in ogni direzione e un po' diversi in lunghezza. All'arrivo, sotto Work si accende un magnete: dalla parola parte un'onda e i trattini vicini si girano, si scuriscono e si avvicinano un poco ai poli, finché disegnano le curve classiche di una calamita, che escono da un capo della parola, girano sopra e sotto e rientrano dall'altro capo; ai due capi i trattini si dispongono a raggiera. Puntando un altro link col mouse, o arrivandoci col tasto Tab, il campo si sposta lì: l'onda parte dalla nuova parola, la limatura intorno alla vecchia torna sparsa e si schiarisce, quella intorno alla nuova si allinea, ognuno con la sua molla, così i trattini oscillano un poco prima di fermarsi. Uscendo dalla fila il campo torna sul link corrente; cliccando, resta sul nuovo. Al telefono basta il dito sul link per spostare il campo, e alzandolo il link è scelto. Quando tutto è fermo il disegno si ferma.

Come funziona

La limatura sul foglio

I trattini stanno su una griglia di passo SPACING pixel, ognuno spostato a caso di quasi un passo intero, così coprono il foglio in modo uniforme senza sembrare in fila. Ognuno ha un angolo di riposo, una lunghezza e una rigidezza sue, prese da un generatore casuale con il seme, sempre uguali a ogni caricamento.

Il campo di un dipolo

Per ogni link, una volta sola, si calcola il campo di due poli messi appena prima e appena dopo la parola: la somma di r/|r|³ verso il polo nord e il contrario verso il polo sud, con un piccolo ammorbidimento perché non vada all'infinito. La forza diventa un peso w = 1 − e^(−|E|·REACH³/distanza dei poli): dove il campo è forte il trattino prende la sua direzione, dove è debole tiene il suo angolo, e i due angoli si mescolano raddoppiati, perché un trattino non ha testa né coda.

Più fitta e più scura vicino ai poli

Oltre all'angolo, ogni campo dà a ogni trattino uno spostamento verso il polo più vicino, al massimo GATHER pixel e mai oltre il polo, e un'ombra che cresce con il campo. Sulle parole i trattini restano chiari, e le parole hanno un alone del colore del foglio, così le lettere restano sempre leggibili.

Ognuno sulla sua molla

A ogni fotogramma l'angolo di ogni trattino è tirato verso quello del campo da una molla smorzata (SPRING e DAMPING, per la via più corta modulo 180 gradi), la posizione da un'altra molla più morbida, l'ombra da un avvicinamento esponenziale. Quando il campo cambia, ogni trattino comincia a seguire quello nuovo quando lo raggiunge un'onda che parte dalla parola a WAVE pixel al secondo, così i vicini si girano prima dei lontani. Il passo è al massimo 1/30 di secondo.

Disegnare migliaia di trattini

Tutti i trattini con la stessa ombra vanno in un solo tracciato e un solo stroke, sette in tutto. All'inizio di ogni cambio i trattini che non si muoveranno (i due campi concordano e sono fermi) si disegnano una volta su una tela ferma; a ogni fotogramma si calcolano e ridisegnano solo gli altri, su una seconda tela sopra. Quando tutto è fermo da un quarto di secondo il ciclo si ferma e la tela ferma riprende tutti.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SPACING`	script.js	`8`	Quanto stanno lontani i trattini, in pixel: meno ne mette di più.
`LENGTH`	script.js	`7`	Quanto è lungo un trattino, in pixel.
`REACH`	script.js	`118`	Fin dove arriva il campo che allinea la limatura, in pixel dalla parola.
`SPRING`	script.js	`110`	Quanto è rigida la molla che gira ogni trattino.
`DAMPING`	script.js	`8`	Quanto in fretta un trattino smette di oscillare: meno lo fa andare oltre di più.
`WAVE`	script.js	`900`	Quanto corre l'onda del cambio di campo sul foglio, in pixel al secondo.
`GATHER`	script.js	`9`	Quanto scivolano i trattini verso i poli, in pixel.

Provali nel Playground

Quando usarla

Per la nav di uno studio di design, di architettura o di ingegneria, di un laboratorio, di una rivista di scienza o del portfolio di chi lavora con la fisica e i materiali.

Sul telefono

Il foglio prende la larghezza dello schermo e i link si stringono fino a 15 pixel; la limatura si fa più fitta e più corta in proporzione. Il dito su un link sposta subito il campo, alzandolo il link è scelto, senza aspettare il doppio tocco.

Con il movimento ridotto

Niente onda e niente molle: la limatura è già allineata intorno al link corrente e, puntando o scegliendo un altro link, si ridisegna di colpo nella nuova figura.

Trappole

Un trattino non ha verso: 10 gradi e 190 sono la stessa cosa. La differenza fra l'angolo e quello del campo va riportata fra −90 e 90 gradi, o metà dei trattini farebbe mezzo giro per niente; e per mescolare il campo con l'angolo di riposo si mescolano gli angoli raddoppiati.
Con la tela disegnata dalla scheda grafica, migliaia di tratti sottili e semitrasparenti a ogni fotogramma erano lentissimi su alcune macchine: getContext('2d', { willReadFrequently: true }) tiene la tela in memoria e la fa disegnare al processore, che con tanti tratti piccoli va più veloce.
Ricalcolare il campo a ogni fotogramma costava troppo: si calcola una volta per link (angolo, ombra e spostamento di ogni trattino) e cambiare link vuol dire solo cambiare quale tabella seguire.
Ridisegnare tutto il foglio a ogni fotogramma era inutile, perché lontano dalle parole la limatura non si muove: i trattini fermi vanno su una tela a parte disegnata una volta, e la tela viva ha uno strato suo (will-change), così non si ridipingono il foglio, la sua ombra e gli aloni del testo.
Il link corrente non cambia peso del carattere: con un font variabile la parola si allargherebbe, i poli non sarebbero più ai suoi capi e il campo andrebbe ricalcolato a metà animazione.

Librerie

Instrument Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 7,0 KB, e non servono librerie.

Collaudo

Provata il 5 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Fatto

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.