The liquid glass button
Buttons, WebGL, Hover, Physics
NewFree
All components
The aurora button
The Start your free trial of an app for chasing the northern lights: the pill is a little window on an arctic night, with a ridge of snow, a line of spruces and a real aurora drawn in WebGL. The lower edge of the curtain of light is a string of 32 nodes moved by the wave equation: under the pointer the aurora wakes up, bends towards it and fans its rays out from there, as if the solar wind came from that point. Pressed, the string is struck, a wave of light runs across the pill, the hem turns pink as in a real storm and the trial has started.
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 aurora button</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 Start your free trial button of an app for chasing the northern lights. Inside the pill, dark as an arctic
night over a ridge of snow and a line of spruces, a real aurora drawn in WebGL: curtains of green and violet
light with vertical rays, hanging from a string that moves like a rope. Under the pointer the aurora wakes,
bends towards it and fans its rays out from it, as if the solar wind came from there; pressed, it breaks into
a wave of light that runs across the pill, and the trial has started -->
<div class="aurora" data-aurora>
<div class="aurora__pill" data-pill>
<!-- without WebGL: the same sky in CSS and SVG -->
<div class="aurora__flat" aria-hidden="true">
<div class="aurora__lean" data-flat-lean><div class="aurora__curtain"></div></div>
<div class="aurora__front" data-front></div>
<div class="aurora__front" data-front></div>
<svg class="aurora__land" data-land preserveAspectRatio="none"><path class="aurora__ridge" data-ridge/><path class="aurora__trees" data-trees/></svg>
</div>
<canvas class="aurora__canvas" data-canvas aria-hidden="true"></canvas>
<button class="aurora__btn" type="button" data-btn data-autoclic>
<span class="aurora__face" data-face="rest">
<span class="aurora__words">Start your free trial</span>
<svg class="aurora__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h13M13 6.5l5.5 5.5-5.5 5.5"/></svg>
</span>
<span class="aurora__face" data-face="done" aria-hidden="true">
<svg class="aurora__icon aurora__icon--check" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.6l4.3 4.3L19 7.2" pathLength="1" data-check/></svg>
<span class="aurora__words">Trial started</span>
</span>
</button>
</div>
<p class="aurora__hint" data-rise><span data-hint>14 nights free, then $4.99 a month</span></p>
<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.
21 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 aurora button” from Animorio and fit it into my siteWhat it does
On a black background a pill dark as an arctic sky, with a thin cold edge and the words Start your free trial with an arrow. Inside, at the bottom, a snowy ridge and a line of small black spruces; above them a quiet aurora: a green hem and a curtain of vertical rays that rises and fades into violet. Below, in grey, 14 nights free, then $4.99 a month. Hovering, the aurora wakes up: it lights up round the pointer, its hem rises towards it, the rays lean into a fan as if they started there and slide the way the mouse moves; a fast sweep leaves a wake of ripples running along the curtain. The light spills just past the edge of the pill and lights the snow on the ridge, and the letters widen a little. Pressed, the pill sinks and springs back; where it was pressed the curtain is struck, two fronts of white and green light run out to the two sides, the hem flushes pink and the whole sky flashes. Trial started arrives with a tick that draws itself, and below Tonight: Kp 5, look north after 22:40. After a few seconds Start your free trial comes back, and away from the pointer the aurora slows down and goes still.
How it works
A string with the wave equation
The lower edge of the aurora is a row of 32 nodes that runs a little past both ends of the pill. Each node is pulled towards its place by a spring and towards its neighbours by the tension of the string (the second difference, the wave equation in small), with a little friction; the steps are 1/240 of a second, so even a high tension stays stable. The tension comes from the wanted speed: WAVE is how many half heights of the pill a ripple travels in a second. On the last four nodes at each end the friction grows: the wave leaves the pill instead of bouncing back.
The spline that makes it smooth
Every frame the heights of the nodes and the light they carry go to the shader as two uniform arrays. The shader reads them with a cubic B-spline: for each pixel it adds up the four nearest nodes with their weights (in a loop with a constant index, the only kind WebGL 1 allows), and with the derivative of the weights it also has the slope of the string. Where the curtain folds it is seen edge on, and there it is brighter.
The curtain and the rays
Above the hem the shader hangs the curtain: a narrow bright green hem, a body that fades upwards and turns violet, a glow below. The rays are one dimensional noise read along the curtain, two octaves, and each ray has its own height from a third noise: the picket fence of real aurorae. Behind it there is a second curtain, further and fainter; in front, the snowy ridge catching the green on its crest and the spruces in three tiers, made of cells and random numbers, all in the same shader.
The wind that comes from the pointer
The pointer, in half heights of the pill and smoothed, does three things. It lifts the hem near itself with a bell shaped weight (WIND). It leans each ray to point at it, a push that grows with the distance and has a limit: this is the corona, the rays meeting overhead when you look up along the magnetic field (FAN). And with its speed it pushes the string and slides the rays its way.
The strike and the wave of light
Pressed, the nodes near the point get a push downwards and a load of light: the wave equation carries it to both sides by itself. Meanwhile GSAP runs two fronts of light through the shader at the same speed, lifts the rays as they pass, fires the flash of the sky and turns the hem pink, like the lower border of real aurorae during a storm. The words change as the fronts leave, and the tick draws itself with stroke-dashoffset.
It stops when it is still
The aurora's time only runs while it is awake: away from the pointer it slows down to zero and the string settles. Every frame the script compares the animated values and how far the nodes moved: if nothing changed it neither computes nor draws. The library's preview runs a whole round on a click from the script: a pretend hand passes over the pill, presses, the wave runs, Trial started, and back to rest.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
WIND | script.js | 0.6 | How strongly the curtain bends towards the pointer, as if the solar wind came from there. |
FAN | script.js | 0.6 | How much the rays fan out from the pointer, like the corona seen straight overhead. |
DRIFT | script.js | 0.5 | How fast the aurora shimmers while it is awake. |
RAYS | script.js | 3.4 | How close the rays stand: more is a finer curtain. |
WAVE | script.js | 6.5 | How fast a ripple runs along the curtain, in half heights of the pill per second. |
BURST | script.js | 1 | How strong the wave of light is when the button is pressed. |
GLOW | script.js | 0.55 | How much light spills out round the pill. |
DONE | script.js | 3.4 | The seconds it says Trial started before it rests by itself. |
When to use it
For the action that matters in an app or a site about the sky, the night and trips up north: an astronomy or aurora forecast app, a tour in Lapland or Iceland, a glass cabin, a subscription to a night photography service. A single button, on a calm dark background; the colours of the sky, the aurora and the land change from the CSS variables.
On phones
The pill keeps its size and at 390 pixels nothing spills over; the canvas is drawn at twice the resolution at most. The finger is the pointer: as soon as it touches, the aurora wakes up under the touched point and, while it stays down, dragging it the curtain follows and the rays slide with it; lifting it fires the strike and the wave of light, as on a computer.
With reduced motion
The aurora is still: it does not sway, does not follow the pointer and its rays neither slide nor lean. On hover and on a press only the light changes, with a fade: the curtain lights up and dims, the sky flashes softly, the hem turns pink. The words change with a fade and the tick appears already drawn.
Pitfalls
- The glint on the snow was first worked out with an exponential that grew above the ridge: the tips of the spruces lit up green like birthday candles. The exponential must stay below zero, downwards only.
- With no limit on how far the rays lean, far from the pointer they turned almost flat and the curtain looked like slanting rain: the lean is capped at 0.9.
- The gloss of the glass, a light band along the top of the pill, was too wide and showed as a grey stripe over the sky: it became a thin veil, narrowed at the sides.
- With no friction at the ends, the wave of the strike bounced off both sides and came back under the words: the last four nodes at each end soak it up.
- As the words changed, the new ones came in while the old ones were still leaving, and for a moment they were on top of each other: the new words wait until the old ones are gone, with reduced motion too.
- In the version without WebGL a regular comb of rays in CSS looked like a barcode: the rays are an uneven comb and the light is made of several patches.
Libraries
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 13 KB; the libraries: GSAP 28 KB.
Testing
Tested on 17 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.
