The dot matrix sign button

Buttons, Hover, TextGSAP, CanvasMediumCompressed weight: Demo 5.3 KBGSAP 28 KBFreeDownload the zip

In the minimal style, on black: the Open now of an invented late diner is a dot matrix sign, the words made of small square cells, dark grey when off. Under the pointer the letters light up in amber one column after another, and each cell flares a touch brighter before it settles. Pressed, the button scrolls like a departure board, one column at a time, shows See you and comes back to Open now.

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 dot matrix sign 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 dot matrix sign button: the words are a grid of small square cells, dark when off. Under the pointer the
         cells of the letters light up in amber, column after column, each settling after a tiny overshoot. Pressed,
         the sign scrolls like a departure board, a whole column at a time, shows the second message and comes back -->
    <div class="sign" data-sign>
      <p class="sign__brand">Corvo Diner</p>
      <button class="sign__btn" type="button" data-btn data-autoclic aria-pressed="false">
        <span class="sign__glass" aria-hidden="true"></span>
        <canvas class="sign__cells" data-cells aria-hidden="true"></canvas>
        <span class="sr" data-label>Open now</span>
      </button>
      <p class="sign__note" data-note>Kitchen open till eleven</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 dot matrix sign button” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a black background the small name Corvo Diner, below it a nearly black panel with a one pixel border and a line of reflection along the top, and on the panel a grid of small squares: the ones that make OPEN NOW, in a hand drawn five by seven dot matrix face, are a warm grey, the others nearly black. Below, the line Kitchen open till eleven. Under the pointer the border lightens and the letters light up in amber, one column after another from the left; each cell arrives a little brighter than its colour and settles, and once lit it has a lighter core, like a small square lamp. Pressed, the panel gives and springs back and the words scroll left one whole column at a time, like a departure board: SEE YOU arrives, the line below turns amber and says Thanks for coming by, then the words scroll on and OPEN NOW comes back.

How it works

A five by seven face

Each letter is a string of seven rows of five marks, a hash for a lit cell. The script turns the words into a list of columns of seven values, with one empty column between letters, and centres the two messages on a common width.

A single strip

The columns sit on one strip: Open now, a gap, See you, a gap and Open now again. The scroll is a single number GSAP moves on linearly; the drawing takes its whole part, so the words jump one column at a time like a real board, and at the end it goes back to zero without showing.

The wave of light

The light is a number from 0 to 1 too. Each column reads it later according to its position, and its light follows the back.out curve: it goes past full and comes back, so every cell flares a touch brighter before it settles. Above full the colour moves towards the light amber.

Squares, not dots

The cells are squares with barely rounded corners and no halo: lit, a cell has a lighter core, like a bulb seen up close. Nothing lights up or pulses on its own.

Accessible

It is a real button with aria-pressed and hidden text for screen readers; an aria-live line says See you. While it scrolls clicks are ignored. With reduced motion the words change without scrolling and the lines fade.

Values to change

Name	File	Default	What it changes
`LABEL`	script.js	`OPEN NOW`	The words on the sign at rest.
`DONE`	script.js	`SEE YOU`	The words the sign scrolls to when you press it.
`NOTE`	script.js	`Kitchen open till eleven`	The small line under the sign.
`NOTE_DONE`	script.js	`Thanks for coming by`	The small line while the second words show.
`WAVE`	script.js	`0.016`	The seconds between one column lighting up and the next.
`SPEED`	script.js	`46`	How many columns the sign scrolls in a second.
`HOLD`	script.js	`1.6`	The seconds the second words stay before the sign scrolls back.
`SETTLE`	script.js	`1.7`	How far a cell flares past full before it settles (0 for none).

Try them in the Playground

When to use it

For the button of a place open in the evening, where a lit sign feels at home: a diner, a bar, a cinema, a record shop, a restaurant booking. It also works as an Open or Enter button on a site with the feel of a sign.

On phones

The panel takes 88% of the width and the cells are measured on it, so the words stay whole; a tap scrolls the sign like a click. Lighting up on hover happens only with a mouse: on a phone the letters light up when you tap.

With reduced motion

The letters fade on and off, with no wave and no flare; pressed, the words change without scrolling and the small line fades.

Pitfalls

The scroll must be drawn in whole columns (the whole part of the number), not continuously: scrolling by fractions of a column moves the squares between cells and the sign looks like ordinary text.
The strip must end with the first message: then the last step lands on Open now and the scroll goes back to zero with no visible jump.
Sizes are recomputed with a ResizeObserver on the panel and the pixel density is capped at 2, otherwise after rotating the phone the cells went blurry or the words left the panel.

Libraries

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Testing

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