The ticker in the button

Hover, SVG, TextCSS only, GSAPEasyCompressed weight: Demo 5.6 KBGSAP 28 KBFreeDownload the zip

Blob-shaped buttons: with the pointer on them, the label becomes a ticker of copies of itself running at a tilt, cut by the blob’s shape, while the outline wobbles.

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="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Il nastro nel bottone</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="pagina">
    <p class="nota" data-nota>Passa col mouse sui bottoni: la scritta diventa un nastro che scorre, un po’ storto e tagliato dalla forma della macchia, e la macchia si muove.</p>

    <h1 class="titolo">Ordina una cassa, o vieni a berla da noi.</h1>

    <!-- ogni bottone è una macchia: lo script ne disegna la forma e ci mette dentro il nastro -->
    <div class="bottoni">
      <button class="bottone" type="button" data-bottone="cassa" style="--macchia: #FF6B2C">
        <span class="bottone__scritta">Ordina una cassa<svg class="freccia" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
      </button>
      <button class="bottone" type="button" data-bottone="bar" style="--macchia: #FFE45C">
        <span class="bottone__scritta">Trova un bar<svg class="freccia" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
      </button>
      <button class="bottone" type="button" data-bottone="scrivici" style="--macchia: #8ED3EE">
        <span class="bottone__scritta">Scrivici<svg class="freccia" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
      </button>
    </div>

    <p class="sotto">Consegne in città il martedì e il venerdì; gli altri giorni ci trovi al banco, dalle cinque in poi.</p>
  </main>

  <!-- i ritagli con la forma delle macchie: il nastro si vede solo dentro -->
  <svg class="ritagli" width="0" height="0" aria-hidden="true"><defs data-ritagli></defs></svg>

  <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

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 ticker in the button” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

Three blob-shaped buttons, orange, yellow and sky blue, with a thin outline. With the pointer on one, the label vanishes in a moment and in its place a ticker of copies of the same label, arrow included, runs to the left, tilted by three degrees and cut exactly by the blob’s shape; the starting copy sits right where the label was, so the swap does not show. Meanwhile the blob’s outline wobbles gently, more than at rest, and calms down when the pointer leaves. With a finger the ticker runs while you hold; with the keyboard, while the button has focus.

How it works

The blob

The shape is a superellipse with exponent 2.6, made on the button’s real size: 48 points pushed out or in along the normal, by a few pixels, by four slow waves with frequencies 2, 3, 5 and 7 and random phases, with a fixed seed for every button. The points become a smooth closed curve and are brought back between 0 and 1.

The same path three times

That path goes into the blob underneath and into the outline on top, two SVGs with viewBox 0 0 1 1 stretched over the button, the outline with vector-effect non-scaling-stroke so it stays thin, and into a clipPath with clipPathUnits objectBoundingBox: the ticker’s cut follows the shape whatever the button’s size.

The ticker

Five copies of the label in a row, inside a container rotated by −3 degrees. A CSS animation moves them by one whole copy, forever, in (width of a copy / 70) seconds, so always at 70 pixels per second. It starts at half the button minus one and a half copies, so the second copy is centred where the label was, and it restarts from the beginning every time it lights up.

On and off

A single pointermove listener on the window uses closest() to find which button the pointer is on. When lit, the label goes to opacity 0 in 0.12 seconds, the ticker appears in 0.35 and GSAP’s ticker makes the outline wobble 1.7 times more while the pointer stays; when off, the outline calms down and the ticker stops by itself.

Values to change

Name	File	Default	What it changes
`ONDEGGIA`	script.js	`1.8`	How irregular the outline is at rest, in pixels.
`DI_PIU`	script.js	`1.7`	How many times more it wobbles with the pointer on it.
`CORRE`	script.js	`70`	The ticker’s speed, in pixels per second.
`STORTO`	script.js	`−3`	The ticker’s tilt, in degrees.
`TONDEZZA`	script.js	`2.6`	The base shape: 2 is an oval, the higher it goes the more it becomes a rounded rectangle.

Try them in the Playground

When to use it

For the buttons of a site in a playful mood: a drink, a bar, a festival, a shop of colourful things. It works on any button with a short label.

On phones

The buttons stack in a column; the ticker runs while the finger is pressed and a moment longer, then the label comes back.

With reduced motion

No ticker and no wobbling outline: with the pointer on it, the blob warms slightly in colour and the label stays still.

Pitfalls

A cut made on the button’s box lets the ticker spill out of the blob’s tips: the clipPath must have the same shape, in objectBoundingBox.
With a finger, the browser sends a pointerout as soon as the finger lifts: if it is taken for the pointer leaving the window, the ticker switches off at once. Only the mouse’s one is listened to.
A paused animation resumes where it stopped, and then the copy no longer sits under the label: every time it lights up, it is restarted from the beginning.
On an iPhone, holding a link down opens its preview and the ticker stops: for an action on the page use a real button, plus -webkit-touch-callout: none.

Libraries

GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.

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

Testing

Tested on 28 September 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.