The water button
Buttons, SVG, Physics, Hover
NewFree
All components
The nav with a drop on the wire
In the minimal style: the navigation bar of a ceramics studio. A hairline wire runs under the links 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 on a spring, stretching with its speed and leaning back, and the wire sags under its weight; when it stops it wobbles and settles. Choosing the link the drop swells and lets a small bead fall.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!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
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
25 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The nav with a drop on the wire” from Animorio and fit it into my siteWhat it does
On a white background there is the top bar of an invented ceramics studio, Dewline: the name on the left, «Ceramics studio» on the right and below five links, Work, Studio, Glazes, Journal and Visit. Under the links runs a very thin grey wire, held at both ends by two small pins, and under the page you are on hangs a drop of water: a clear bulb with a slightly darker rim, a shine at the top left and a point of light at the bottom right, and a very faint shadow beneath. On opening the links rise one after the other and the drop gathers on the wire with a small bounce. Pointing at another link the drop slides towards it on a spring: the faster it goes the more it stretches and leans back, and the wire bends into a soft dip that follows it. When it arrives it goes a little past, comes back and wobbles, squashing and stretching a couple of times before it settles. The link near the drop takes weight and width, the one you point at lifts by a pixel. Clicking, the link turns blue, the drop swells for a moment and a small bead comes off, falls and fades. Leaving the links the drop goes back under the chosen page.
How it works
A mass on a spring
The drop has a position and a speed along the wire. Every frame, split into four small steps, its acceleration is the spring towards the centre of the link you point at minus the friction: stiffness 120, friction 15. So it sets off firmly, goes a little past and comes back.
A shape that feels the speed
The drop is drawn as a path: a neck on the wire and a round bulb below. Its length grows with the speed and the bulb narrows, and the whole drop turns back against the motion. A second number, the squash, is a spring as well: when the speed changes suddenly it gets a push, and the drop wobbles until that spring calms down.
The wire that sags
The wire is a line of 48 points: each drops on a bell centred on the drop, deeper when the drop runs or swells. The two pins sit at the ends, where the wire does not move.
Still light
The body is a gradient of clear glass, the rim a thin slightly darker line; the shine and the glint are worked out on the bulb every frame but always stay at the top left and bottom right, as if the lamp were still while the drop moves.
Choosing
Clicking a link makes it the current one (aria-current), the drop swells by 12% and comes back, and a bead leaves the bottom of the bulb and falls 46 pixels as it fades, with power2.in. The arrow keys move the drop from link to link.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
SPRING | script.js | [120, 15] | The drop's spring along the wire: how stiff and how much it is held back. |
SIZE | script.js | 11 | The drop's radius, in pixels. |
STRETCH | script.js | 0.022 | How much the drop stretches with its speed (0, it stays round). |
LEAN | script.js | 0.0016 | How far the drop leans back as it slides. |
SAG | script.js | 4 | How many pixels the wire sags under the resting drop. |
WOBBLE | script.js | [300, 7] | The drop's wobble when it stops: how stiff and how much it is held back. |
BEAD | script.js | 1 | The bead that falls when a link is chosen (0, none). |
When to use it
For the top bar of a light, calm site: a ceramics or glass studio, a florist, a spa, a mineral water brand, a gardening blog. It suits four, five or six short links on a light background.
On phones
The bar is as wide as the screen less 32 pixels and the links shrink with the width; the drop follows a finger sliding over the bar and a tap chooses the link.
With reduced motion
The drop does not slide or wobble: it moves from link to link at once, the wire stays straight and no bead falls. The links still take weight near the drop.
Pitfalls
- The spring must be integrated in small steps (four per frame) and the step never longer than 1/30 of a second: with a long step, after a tab came back to the front, the drop would shoot off the wire.
- The squash is held between minus 0.35 and 0.35: with a hard jerk the drop would turn into a needle.
- The SVG gradient colours do not read CSS variables written in the stop-color attribute: they are set in the CSS, with rules on the stops.
Libraries
GSAP 3.15.0, Mona Sans (font variabile, con gli assi della larghezza e del peso) 5.3.0.
Compressed with gzip, the three demo files weigh 5.7 KB; the libraries: GSAP 28 KB.
Testing
Tested on 24 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
