The spotlight nav
Navigation, SVG, Physics, Hover
NewFree
All components
The water button
A button with water in it: at rest a little water lies at the bottom, when the mouse comes in the water rises and its surface, a chain of springs, moves with the hand, with waves that run along it and bounce off the ends. A press makes it splash up to the brim, and where the water is the words turn dark.
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 water button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/funnel-display@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the water button: water fills it when the mouse comes in, its surface moves with the hand, and a press makes
it splash; where the water is, the words turn dark -->
<div class="water" data-water data-autoclic>
<button class="water__btn" type="button" data-btn>
<svg class="water__art" aria-hidden="true" data-art></svg>
<span class="water__word" data-word>Get started</span>
</button>
<p class="sr" aria-live="polite" data-live></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.
12 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 water button” from Animorio and fit it into my siteWhat it does
On a black background a dark pill button with a thin edge, the words Get started and an arrow; at the bottom a little blue water sways gently, with a line of light on its surface. On arrival the button comes up from below and the water comes in with a wave. When the mouse comes in the water rises past half way, and moving the mouse from side to side the surface follows it: under the hand a trough opens, the water heaps up the way the hand goes and the waves run to the ends and come back. The words and the arrow, light on the dark, turn dark blue where the water covers them, even halfway through a letter. Pressed, the surface sinks where it was pressed and comes back up in waves, the water splashes up to the brim for half a second, and the words leave upwards while Let's go comes in from below; 1.6 seconds later Get started is back. When the mouse leaves the water goes back to the little at the bottom.
How it works
Two sets of words, one wet
The button is drawn in an SVG: the pill, the light words with the arrow, and inside a pill-shaped clip the water, with a gradient from the light blue of the surface to the deep blue of the bottom. A second set of the words, dark, sits in a clip with the same shape as the water: where the water is, those show. The button's real words stay in the HTML for screen readers, hidden from sight.
The surface of springs
The surface is made of 48 points, and each is a spring pulled by its two neighbours (TENSION times the difference), drawn back to the level and slowed down; at the two ends the missing neighbour is the point itself, so the waves bounce back. On gsap.ticker each frame's step is split in four, and the line goes through the points with quadratic curves that end half way between one point and the next. Two slow waves added together keep the water alive even when nothing touches it.
The level
The level is a spring too (60 times the distance to its target, minus 9 times its speed): the target is REST at rest, LEVEL with the mouse over it or the focus given with the keys, and 1.08 of the height for half a second after a press. A finger has no hover: after a touch the water stays up for 1.6 seconds.
The hand that stirs
At every move the hand's speed across is measured, in pixels a second (up to 1800, times SLOSH): the points near the hand, weighted by a bell 34 pixels wide, are pushed down in proportion to the speed and up in front of the hand, so a trough opens and the water heaps up the way the hand goes. The press pushes down the points round where it was pressed, times SPLASH, and gives the level a push.
Keys and the preview
The focus given with the keys raises the water like the mouse; Enter and Space make it splash from the middle (a click with no position). The words change moving 14 pixels and fading, and an aria-live region says Let's go. A click from a script (the library's preview) is a pretend mouse: it comes in, sweeps across to 85% and back to 35%, stirring the water, presses there and leaves.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
LEVEL | script.js | 0.62 | How high the water rises under the mouse, as a share of the button's height. |
REST | script.js | 0.14 | How much water lies at the bottom at rest. |
SLOSH | script.js | 1 | How much the surface answers the hand moving across it. |
SPLASH | script.js | 1 | How big the splash of a press is. |
When to use it
For the main button of a page about water, liquids or calm: a pool or a spa, a drink, an app that reminds you to drink, a boat, a cleaning company, a campaign for the sea.
On phones
The button is 260 pixels wide, or the screen minus 48, and 72 tall. With no hover, a tap raises the water for 1.6 seconds and splashes it where the finger landed, and the tap does not wait for a double tap (touch-action manipulation).
With reduced motion
The water still rises and falls, because it says where the hand is, but the surface stays flat: no waves, no swaying at rest and no splash, only the water going to the brim for half a second after a press. The level arrives along a soft curve, the words change without moving and the button does not come up on arrival.
Pitfalls
- The words in the SVG must be measured once the font has arrived (getComputedTextLength): measured with the fallback font, the arrow would land on the words.
- The springs move with the frame's time: after a tab comes back into view the step would be huge and blow the surface apart, so it is capped at 1/30 of a second and split in four.
- The waves come from the hand's speed, not its position: the first move after coming in has no speed and is skipped, or the water would jump.
- A finger has no hover: without the grace time after a touch the water would rise and fall in the same instant.
- The points are clamped when drawn, between 24 pixels above and 24 below the button: a strong splash would take the surface out of the pill and the clip would cut it flat.
Libraries
GSAP 3.15.0, Funnel Display (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 5.2 KB; the libraries: GSAP 28 KB.
Testing
Tested on 12 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: Done
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.
