The layered button
Buttons, Hover, Physics
Free
All components
The field lines button
In the minimal style, on black: a speaker’s Connect, a hairline pill with a magnetic pole at each end. The very thin field lines run from one pole to the other, through the pill and around it, with a thread of light travelling along them. The pointer is a third pole that bends the nearby lines and lights them vermilion. Pressed, the poles swap with a bounce: the lines fade, pass through zero and open again from the other end, and Connected lands.
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 field lines button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the field lines button: a hairline pill on black with a magnetic pole at each end. The thin field lines run
from one pole to the other, through the pill and around it. The pointer is a third pole that bends the lines
near it; pressed, the poles swap with a bounce and the lines open again from the other side -->
<div class="field" data-field>
<canvas class="field__lines" data-canvas aria-hidden="true"></canvas>
<button class="field__btn" type="button" data-btn data-autoclic aria-pressed="false">
<span class="field__words">
<span class="field__word" data-word="rest">Connect</span>
<span class="field__word" data-word="done" aria-hidden="true">Connected</span>
</span>
</button>
<p class="field__note" data-note>Desk speaker · nearby</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.
18 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 field lines button” from Animorio and fit it into my siteWhat it does
On a black background, in the middle, a pill 52 pixels tall with a thin dark grey outline and Connect inside in Archivo; below, small, the line Desk speaker · nearby. At the two round ends of the pill sit two magnetic poles, marked with a thin cross and a thin dash: from the positive one twenty-two field lines run to the other, straight through the pill and arching around it, thicker near the poles and very thin far away, fading out towards the edges of the box. A thread of light travels slowly along each line. The pointer is a third pole on a spring: the nearby lines bend towards it, some reach it and light up vermilion; over the pill the outline brightens and the word widens on the wdth axis with a bounce. Pressed, the pill gives and springs back; the two poles swap: the charge passes through zero, the lines fade, open again from the other end and the charge overshoots a little before settling, while a vermilion flash runs along the lines. Connect leaves upwards, Connected comes in from below and the line says paired. Pressed again, it goes back. When nobody moves the pointer, a fake pointer drifts slowly around the pill.
How it works
The field of three charges
The field at a point is the sum of three contributions, one per charge: the charge times the offset divided by the squared distance, plus 24 so the number doesn’t blow up near a pole. The charges are the two poles, at the ends of the pill, with s and minus s, and the pointer.
Following a line
Each line starts on a 5 pixel circle around the positive pole and follows the field’s direction in small steps, with the midpoint method, until it reaches a negative pole or leaves the box. The step is a fifth of the distance to the nearest pole, between 1.6 and 6 pixels: dense near the poles, wide far away. Everything is worked out again every frame.
Thickness and light
Each segment goes into one of four thicknesses by its distance from the poles, and each thickness is a single Path2D: four strokes in all, not thousands. The thread of light is 5 pixel dashes every 70, moving along the line’s length with time.
Swapping the poles
Pressing takes s from 1 to minus 1 with elastic.out: the charge passes through zero, where the lines fade, and overshoots a little before settling. Lines always start from whichever pole is positive at that moment, so they open again from the other side by themselves.
Accessible
It is a real button with aria-pressed, and an aria-live line announces Connected. The field is a drawing: it has aria-hidden and takes no pointer events.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
LABEL | script.js | Connect | The words at rest. |
DONE | script.js | Connected | The words once pressed. |
NOTE | script.js | Desk speaker · nearby | The small line under the pill. |
NOTE_DONE | script.js | Desk speaker · paired | The small line once pressed. |
LINEE | script.js | 22 | How many lines leave the positive pole. |
FORZA | script.js | 0.55 | How hard the pointer’s pole pulls. |
FLUSSO | script.js | 30 | The speed of the light along the lines, in pixels per second. |
SCAMBIO | script.js | 1.1 | How long the poles take to swap, in seconds. |
When to use it
For a button that links two things: pairing a speaker or headphones, connecting an account or a device, switching on a sensor, joining a session. It suits the app of a connected object or the page of a tech product.
On phones
The field box is sized on both the width and the height of the screen and the pill narrows to 52% of the width; the poles are worked out again on the real pill. The finger bends the lines as it moves over the field, and a tap swaps the poles like a click; the word widens only with a mouse.
With reduced motion
The field is drawn still, with no thread of light and no pointer pole; pressed, the poles swap in one go and the words cross-fade.
Pitfalls
- The lines must be drawn in a few paths: a stroke per segment is thousands of strokes a frame and the phone slows down. Here each thickness is one Path2D and the accent has three.
- When the charge passes through zero the field is almost only the pointer’s and the lines go wild: that is why their opacity follows the charge’s strength and they fade exactly there.
- The poles sit at the centre of the round ends, that is half the width minus half the height of the pill: they are worked out again on resize, because on the phone the pill is narrower.
- A radial mask on the canvas removes the box’s edge: without it, the lines that leave end in a straight cut.
Libraries
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 6.5 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.
