The button that rebuilds itself

Buttons, Text, Physics, SVGGSAPAdvancedCompressed weight: Demo 15 KBGSAP 28 KBFreeDownload the zip

The Rebuild button of a deploy tool, written in a typeface of strokes of our own: every letter is a stem, an arc, a ring, drawn in SVG at every frame. At a click the word comes apart into its strokes, which fall into a heap at the bottom of the pill, roll and come to rest; then they fly back up one at a time, bending into their new shape in flight, until the word says Rebuilt and the tick lands last.

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 button that rebuilds itself</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the button that rebuilds itself: the Rebuild button of a deploy tool. Its words are not a font file: every
         letter is a few strokes, straight or round, drawn as SVG paths. A click breaks the word into its strokes, they
         fall into a heap at the bottom of the pill, and then fly back up one by one, bending on the way, to spell the
         new words -->
    <div class="kit" data-kit>
      <button class="kit__btn" type="button" data-btn data-autoclic>
        <svg class="kit__art" aria-hidden="true" data-art>
          <g class="kit__guides" data-guides></g>
          <g class="kit__pieces" data-pieces></g>
        </svg>
        <span class="sr" data-name>Rebuild</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.

26 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 button that rebuilds itself” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a white background a blueprint blue pill 60 pixels tall, with the reload arrow and Rebuild in paper coloured strokes, a round-ended geometric sans. It is not a font file: every letter is made of a few strokes, straight or curved, the way a type designer builds them on a grid (the b is a stem and a ring, the e a bar and most of a circle, the R a stem, two bars, an arc and a leg). When the pointer comes in, a wave of jolts runs through the word from the side it came in: every stroke twists a little and goes back with a shiver, like a loose part, and the guide lines of the type come in (baseline, x-height, cap height), drawn from the middle outwards; brushing over them, the strokes nearby rattle. At a click the word comes apart from left to right: every stroke jumps off, thrown away from the point clicked, and falls to the bottom of the pill, where it bounces, slides, piles on the others; the rings roll. Loose, the strokes dim to a greyish blue. Then the rebuild starts: the strokes leave the heap one at a time, in the order of the letters, and fly in an arc to their place, taking back the paper colour; on the way they stretch, shrink and bend into the shape of the place waiting for them (a straight stroke can curl into the hook of the t, a ring open into an arc), until the word says Rebuilt and the two strokes of the tick land last, in mint green. The word settles with a small elastic squash. After a moment, or at a click, only the strokes that change go back: the hook of the t closes into the ring of the d, the tick bends into the arrow, and the button says Rebuild again. On a phone a tap sends the same wave of jolts and rebuilds.

How it works

A typeface made of strokes

Every letter is a list of strokes on a grid where the small letters are 10 high and the capitals 14: ln(x1, y1, x2, y2) is a straight stroke, arc(cx, cy, r, from, to) an arc of a circle in degrees, dot(x, y) a dot. All the letters, the figures and the common punctuation are there, so REST and DONE can say anything. The spacing comes from the shape of the sides: straight, round, open, diagonal, or reaching over the neighbour like the arm of the f and the hook of the j. The stroke has round ends, so a stroke of no length is the dot of the i.

Four numbers for every stroke

Every stroke is drawn at every frame from four numbers: where its middle is, which way it points there, how long it is and how much it bends (one over the radius). A bar is a stroke that does not bend, a ring one that bends all the way round; so any stroke can become any other by interpolating the four numbers. The SVG path is a line, or arcs of a quarter turn at most, because an SVG arc cannot make a whole circle.

The heap

At a click every stroke becomes a rigid body made of a row of beads, a little closer together than they are wide, so nothing slips between them. Verlet moves the beads in steps of 1/240 of a second; then, three times: the beads of different strokes push each other away, those that left the pill come back in (the pill is a stadium: two half circles and a strip), and every stroke takes back its shape, turned and moved to sit as close as it can to its beads (shape matching, Müller and others, 2005). Bounce BOUNCE and grip GRIP are worked out on the beads that touched the bottom, with the speed they had before the hit: that is why the rings roll and the bars slide. When the heap is still the physics switches off.

Who goes where

For the new words every place needs a stroke. The cost of a move is the way to go, plus how much the stroke must stretch and bend, plus a fixed price for moving at all; the Hungarian algorithm (Kuhn and Munkres) finds the split with the lowest total cost. So every stroke goes to the nearest place with the most similar shape, and on the way back only the strokes that change move. If the words have more or fewer strokes, the ones left over shrink to nothing and the missing ones grow from a dot.

The flight

