The inchworm menu
Menus, Hover, Transitions
NewFree
All components
The plasma button
The Connect button of an app, on a black background: a pill of dark glass with a small electrode glowing in its chamber. As the pointer comes near, bolts of violet and blue plasma leave the electrode and reach for it, forking and flickering; over the button they hold on to it. Pressed, all the bolts melt into a single arc that fills the pill, a flash, and the label becomes Connected with a plug. On a phone the bolts follow the finger.
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 plasma button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/sora@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the plasma button: a pill of dark glass with a glowing electrode in it. Near the pointer, bolts of violet and
blue plasma leave the electrode and reach for it; pressed, they melt into one arc and the account is
connected. The bolts are drawn on the canvas, under the button and the words -->
<div class="plasma" data-plasma>
<canvas class="plasma__arcs" aria-hidden="true" data-arcs></canvas>
<button class="plug" type="button" aria-label="Connect your workspace" aria-describedby="plasma-note" data-plug data-autoclic>
<span class="plug__glass" aria-hidden="true"></span>
<span class="plug__slot" aria-hidden="true" data-slot>
<svg class="plug__icon" viewBox="0 0 24 24" data-icon><path d="M9 3.5v4.5M15 3.5v4.5M6.5 8h11v3.2a5.5 5.5 0 0 1-11 0zM12 16.7v3.8"/></svg>
</span>
<span class="plug__words" aria-hidden="true"><span class="plug__word" data-word>Connect</span></span>
<span class="plug__flash" aria-hidden="true" data-flash></span>
</button>
<p class="plasma__note" id="plasma-note" data-note>Link your workspace to sync files and calendars</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.
17 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 plasma button” from Animorio and fit it into my siteWhat it does
On a black background a pill of dark glass, with a reflection along its top edge and a violet haze underneath; on the left, in a small sunken chamber, an electrode: an upright white and blue filament in a violet mist. Next to it the label Connect and below it the grey line Link your workspace to sync files and calendars. At rest a couple of thin threads of plasma crawl slowly from the electrode into the glass. Bringing the mouse near, the bolts start: first one, stretching towards the pointer without reaching it, then more, brighter, that reach it, fork and flicker, drawn anew every frame; the rim of the glass lights up on the pointer's side. Over the button the bolts hold on to the pointer and grow thicker. Pressed, the label becomes Connecting and the bolts all bend towards the far end of the pill, straighten and melt into a single thick arc that fills it; then a white flash inside the glass, the electrode goes out and in its place a blue plug lights up, with the blue label Connected and the line Syncing files and calendars. With the mouse over it the label says Disconnect; pressing again the electrode comes back on and Connect returns. On a phone the bolts follow the finger while it touches, and a tap on the button connects.
How it works
A bolt, by halving
Every bolt is born from the straight line between the electrode and the pointer. Midpoint displacement cuts it in half again and again (until the pieces are about five pixels long) and pushes every new point sideways at random, by at most JAGGED times the length of the piece it splits: so the bolt is crooked at every scale, like a real one. FORKS branches leave it at random points, turned by 20 to 55 degrees, shorter and dimmer.
Made anew every frame
The bolts are not animated: they are thrown away and made again every frame, with a little random brightness (FLICKER), and that is where the flicker comes from. How many there are and how far they reach depends on the pointer's distance from the electrode: beyond REACH none, halfway one bolt that falls short, close by BOLTS bolts touching it, over the button one more and with its tip fixed on the pointer.
Three passes of light
Each bolt is drawn several times on a canvas with additive 'lighter' compositing, so where bolts cross the light adds up: a wide violet and a blue glow on a canvas a quarter of the size, then stretched over the whole (a blur that costs nothing), a coloured body two to four pixels wide and a white core one pixel wide. When there are many bolts each one's glow is shared out, so together they do not turn into a white blob.
The glass under, the words over
The button makes no layer of its own: the glass lies under the canvas of the bolts and the words over it, with a dark shadow that keeps them readable even on a bolt. That is why, pressed, the whole button does not shrink (that would lift it above the bolts), only the glass. The rim of the glass is a masked radial gradient whose centre follows the pointer through two CSS variables.
The fusion and the flash
Pressed, a tween takes a variable from 0 to 1 in CONNECT seconds: the bolts become fewer, their tip goes from the pointer to the far end of the pill, their crookedness shrinks and their width grows, until a single arc is left. At the end a white flash inside the glass and one on the canvas, and the SVG plug takes the electrode's place. Far from the button and with no plasma the canvas is not redrawn; the slow threads at rest change shape only nine times a second.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
REACH | script.js | 420 | How far from the electrode the bolts can reach, in pixels. |
BOLTS | script.js | 4 | How many bolts reach for a pointer that is close. |
JAGGED | script.js | 0.32 | How crooked the bolts are (0 = straight lines). |
FORKS | script.js | 2 | How many branches each bolt throws off. |
FLICKER | script.js | 0.35 | How much the bolts flicker in brightness. |
IDLE | script.js | 2 | The slow threads inside the glass at rest (0 = none, completely still). |
CONNECT | script.js | 0.9 | The seconds from the press to Connected. |
When to use it
For the moment something gets connected: an account, an integration, a device, a wallet, a data source. It works on a dark background, on an onboarding page or in the integrations panel, where the act of connecting deserves a bit of a show.
On phones
The pill narrows a little (80 pixels tall) and the field of the bolts takes the whole width. With no mouse the bolts follow the finger while it touches the field round the button (there the page does not scroll with the finger); a tap on the button connects and disconnects.
With reduced motion
No bolts and no threads: the electrode stays lit and still, and with the pointer near only it and the rim of the glass grow brighter. Pressed, a soft flash fades and the label becomes Connected with the plug, with no movement.
Pitfalls
- With the canvas under the whole button, the dark glass covered the bolts and they looked dead: the button makes no layer of its own, the glass lies under the canvas and the words over it.
- A transform: scale on the pressed button creates a new layer and lifts it over the canvas, and for an instant the bolts vanished under the glass: pressed, only the glass shrinks.
- Five bolts close together added with 'lighter' became a white blob behind the label: each one's glow is divided by the square root of how many there are.
- The flash over the label covered it: it lies under the label, which also has a dark shadow to stay readable over a bolt.
- Connected, the faded electrode was still drawn on the canvas and cut the plug in half: once connected it is no longer drawn.
- On a phone pointermove only arrives with the finger down: the field round the button has touch-action none, and the bolts follow the finger between pointerdown and pointerup.
Libraries
GSAP 3.15.0, Sora (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 8.7 KB; the libraries: GSAP 28 KB.
Testing
Tested on 5 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.
