The mark the pointer wipes away

Hover, IntroCanvas, GSAPMediumCompressed weight: Demo 4.9 KBGSAP 28 KBFreeDownload the zip

The threshold of a sound studio, in the minimal style: a large mark drawn in a single line on a dark ground. Where the pointer passes the line wears away like chalk under a thumb and a contour map in blue shows through; the trail is grainy, strong when you move fast, and fades by itself.

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 mark the pointer wipes away</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>
  <!-- the threshold of a made-up sound studio. On a dark ground a large mark drawn in one thin line; where the pointer
       passes, the line wears away and a map in blue shows through, then the trail fades and the mark closes again -->
  <main class="soglia" data-soglia>
    <canvas class="tela" data-tela aria-hidden="true"></canvas>
    <div class="nome">
      <h1 class="nome__marchio">Halde</h1>
      <p class="nome__sotto">sound</p>
    </div>
    <p class="aiuto">Move across the mark</p>
  </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 mark the pointer wipes away” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The home page of Halde, a made-up sound studio. The ground is almost black; in the middle the mark draws itself, stroke after stroke, in a thin pale line: a ring open at the lower right, a peak, a wave beneath. Then the name appears, HALDE, wide and light, and the word SOUND. Moving the pointer over the mark, the line wears away where it passes, like chalk under a thumb, and a contour map in blue that could not be seen before shows through. The trail has grainy edges: it is strong while the pointer runs and weak when it slows down, and it fades by itself in a few tenths of a second, so the mark closes again behind you. If nobody touches anything, a ghost pointer wanders over the mark in a slow figure of eight.

How it works

Three canvases

The mark is drawn once in a hidden canvas, the blue map in another; a third, small canvas, a quarter of the screen, holds the trail. Every frame the trail is added to itself STRENGTH times (with lighter, which stops at full), so even a faint trail counts; then the script composes: first the map, kept only where the trail is (destination-in), then the line of the mark, taken away where the trail is (destination-out, twice, so the line goes before the map is full). So the trail does two things at once: it erases the sign and uncovers what lies beneath.

The trail that fades

Every frame the trail canvas loses part of itself: a rectangle with destination-out and an opacity of 1 minus PERSIST to the power of the time passed in tenths of a second, so after a tenth PERSIST of the trail is left, whatever the screen’s frame rate. Then the brush is stamped along the way travelled since the last frame, close enough to leave no gaps. The brush is a soft circle with noise on its opacity, which gives the grainy edges.

Strong when you run

The tip of the brush chases the pointer with FOLLOW, so it lags a little and the trail rounds off. The tip’s speed, in screens per second, divided by SPEED_FULL, says how strong the trail should be; the real strength catches up quickly when it rises (FADE_IN) and slowly when it falls (FADE_OUT). So a fast gesture leaves a full furrow and a slow one barely a veil.

The mark draws itself

The three strokes are an arc and two paths in a 200 by 200 box, scaled to 78 per cent of the screen’s short side. At the start GSAP takes a number from 0 to 1 in DRAW_IN seconds and each stroke is drawn with setLineDash, a little after the one before; the name comes in letter by letter. The map is made of closed wavy lines round three hills, drawn only once.

Values to change

Name	File	Default	What it changes
`PERSIST`	script.js	`0.92`	How much of the trail is left after a tenth of a second.
`SIZE`	script.js	`0.1`	How big the brush is, as a share of the screen height.
`FOLLOW`	script.js	`7.5`	How quickly the brush follows the pointer.
`SPEED_FULL`	script.js	`0.3`	The speed, in screens per second, at which the trail is at its strongest.
`FADE_IN`	script.js	`12`	How quickly the trail grows when the pointer speeds up.
`FADE_OUT`	script.js	`3`	How quickly it fades when the pointer slows down.
`STRENGTH`	script.js	`4`	How hard the trail erases the line.
`DRAW_IN`	script.js	`2.2`	The seconds the mark takes to draw itself.
`GHOST`	script.js	`true`	When nobody moves the pointer, a ghost one wanders over the mark.

Try them in the Playground

When to use it

For the home page of a sound studio, a record label, a landscape architecture studio or an agency that wants a calm threshold with a surprise underneath. The hidden map can be anything: a photo, a second mark, the project’s colour.

On phones

The same, with the mark taking the width and a smaller name: the finger is the pointer, and the ghost pointer wanders until the screen is touched.

With reduced motion

The mark is already drawn, the name already in place and there is no ghost pointer; the trail is still there under the finger or the mouse, but it fades at once.

Pitfalls

The trail must fade by the time that has passed, not by a fixed amount per frame: on a 120 Hz screen it would fade twice as fast.
The brush must be stamped several times along the way travelled between two frames: stamped once, a fast gesture leaves a row of separate circles.
The trail canvas is small on purpose: a quarter of the screen is enough, scaled up it softens by itself and costs sixteen times less.
On the first movement the tip must be put where the pointer is: starting from the centre, the first trail crosses half the screen.

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 16 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.