The strokes leave the heap one at a time, over BUILD seconds in all, in the order of the letters and with the icon last. Every flight takes FLIGHT seconds: the middle runs on a Bézier curve that rises by LIFT pixels, with a back.out that goes a hair past and comes back; the shape changes halfway with a power2.inOut. The stroke turns the short way round, knowing that a stroke turned half a turn and bent the other way is the same stroke. In the heap the strokes dim to the --loose colour and take back their own colour in flight, so the word lights up as it comes together.

The jolts and the guide lines

Coming in, the pointer sends a wave of jolts from where it arrives: every stroke gets a twist and a hop up, and a stiff, lightly damped spring (900 stiffness, 15 damping) brings it back with a shiver. Brushing over them, every stroke nearby gets a twist: the cross product of where it is from the pointer and where the pointer is going, plus a twist of its own. Meanwhile the three guide lines draw themselves from the middle outwards by animating their ends. On a phone a tap sends the wave, and a mouse press sends a smaller one.

Values to change

Name	File	Default	What it changes
`REST`	script.js	`Rebuild`	The words at rest.
`BUSY`	script.js	`Rebuilding`	What a screen reader user hears while the strokes fly.
`DONE`	script.js	`Rebuilt`	The words once the rebuild is done.
`SIZE`	script.js	`11`	The height of the small letters, in pixels (the capitals are 1.4 times as tall).
`WEIGHT`	script.js	`2.3`	The thickness of the strokes, in pixels.
`TRACKING`	script.js	`0`	Extra room between the letters, in pixels.
`KICK`	script.js	`1`	How hard the strokes are thrown when the word comes apart: 0, they just drop.
`GRAVITY`	script.js	`2400`	The pull on the falling strokes, in pixels per second squared.
`BOUNCE`	script.js	`0.3`	How much the strokes bounce off the bottom: 0 not at all, 1 like rubber.
`GRIP`	script.js	`0.3`	How much the bottom holds the strokes back: with more grip the rings roll, with less the bars slide.
`BUILD`	script.js	`1.4`	The seconds of the rebuild, from the first stroke leaving the heap to the last one in place.
`FLIGHT`	script.js	`0.5`	The seconds of one stroke's flight from the heap to its place.
`LIFT`	script.js	`9`	How high the flights arc, in pixels.
`RATTLE`	script.js	`1`	How much the strokes rattle under the pointer and when it comes in: 0 not at all.
`BACK`	script.js	`2.6`	The seconds the button says Rebuilt before it says Rebuild again.

Try them in the Playground

When to use it

For the action that redoes something from scratch in a tool for people who work with code or content: rebuilding a site, regenerating an index, recompiling, republishing, redoing a preview. The typeface has all the letters and figures, so the same idea works for Redeploy, Regenerate, Sync now or Publish. It belongs where building is the subject: developer tools, type studios, architecture sites. It is a button to show off, one to a page.

On phones

The pill is 60 pixels tall like the other buttons and as wide as the longest words; on a narrow screen the type gets smaller, and the strokes thinner with it. A tap sends the wave of jolts from where the finger touched, and the click breaks the word throwing the strokes away from that point.

With reduced motion

No falling, no flying and no jolts. At a click the old words fade away and the new ones appear one stroke at a time in a fade, in the same order and over the same time as the rebuild, so the work is still seen to progress; the way back is a crossfade. The guide lines fade in already at full length, and the pill pressed darkens a little instead of shrinking.

Pitfalls

The first idea for the hover pushed the strokes away from the middle of their letter under the pointer: the stem of the b came off its ring and the word read «Relouild». Now the strokes twist and come back with a shiver, staying joined, and the guide lines and the rattle tell that they are pieces.
The first spring of the rattle (420 stiffness, 22 damping) moved the strokes by a pixel, slowly: it looked like a drift, not a loose part. With 900 and 15 and a wave of jolts on entry the shiver shows.
A pointer moving across at the same height as the strokes gave no twist (the cross product vanishes): every stroke also has a twist of its own, proportional to the speed.
The bounce must be worked out with the speed before the hit: once the bead is put back inside the pill its speed against the bottom is already gone, and nothing bounced.
A click during the entrance or the way back was lost, and the catalogue's preview, when it records, clicks after 0.4 seconds: now a click stops the strokes where they are and the word comes apart from there.
On the way back the crossbar of the t flies all the way to the arrow and went by at the height of the letters, covering them for a moment: long flights now rise above the ascenders, but never out of the pill.
The guide lines grown with an SVG scale showed for a frame outside the pill: now their ends x1 and x2 are animated.
The arm of the f and the hook of the j widen the letter's box and left gaps in the word: their sides have a negative spacing that reaches over the neighbour.
The first reload arrow, small and with an L-shaped head, looked like a C: now it is a 300 degree arc with a two-winged head, as tall as a capital.

Libraries

GSAP 3.15.0.

Compressed with gzip, the three demo files weigh 15 KB; the libraries: GSAP 28 KB.

Testing

Tested on 12 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.