L'indice a filo teso

Hover, TestoGSAP, Solo CSSMediaPeso compresso: Demo 6,2 KBGSAP 28 KBGratisScarica lo zip

L'indice di un libro con un filo sottile fra ogni titolo e la sua pagina, al posto dei puntini: sotto il puntatore il filo si tende e si accorcia, tira il numero fino al titolo e il numero conta come un contatore dalla pagina dov'eri a quella del capitolo, poi si accende; il titolo prende peso. Lasciato, il numero torna al margine e il filo si allenta vibrando. 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>Contents on a taut thread</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <header class="top">
      <span class="top__name">Low Water</span>
      <span class="top__note">Contents</span>
    </header>

    <!-- the contents: a title on the left, its page on the right, a hairline between them that hangs a little.
         Under the pointer the line goes taut and short, pulling the page towards the title while it counts up to it -->
    <nav class="toc" aria-label="Contents" data-toc></nav>

    <p class="hint">Point at a chapter</p>
  </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.

32 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 «L'indice a filo teso» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una carta bianco caldo, in alto il titolo del libro, Low Water, e a destra Contents; in mezzo sette capitoli in Newsreader sottile, da Before the tide a Walking home in the dark, ognuno con la sua pagina in grigio sul margine destro e fra i due un filo sottile che pende appena, come un filo vero, al posto della fila di puntini. All'apertura i titoli salgono dalla loro maschera uno dopo l'altro, i fili si disegnano tesi dal titolo verso la pagina mentre i numeri contano da zero fino alla loro pagina, e appena arrivati i fili si allentano con una piccola oscillazione. Passando col puntatore su un capitolo il filo diventa nero, si tende e si accorcia: tira il numero fino a poco dopo il titolo, su una molla che va un pixel oltre e torna. Intanto il numero conta come un contatore dalla pagina del capitolo guardato prima a quella di questo (da 41 a 121, o all'indietro), e quando arriva si accende di vermiglio; il titolo passa dal peso 320 al 580. Quando il numero si posa il filo corto fa un piccolo scatto e i fili dei capitoli vicini lo sentono appena. Lasciando il capitolo il numero torna al margine, il filo si allunga e si allenta vibrando come una corda pizzicata, e i vicini oscillano un poco. Una passata veloce su più capitoli lascia una scia di numeri che partono e tornano. Col tasto Tab si passa da un capitolo all'altro con lo stesso effetto.

Come funziona

Una riga, tre pezzi

Ogni capitolo è un link con display: grid: il titolo e il numero stanno nella stessa cella con align-items: baseline, così le linee di base coincidono, e il numero si sposta solo con transform: translateX dal bordo sinistro. Il filo è un svg assoluto grande quanto la riga, con un solo path. Davanti al numero c'è un'imbottitura di zeri nascosti: mentre conta resta largo quanto la sua pagina, quindi a riposo sta a filo del margine e in viaggio non salta.

Il filo è una curva sola

A ogni fotogramma il path è M x0 y Q xm y+s x1 y: parte poco dopo il titolo (la sua larghezza si rilegge perché cambia col peso) e finisce poco prima del numero. Il punto di mezzo scende di s, che è la pendenza della molla del filo moltiplicata per la lunghezza: un filo lungo pende di SAG pixel, uno corto quasi niente. L'altezza del filo è a metà delle cifre.

Due molle per riga

La posizione del numero insegue la sua meta (il margine, o il titolo più GAP) su una molla quasi critica, NUMBER_SPRING, che va oltre di un pixel e torna. La pendenza del filo insegue zero quando è teso e SAG quando è lento, su una molla poco frenata, STRING_SPRING: per questo, lasciato, vibra come una corda. Le molle si integrano a mano sul ticker di GSAP a piccoli passi di 1/240 di secondo, stabili con ogni frequenza dello schermo.

Il contatore

Il numero è un oggetto { v } portato da un tween di GSAP, COUNT_TIME secondi in power2.out, dalla pagina dell'ultimo capitolo guardato a quella di questo, e scritto arrotondato a ogni fotogramma. Alla fine del tween la riga prende la classe is-set e il numero passa al vermiglio con una transizione CSS. Se si lascia il capitolo prima, il conto finisce in fretta sulla sua pagina mentre il numero torna indietro.

