La nav con la goccia sul filo

Navigazione, Fisica, SVG, HoverGSAP, Solo CSSMediaPeso compresso: Demo 5,7 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal: la barra di navigazione di uno studio di ceramica. Sotto le voci corre un filo sottilissimo e sotto la pagina in cui si è pende una sola goccia d'acqua. Puntando un'altra voce la goccia scivola lungo il filo su una molla, si allunga con la velocità e si inclina all'indietro, e il filo si piega sotto il suo peso; quando si ferma tremola e si assesta. Scegliendo la voce la goccia si gonfia e lascia cadere una perlina.

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 nav with a drop on the wire</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the top bar of a small ceramics studio. Under the links runs a hairline wire, and a single drop of water hangs
         from it under the page you are on. Pointing at another link the drop slides along the wire, stretching with
         its speed and leaning back, the wire sagging under it; when it stops it wobbles and settles. Choosing a link
         the drop swells and lets a tiny bead fall -->
    <div class="bar" data-frame>
      <p class="brand"><span class="brand__name">Dewline</span><span class="brand__note">Ceramics studio</span></p>
      <nav class="nav" aria-label="Main" data-nav>
        <a class="link" href="#work" aria-current="page" data-link><span class="link__word">Work</span></a>
        <a class="link" href="#studio" data-link><span class="link__word">Studio</span></a>
        <a class="link" href="#glazes" data-link><span class="link__word">Glazes</span></a>
        <a class="link" href="#journal" data-link><span class="link__word">Journal</span></a>
        <a class="link" href="#visit" data-link><span class="link__word">Visit</span></a>
      </nav>
      <svg class="wire" aria-hidden="true" data-svg>
        <defs>
          <radialGradient id="drop-fill" cx="0.38" cy="0.32" r="0.75">
            <stop offset="0" stop-opacity="0.95"/>
            <stop offset="0.55" stop-opacity="0.55"/>
            <stop offset="1" stop-opacity="0.9"/>
          </radialGradient>
        </defs>
        <path class="wire__line" data-line/>
        <circle class="pin" data-pin r="1.8"/>
        <circle class="pin" data-pin r="1.8"/>
        <ellipse class="drop__shadow" data-shadow rx="8" ry="1.6"/>
        <g data-drop>
          <path class="drop__body" data-body fill="url(#drop-fill)"/>
          <path class="drop__rim" data-rim/>
          <ellipse class="drop__shine" data-shine rx="1.6" ry="2.6"/>
          <ellipse class="drop__glint" data-glint rx="0.9" ry="0.9"/>
        </g>
        <circle class="bead" data-bead r="2.2"/>
      </svg>
      <p class="hint">Point at a link, the drop follows the wire</p>
    </div>
  </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.

25 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 goccia sul filo» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco c'è la barra in alto di uno studio di ceramica inventato, Dewline: il nome a sinistra, «Ceramics studio» a destra e sotto cinque voci, Work, Studio, Glazes, Journal e Visit. Sotto le voci corre un filo grigio sottilissimo, fermato ai due capi da due chiodini, e sotto la pagina in cui si è pende una goccia d'acqua: un bulbo trasparente col bordo appena più scuro, un riflesso in alto a sinistra e un punto di luce in basso a destra, e sotto un'ombra leggerissima. All'apertura le voci salgono una dopo l'altra e la goccia si raccoglie sul filo con un piccolo rimbalzo. Puntando un'altra voce la goccia scivola verso di lei su una molla: più va veloce più si allunga e si inclina all'indietro, e il filo si piega in una conca morbida che la segue. Quando arriva va un poco oltre, torna e tremola, schiacciandosi e allungandosi un paio di volte prima di fermarsi. La voce vicina alla goccia prende peso e larghezza, quella puntata sale di un pixel. Cliccando la voce diventa blu, la goccia si gonfia un attimo e una perlina si stacca, cade e sparisce. Uscendo dalle voci la goccia torna sotto la pagina scelta.

Come funziona

Una massa su una molla

La goccia ha una posizione e una velocità lungo il filo. A ogni fotogramma, diviso in quattro passi piccoli, la sua accelerazione è la molla verso il centro della voce puntata meno l'attrito: rigidità 120, attrito 15. Così parte decisa, va un poco oltre e torna.

La forma che sente la velocità

Il disegno della goccia è un tracciato: un collo attaccato al filo e un bulbo tondo sotto. La sua lunghezza cresce con la velocità e il bulbo si stringe, e tutta la goccia ruota all'indietro rispetto al moto. Un secondo numero, lo schiacciamento, è una molla anche lui: quando la velocità cambia di colpo prende una spinta, e la goccia tremola finché la molla si calma.

Il filo che si piega

Il filo è una spezzata di 48 punti: ognuno scende con una campana centrata sulla goccia, più profonda quando la goccia corre o si gonfia. I due chiodini stanno ai capi, dove il filo non si muove.

La luce ferma

Il corpo è un gradiente di vetro chiaro, il bordo una riga sottile un po' più scura; il riflesso e il punto di luce si ricalcolano sul bulbo a ogni fotogramma ma restano sempre in alto a sinistra e in basso a destra, come se la lampada fosse ferma mentre la goccia si muove.

La scelta

Cliccando una voce diventa quella corrente (aria-current), la goccia si gonfia del 12% e torna, e una perlina parte dal fondo del bulbo e cade di 46 pixel mentre sparisce, con power2.in. Le frecce spostano la goccia di voce in voce.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SPRING`	script.js	`[120, 15]`	La molla della goccia lungo il filo: quanto è rigida e quanto è frenata.
`SIZE`	script.js	`11`	Il raggio della goccia, in pixel.
`STRETCH`	script.js	`0.022`	Quanto la goccia si allunga con la velocità (0, resta tonda).
`LEAN`	script.js	`0.0016`	Quanto la goccia si inclina all'indietro scivolando.
`SAG`	script.js	`4`	Di quanti pixel il filo si piega sotto la goccia ferma.
`WOBBLE`	script.js	`[300, 7]`	Il tremolio della goccia quando si ferma: quanto è rigido e quanto è frenato.
`BEAD`	script.js	`1`	La perlina che cade scegliendo una voce (0, niente).

Provali nel Playground

Quando usarla

Per la barra in alto di un sito leggero e tranquillo: uno studio di ceramica o di vetro, un fiorista, una spa, un'azienda d'acqua minerale, un blog di giardinaggio. Sta bene con quattro, cinque o sei voci corte su un fondo chiaro.

Sul telefono

La barra è larga quanto lo schermo meno 32 pixel e le voci si rimpiccioliscono con la larghezza; la goccia segue il dito che scorre sopra la barra e un tocco sceglie la voce.

Con il movimento ridotto

La goccia non scivola né tremola: passa da una voce all'altra di colpo, il filo resta dritto e non cade nessuna perlina. Le voci prendono comunque peso vicino alla goccia.

Trappole

La molla va integrata a passi piccoli (quattro per fotogramma) e il passo non supera mai 1/30 di secondo: con un passo lungo, dopo una scheda tornata in primo piano, la goccia schizzerebbe fuori dal filo.
Lo schiacciamento va tenuto fra meno 0,35 e 0,35: con uno strattone forte la goccia diventerebbe un ago.
I colori del gradiente SVG non leggono le variabili CSS scritte nell'attributo stop-color: si danno nel CSS, con le regole sugli stop.

Librerie

GSAP 3.15.0, Mona Sans (font variabile, con gli assi della larghezza e del peso) 5.3.0.

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