The trail of pixels

Hover, TextGSAP, CSS onlyMediumCompressed weight: Demo 4.5 KBGSAP 28 KBFreeDownload the zip

A light page with a single word, in the minimal style: where the pointer passes the page turns into a grid of square pixels that switch on in black, with the word in negative inside them, and a moment later switch off by shrinking. The pixel under the pointer is the only one in colour.

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 trail of pixels</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bitcount-prop-single@5.3.0/full.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- warm paper and one word. Where the pointer passes, the page turns into a grid of square pixels that switch on
       in ink, with the word in negative inside them, and switch off by shrinking a moment later. The pixel under the
       pointer is the only one in colour -->
  <main class="palco" data-palco>
    <header class="testa">
      <span class="marchio">Pixmoor</span>
      <span class="nota" data-nota>Move across the page</span>
    </header>

    <p class="parola" aria-hidden="true">Ready?</p>
    <svg class="celle" data-celle aria-hidden="true">
      <path class="celle__pieno" data-pieno d="" />
      <rect class="celle__cursore" data-cursore width="0" height="0" />
    </svg>
    <h1 class="parola parola--sopra" data-sopra>Ready?</h1>
  </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.

16 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 trail of pixels” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On warm white there is only the word Ready? in a large pixel typeface, and the name of a made-up games studio, Pixmoor. As the pointer moves, the page is read through a grid of 25 pixel squares: every move leaves a soft round stamp that fades in seven tenths of a second, and a square switches on, all at once, when the stamps over it add up past a threshold. The lit squares are black and the word reads in white inside them, in negative. As soon as a square is left uncovered it switches off by shrinking to its middle, so the trail evaporates pixel by pixel. The one under the pointer is violet, like a cursor in a game. If nobody moves anything for two seconds, a ghost pointer draws loops by itself.

How it works

The stamps

Every move of the pointer leaves a stamp: a point, a time and a round brush STAMP pixels wide, full in the middle and empty at the rim. A fast move leaves a stamp for every stretch, so the trail is a line and not a row of dots. At most 150 live at once, as on the site; each fades in LIFE seconds.

The grid

On every frame every square adds up the stamps over it, each weighted by distance and by age. If the sum passes THRESHOLD the square is on, all at once: no shading, that is what makes it a pixel.

The drawing

The lit squares become a single SVG path, one square per cell. The same path is the clip-path of a second copy of the word, in the colour of the paper, laid on top: so inside the pixels the word reads in negative. A square switching off shrinks to its middle in SHRINK seconds; one switching on lands POP bigger and settles.

The ghost

If the pointer stays still for two seconds, a ghost pointer runs a Lissajous loop over the word, with the same stamps. At the first real move it steps aside.

Values to change

Name	File	Default	What it changes
`CELL`	script.js	`25`	The side of a pixel, in pixels (down to six tenths on a phone).
`STAMP`	script.js	`125`	The width of the stamp each move leaves.
`LIFE`	script.js	`0.7`	The seconds a stamp takes to fade.
`THRESHOLD`	script.js	`0.2`	How much the stamps must add up to for a pixel to switch on.
`SHRINK`	script.js	`0.2`	The seconds a pixel takes to shrink as it switches off.
`POP`	script.js	`0.08`	How much bigger a pixel lands before it settles.
`CURSOR`	script.js	`true`	The pixel under the pointer in the accent colour.
`GHOST`	script.js	`true`	The ghost pointer when nobody moves.

Try them in the Playground

When to use it

For the first screen of a games studio, an app or an event page: a single word, and a page that answers the pointer like a pixel screen.

On phones

The same: the trail follows the dragging finger, with smaller pixels and stamp; on its own the ghost runs.

With reduced motion

The trail still follows the pointer, but the pixels switch off at once instead of shrinking, they skip the small landing and the ghost does not start.

Pitfalls

With one stamp per event the trail of a fast move is a row of dots: the stamps in between must be added.
Canvas cannot use the axes of a variable typeface: the word stays in the DOM, and the negative is a second copy with clip-path: path(), updated with the same path as the pixels.
The grid must be centred on the page and rebuilt on resize, or the pixels no longer line up with the word.
On a phone the stage needs touch-action: none, or the finger scrolls the page instead of drawing.

Libraries

GSAP 3.15.0, Bitcount Prop Single (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.

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

Testing

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