Le mani, i vicini e i tasti

Un solo pointermove sulla finestra cerca la riga sotto il puntatore dalla sua fascia d'altezza, larga quanto tutta la pagina: cambiare riga lascia la vecchia e tira la nuova. Lasciare e posarsi danno un colpetto alla velocità della pendenza dei fili vicini, moltiplicato per NEIGHBOURS. Il dito tira il capitolo che tocca e lo lascia tirato finché non tocca altrove; i link prendono il fuoco col Tab e fanno lo stesso.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`CHAPTERS`	script.js	`[['Before the tide', 9], …]`	I capitoli: il titolo e la pagina, nell'ordine del libro.
`GAP`	script.js	`68`	Quanto si avvicina il numero al suo titolo, in pixel (il filo teso riempie lo spazio).
`SAG`	script.js	`3`	Di quanto pende un filo lungo a riposo, in pixel.
`NUMBER_SPRING`	script.js	`[230, 28]`	La molla del numero: quanto è rigida e quanto è frenata.
`STRING_SPRING`	script.js	`[520, 7]`	La molla del filo: quanto è rigida e quanto è frenata (meno freno, più a lungo vibra).
`WEIGHT`	script.js	`[320, 580]`	Il peso del titolo a riposo e sotto il puntatore (da 200 a 800).
`COUNT_TIME`	script.js	`0.6`	I secondi che il numero impiega a contare fino alla sua pagina.
`NEIGHBOURS`	script.js	`0.5`	Quanto sentono i fili vicini un numero che si posa o che torna (da 0 a 1).

Provali nel Playground

Quando usarla

Per l'indice di un libro, di un ebook o di una rivista online, per il sommario di un articolo lungo o di una guida, per l'elenco dei capitoli di un corso: ogni voce con un numero (pagina, minuto, prezzo) da collegare al suo titolo. Funziona con una decina di voci al massimo e titoli che stanno su una riga; con voci lunghe che vanno a capo il filo non ha posto.

Sul telefono

Le stesse animazioni a misure adattate: la colonna è larga quanto lo schermo, i titoli più piccoli, i fili più corti e quindi un poco meno pendenti. Toccando un capitolo il filo lo tira e lo lascia tirato finché non si tocca un altro capitolo o fuori; trascinando il dito si passa da un capitolo all'altro. Il suggerimento in fondo dice Tap a chapter.

Con il movimento ridotto

Niente molle, niente fili che vibrano e niente conto: sotto il puntatore il numero compare già vicino al titolo con una breve dissolvenza, col filo corto e teso, e il titolo prende peso; lasciando, il numero ricompare in dissolvenza sul margine. All'apertura tutto compare in dissolvenza già al suo posto.

Trappole

Il filo all'inizio stava all'altezza delle maiuscole: offsetTop delle cifre non si misurava dalla riga. L'altezza giusta si prende dalla differenza fra i getBoundingClientRect della riga e delle cifre.
Contando da 121 a 9 il numero cambia larghezza a ogni cifra in meno e, appoggiato al margine, salterebbe. Davanti c'è un'imbottitura di zeri con visibility: hidden (Newsreader non ha lo spazio delle cifre), così resta largo quanto la sua pagina.
Con lo spazio fra titolo e numero di 26 pixel il filo teso spariva, ridotto a un puntino fra i due margini interni: l'effetto non si capiva. Con 68 pixel resta un trattino teso che si vede.
La molla del filo è rigida (520): integrata con un passo per fotogramma, su uno schermo lento o in un fotogramma lungo diventa instabile. Si integra a piccoli passi di 1/240 di secondo dentro ogni fotogramma.
Con la stessa pendenza per tutti, i fili corti (quello teso, quelli del telefono) si piegherebbero come sorrisi: la pendenza si moltiplica per la lunghezza del filo.
Il pilota delle anteprime manda pointerleave che risalgono da ogni elemento che lascia: l'uscita vera dalla pagina si riconosce da un pointerout senza relatedTarget e fuori dalla finestra.

Librerie

GSAP 3.15.0, Newsreader (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 6,2 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 15 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.