The AI generate button

Buttons, WebGL, SVG, Hover, TextGSAP, WebGLAdvancedCompressed weight: Demo 9.9 KBGSAP 28 KBFreeDownload the zip

The Generate button of an AI tool: a dark pill with a four pointed spark. Over it an aurora of violet, cyan and amber lights up inside the pill, a WebGL shader of noise folded into itself that drifts slowly and follows the pointer. Pressed, the aurora swells and runs, the spark is reshaped point by point into a spinning ring, the words think and then arrive in pieces like a model's tokens, and it ends on Done with the spark back.

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.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The AI generate button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/onest@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the Generate button of an AI tool: a dark pill with a spark. Over it an aurora lights up inside the pill, a
         WebGL shader of warped noise that follows the pointer; pressed, the spark becomes a spinning ring, the words
         think and then stream in token by token, and the spark comes back when it is done -->
    <div class="spark" data-spark>
      <div class="spark__pill" data-pill>
        <span class="spark__base" aria-hidden="true"></span>
        <canvas class="spark__aurora" data-canvas aria-hidden="true"></canvas>
        <button class="spark__btn" type="button" data-btn data-autoclic>
          <svg class="spark__icon" viewBox="0 0 24 24" aria-hidden="true">
            <path class="spark__glyph" pathLength="100" data-glyph/>
            <path class="spark__mini" d="M19.5 1.6c.25 1.7.7 2.15 2.4 2.4-1.7.25-2.15.7-2.4 2.4-.25-1.7-.7-2.15-2.4-2.4 1.7-.25 2.15-.7 2.4-2.4z" data-mini/>
          </svg>
          <span class="spark__words" aria-hidden="true" data-words>Generate</span>
          <span class="sr" data-name>Generate</span>
        </button>
      </div>
      <p class="spark__hint" data-rise><span data-hint>Uses 1 credit · 48 left</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

Open the Playground

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 AI generate button” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a black background a dark pill with a thin edge, a white four pointed spark with a little star beside it and the word Generate; below, in grey, Uses 1 credit · 48 left. Hovering, an aurora lights up inside the pill: ribbons of violet, cyan and amber that bend and curl over a dark sky, never the same, with a soft glow just spilling past the edge; it drifts slowly towards the pointer and lights up round it, and the words turn full white. Pressed, the pill sinks a little and springs back; the aurora grows, brightens and runs fast. The spark opens into a spinning ring, the little star vanishes, and the word becomes Thinking with a light running across it; below, Reading your brief. Then Generating arrives in pieces, Gen, er, ating, each one coming into focus, while the pill widens to hold it, and below Writing three drafts. At the end the ring slows down and closes back into the spark, which comes back with a little hop together with the little star, the word is Done, the aurora flares once and calms down, and below it says Three drafts ready · 47 credits left. After a couple of seconds Generate comes back and the aurora goes out.

How it works

Noise folded twice

The shader adds up three octaves of value noise, each turned a little (fbm). Then it reads it at a point moved by two other fbm, and that point by two more: this is domain warping, fbm inside fbm, which makes the ribbons that curl like smoke. WARP says how folded it is; time enters each of the readings at different speeds, so the drawing never repeats.

Three colours in ribbons

The colour runs round a ring of violet, cyan, violet, amber, read along the folded noise: violet is the bridge, so cyan and amber never mix into a green mud. The light comes from the final noise: it is strongest where the noise crosses its middle, in ridges like the curtains of a real aurora, over a dark sky that keeps a little of their colour. The three colours and the sky come from the CSS variables.

The pill's mask

The shader works out each pixel's distance from the edge of the pill, which gets its real width and height every frame (even while the pill widens). Inside there is the aurora, darker towards the edge as behind a thick glass and calmer behind the words so they always read; outside a glow that fades over nine pixels, with a colour that turns slowly round the pill, stronger on the pointer's side.

The pointer and the timing

The pointer, measured in half widths of the pill and smoothed, shifts the noise by FOLLOW and lights a lobe of light round itself. The shader's time is a phase that moves at DRIFT at rest and at RUSH while generating: changing the speed makes no jump. When the aurora is off nothing is drawn.

The spark that becomes a ring

The spark and the ring are two outlines of 64 points, from the top clockwise: the spark is a superellipse with a power of 2.7, which pulls in the sides between the four tips. GSAP moves a number from 0 to 1 and the script mixes the points one by one, with no paid plugin; the fill fades while a stroke with a gap (stroke-dasharray) grows and spins. On the way back the ring slows down onto a multiple of 90 degrees, so the tips come back straight.

Thinks, writes, done

Thinking has a light running across it (a gradient clipped to the text, slid by GSAP). Generating arrives in three tokens at uneven moments, each from blurred to sharp, and the pill widens with each token without ever shrinking halfway. Done brings the spark back with a hop; the line below tells each step and counts the credits.

Values to change

Name	File	Default	What it changes
`DRIFT`	script.js	`0.22`	How fast the aurora drifts at rest under the pointer.
`RUSH`	script.js	`1.5`	How fast it runs while the button is generating.
`WARP`	script.js	`3.2`	How much the noise is folded into itself: higher is more liquid and tangled.
`FOLLOW`	script.js	`0.45`	How far the aurora leans towards the pointer.
`GLOW`	script.js	`0.5`	How much of the aurora spills out round the pill.
`THINK`	script.js	`1.4`	The seconds it says Thinking.
`STREAM`	script.js	`1.9`	The seconds it takes to generate, once the words have streamed in.
`DONE`	script.js	`2.2`	The seconds it says Done before it rests.

Try them in the Playground

When to use it

For the action that generates in an AI tool: write a text, make an image, summarise, translate, suggest some code. It works on a dark background, in a toolbar or under a text field; the busy state is made for waits of a few seconds, and the words of the three phases change in the script.

On phones

The pill keeps its size and nothing spills over; the shader's canvas is drawn at one and a half times the resolution at most, to stay light. The finger has no hover: as soon as it touches, the aurora lights up under the touched point, and the generation starts when it lifts.

With reduced motion

The aurora is still: it fades on and off but does not drift or follow the pointer. The spark turns into a still ring with its gap, without spinning; the words and the tokens fade in, with no blur or movement, and the pill does not bounce.

Pitfalls

Sums of noise sit almost always close to one half: with thresholds set by eye one of the three colours never showed. The values must be stretched round the middle before picking colours with them.
Going straight from cyan to amber, the colour passed through a muddy green: on the colour ring violet sits between the two.
A glow made of the aurora's colour at the nearest point of the edge turned into a fan of streaks, too much like the rays of another button: the glow has a soft colour of its own that turns round the pill.
With four octaves the aurora looked like smoke and the fine detail was noise behind the words: three octaves, a larger scale and a calmer area behind the text.
Between Thinking and Generating the pill narrowed at the first token and widened again with the others: while the tokens arrive the width can only grow.
Halfway back, the shape between ring and spark, grey and half filled, looked like a little square: the fill comes back only at the end and the stroke stays until the shape is almost a spark.

Libraries

GSAP 3.15.0, Onest (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 9.9 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.