The password field
Forms, Text, SVG
NewFree
All components
The seismograph button
In the minimal style: the Notify me of a launch waitlist, a thin ink pill on white. Pressed, the words lift out of the pill and a pen writes a quake inside it like a seismograph: the paper runs under a pen that stays still, a small first wave, the big one slowly dying away, then the line relaxes and fades and the new words land in its place, wide and light first, then narrow and heavy. Pressed again, you leave the list with a small aftershock.
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 seismograph 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 seismograph button: the Notify me of a launch waitlist, a thin ink pill on white. Pressed, the words lift
away and a pen writes a tremor across the pill, the way a seismograph writes a quake: the paper runs under the
pen, a small first wave, the big one, and the slow fade back to a flat line. The line settles and the new words
land in its place, heavier. Pressed again, you leave the list with a small aftershock -->
<div class="quake" data-quake>
<button class="quake__btn" type="button" aria-pressed="false" data-btn data-autoclic>
<svg class="quake__paper" aria-hidden="true" data-paper>
<path class="quake__base" data-base></path>
<path class="quake__trace" data-trace></path>
<path class="quake__pen" data-pen></path>
</svg>
<span class="quake__words">
<span class="quake__word" data-word="rest">Notify me</span>
<span class="quake__word quake__word--done" data-word="done" aria-hidden="true">You’re on the list</span>
</span>
</button>
<p class="quake__note" data-note>Launch day, 12 November</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.
15 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 seismograph button” from Animorio and fit it into my siteWhat it does
On a white background a thin pill, 60 pixels tall, with just an ink outline and the words Notify me inside in Archivo; below, small and grey, the line Launch day, 12 November. Under the pointer the words widen and gain weight on a spring. Pressed, the pill gives a little and springs back; the words narrow and rise out over the edge, and inside the pill a thin grey line is drawn from the left with, towards the right, the pen: a short upright ink stroke. Then the paper runs left under the pen and the vermilion line writes a quake: a small wave, then the big one filling almost the whole height of the pill and slowly dying away, lower and lower. When it is over the whole line relaxes flat and fades, and in its place You’re on the list rises, wide and light at first, then narrowing and turning heavy, landing a pixel too low and coming back up. The line below becomes We’ll write on launch day. Pressed again, the words drop out, the pen writes a small aftershock and Notify me comes back.
How it works
Paper running under a still pen
The pen stays still at 78 per cent of the pill’s width. Every pixel of paper left of the pen passed under it a little while ago: the pen’s position minus x, divided by the paper speed. Its point is therefore the pen’s height at that moment. So the trace is never stored: every frame the script rewrites the SVG path, one point every two pixels, from a single function of time, and the line seems to run left.
The shape of the quake
The height is an envelope times an oscillation. The envelope is a small first wave (half a sine in the first half second) and then the big one, rising quickly and dying away exponentially; the oscillation is two sines of different frequencies, 7.5 and 12.7 times a second, added together so it never looks like a clean wave. QUAKE is the height in pixels of the strongest shake.
The line relaxing
The amp multiplier takes every height to zero at once: on an InOut curve the whole trace sinks onto the flat line like a string calming down, then paper, line and pen fade together.
The words landing
Archivo has width and weight axes. The resting words leave narrowing; the new ones start at width 112 and weight 320, rise from below to a pixel above their place and come back down, while width and weight go to 96 and 620. GSAP moves two small objects and the script writes font-stretch and font-weight at every step.
Accessible
It is a real button with aria-pressed, saying whether you are on the list; an aria-live line announces the new state; the keyboard focus ring shows only when the keyboard is in use. During the shake clicks are ignored, so two quick presses do not pile up. With reduced motion the words swap with a fade, without the trace.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
LABEL | script.js | Notify me | The words at rest. |
DONE | script.js | You’re on the list | The words once you are on the list. |
NOTE | script.js | Launch day, 12 November | The small line under the pill. |
NOTE_DONE | script.js | We’ll write on launch day | The small line once you are on the list. |
SPEED | script.js | 150 | How fast the paper runs under the pen, in pixels a second: higher means wider waves. |
QUAKE | script.js | 24 | The height of the biggest wave, in pixels. |
LENGTH | script.js | 1.6 | The seconds the pen writes the quake. |
SETTLE | script.js | 0.45 | The seconds the line takes to relax flat. |
AFTER | script.js | 4 | The height of the small aftershock when you leave the list. |
When to use it
For a sign up button that should feel like an event: the waitlist of a launch, the alert for a drop, a Notify me on a sold out product.
On phones
The pill narrows to 32 pixels from the edges and the trace is worked out again on the real width. A tap presses the pill like a click; the words widening under the pointer happens only with a mouse.
With reduced motion
No trace, no bounces: the words swap with a fade and the line below changes.
Pitfalls
- Storing the trace point by point and scrolling it is costly and breaks on every resize: working it out from a function of time keeps it right at any width.
- Two quick clicks pile the quake and the aftershock on top of each other: during the timeline clicks are ignored.
- The button has overflow hidden and round corners: the leaving words and the line stay inside the pill.
Libraries
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 4.9 KB; the libraries: GSAP 28 KB.
Testing
Tested on 22 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.
