Il pulsante d'acqua
Pulsanti, SVG, Fisica, Hover
NuovaGratis
Tutti i componenti
La barra a filo unico
La barra in basso dell'app di un negozio di lana, disegnata da un filo solo: la casa, il foglio, il cuore, la borsa e la persona sono lo stesso filato che si alza dalla sua riga e ci ritorna. Un tratto del filo è tinto di rosso robbia e sta nell'icona della voce scelta. Scegliendone un'altra tutto il filo scorre lungo la sua strada, come un filo tirato dentro una macchina da cucire: la torsione della lana corre sulla riga, il tratto rosso scavalca le icone che incontra, ognuna si tende al suo passaggio, e si posa nella nuova con un pixel di troppo.
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 single thread tab bar</title>
<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>
<main class="stage">
<!-- the tab bar of a yarn shop's app. One woollen thread runs across the whole bar and draws every icon on the
way, rising out of its own line and coming back to it. A stretch of the thread is dyed madder red, and it sits
in the icon of the tab you are on. Choosing another tab, the whole yarn slides along its own path like a
thread pulled through a sewing machine: the red stretch runs along the line, climbs over every icon in
between, and settles in the new one, which pulls itself tight. The thread is one SVG path rebuilt every frame -->
<nav class="bar" aria-label="Main" data-bar>
<svg class="yarn" aria-hidden="true" data-yarn>
<path class="yarn__shade" data-shade/>
<path class="yarn__thread" data-thread/>
<path class="yarn__twist" data-twist/>
<path class="yarn__dye" data-dye/>
<path class="yarn__dye-twist" data-dye-twist/>
</svg>
<button class="tab" type="button" aria-current="page" data-tab data-icon="M-10 0V-12.5L0-22L10-12.5V0">
<span class="tab__name">Shop</span>
</button>
<button class="tab" type="button" data-tab data-autoclic data-icon="M-8.5 0V-22H1.4L8.5-14.9V0">
<span class="tab__name">Patterns</span>
</button>
<button class="tab" type="button" data-tab data-icon="M0 0C-4.7-4.3-11.3-8.9-11.3-14.6C-11.3-19.1-7.5-22-4.1-21C-2.1-20.5-.7-19.1 0-17.6C.7-19.1 2.1-20.5 4.1-21C7.5-22 11.3-19.1 11.3-14.6C11.3-8.9 4.7-4.3 0 0">
<span class="tab__name">Saved</span>
</button>
<button class="tab" type="button" data-tab data-autoclic data-icon="M-10.5 0L-9.2-13.4H3.9C3.9-20.6-3.9-20.6-3.9-13.4H9.2L10.5 0">
<span class="tab__name">Bag</span>
</button>
<button class="tab" type="button" data-tab data-autoclic data-icon="M-10 0C-9.6-6-5.6-10 0-10A5.6 5.6 0 0 1 0-21.2A5.6 5.6 0 0 1 0-10C5.6-10 9.6-6 10 0">
<span class="tab__name">You</span>
</button>
</nav>
</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
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 barra a filo unico» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una barra color crema alta 68 pixel e larga 420, con gli angoli tondi e un'ombra morbida. Da un bordo all'altro la attraversa un filo di lana grigio-bruno, con i segni obliqui della torsione, che sparisce sfumando ai due lati. Lungo la strada il filo si alza e disegna cinque icone senza mai staccarsi: una casa, un foglio con l'angolo tagliato, un cuore, una borsa col manico e una persona, ognuna sopra il suo nome (Shop, Patterns, Saved, Bag, You). L'icona della voce scelta è più grande, un poco più alta e tinta di rosso robbia, e il suo nome è nero e più pieno. All'arrivo il filo si stende da sinistra, poi il tratto rosso entra dal bordo sinistro e corre fino a Shop. Scegliendo un'altra voce tutto il filo scorre: i segni della torsione si muovono lungo la riga, il tratto rosso esce dall'icona, corre sulla riga, sale e scende dentro ogni icona che incontra, che si ingrandisce e si tende mentre lui passa e poi si allenta, e arriva nell'icona nuova, va appena oltre e si posa. Col mouse su una voce la sua icona si tende un poco e il nome si scurisce; da tastiera la voce col fuoco ha un contorno sottile intorno e le frecce passano da una voce all'altra.
Come funziona
Ogni icona è un tratto solo, campionato una volta
Le icone sono scritte nell'attributo data-icon di ogni pulsante come un tratto SVG in un piccolo riquadro: x intorno al centro, y in su dalla riga (negativa), e ognuna parte dalla riga e ci torna. Dove una figura non si chiude in un colpo solo il tratto ripassa sé stesso: il manico della borsa torna sul bordo di sopra, il cuore parte e finisce sulla sua punta. All'avvio ogni tratto passa per getPointAtLength ogni 0,7 unità e diventa un elenco di punti.
Un filo solo, ricostruito a ogni fotogramma
A ogni fotogramma le icone vengono messe al loro centro e alla loro misura (REST_SIZE per le altre, 1 per la voce scelta, un poco di più sotto il puntatore) e cucite in una sola spezzata con i tratti dritti della riga fra l'una e l'altra; la voce scelta si alza di LIFT pixel, ma i piedi delle icone restano sulla riga. Intanto si sommano le lunghezze dei pezzi: è la lunghezza del filo dall'inizio, che serve a tutto il resto.
Il tratto rosso
La posizione del rosso è un numero in voci (2,4 vuol dire fra Saved e Bag): il suo centro va dal centro di un'icona, misurato lungo il filo, al centro della successiva, e la sua lunghezza da quella dell'una a quella dell'altra, più tre pixel per parte sulla riga. Il pezzo di spezzata fra quelle due lunghezze diventa il secondo tracciato, rosso e un poco più spesso. Le icone vicine al rosso crescono con una curva morbida della distanza, così ognuna si tende quando lui la attraversa.
La torsione che scorre
I segni della torsione sono trattini obliqui larghi quanto il filo, messi ogni TWIST pixel di lunghezza e contati a partire dal centro del rosso: quando il rosso avanza, avanzano anche loro, e tutto il filo sembra scorrere nelle sue guide. Per ogni segno si cercano il punto e la direzione a quella lunghezza; quelli dentro il rosso vanno nel tracciato rosso scuro, gli altri in quello bruno.
Il tiro e la molla
Scegliendo una voce un tween di GSAP porta il punto di arrivo del tiro fin lì, con un power2.inOut che dura di più per le voci lontane; la posizione del rosso lo insegue su una molla smorzata (SPRING), a passi di 1/120 di secondo e mai più di 1/30 per fotogramma, e arriva appena oltre prima di posarsi. Quando niente si muove il ciclo si ferma e il disegno resta com'è.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
START | script.js | 0 | La voce scelta quando si apre la pagina (0 è la prima). |
TRAVEL | script.js | 0.34 | I secondi che il tratto rosso impiega per andare da una voce alla successiva. |
SPRING | script.js | [240, 23] | La molla su cui il filo si posa: quanto è rigida e quanto è frenata (meno frenata, va più oltre). |
REST_SIZE | script.js | 0.78 | Quanto sono grandi le icone delle altre voci rispetto a quella scelta. |
HOVER_SIZE | script.js | 0.1 | Quanto si tende un'icona sotto il puntatore o sotto il dito. |
LIFT | script.js | 2.5 | Di quanti pixel si alza dalla riga l'icona scelta. |
TWIST | script.js | 3.2 | Lo spazio fra due segni della torsione del filo, in pixel. |
Quando usarla
Per la barra in basso dell'app di un negozio fatto a mano o di chi lavora coi fili: lana, merceria, sartoria, ricamo, tessuti, un laboratorio di maglia. Funziona con quattro o cinque voci dalle icone semplici, che si disegnano con un tratto solo; per cambiarle basta riscrivere data-icon con un tratto che parte dalla riga e ci torna. I colori del filo, del rosso e della barra stanno nelle variabili.
Sul telefono
La barra è larga al massimo 420 pixel e sul telefono si stringe allo schermo con 16 pixel di margine per lato (358 su un telefono di 390): le icone restano alla loro misura e il filo fra l'una e l'altra si accorcia. Resta alta 68 e ogni voce è un bersaglio di circa 69 per 68 pixel. Col dito giù su una voce la sua icona si tende come col mouse sopra, e il tocco la sceglie.
Con il movimento ridotto
Il filo non scorre e le icone non si tendono: scegliendo un'altra voce il disegno si rifà subito con il rosso nell'icona nuova, in una breve dissolvenza. All'apertura il filo compare in dissolvenza, già al suo posto.
Trappole
- Con l'inizio e la fine del rosso presi dai piedi delle due icone, in viaggio il rosso diventava una lunga riga sottolineata che si allungava e si accorciava. Ora si muovono il centro e la lunghezza, e il rosso resta un tratto compatto che corre.
- A 17 pixel, con un filo spesso 2,3, la borsa disegnata col manico che interrompe il bordo di sopra sembrava una casetta con la cupola. Il tratto ora fa tutto il bordo di sopra, sale nel manico e ripassa il bordo: il manico sta sopra una linea intera e si legge come una borsa.
- Il foglio col solo angolo a gradino, piccolo, sembrava un palazzo: l'angolo ora è tagliato in diagonale, e più grande.
- Le icone alte 19 unità, ridotte al 74%, diventavano grumi di lana: ora sono alte 22 e le altre voci stanno al 78%.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,9 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.
