The mark that rises from the noise

Intro, Transitions, WebGLWebGL, Canvas, GSAPMediumCompressed weight: Demo 5.6 KBGSAP 28 KBFreeDownload the zip

The opening of a sound studio, in the minimal style: the name, a thin line filling with a count, then the mark rising out of a slowly drifting noise, grain by grain, with an edge that burns blue. Enter sends it back into the noise.

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 that rises from the noise</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 opening of a made-up sound studio. The name, a hairline that fills with a count, then the mark comes up
       out of a drifting noise, grain by grain, with a blue edge where it burns in; Enter sends it back into the noise -->
  <main class="soglia" data-soglia>
    <canvas class="tela" data-tela aria-hidden="true"></canvas>
    <div class="piede">
      <p class="nome" data-nome><span>Halde</span><span class="nome__sotto">sound</span></p>
      <div class="carica" data-carica>
        <span class="carica__riga"><span class="carica__pieno" data-pieno></span></span>
        <span class="carica__conto" data-conto>0</span>
      </div>
      <button class="entra" type="button" data-entra>Enter</button>
    </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.

18 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 that rises from the noise” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The opening of Halde, a made-up sound studio. On the almost black ground the name appears, HALDE SOUND, in eight tenths of a second; under it a thin line fills in jumps, like files arriving, with the count from 0 to 100 beside it. When the count is done the line goes and, half a second later, the studio’s mark comes up above the name: it is not drawn, it emerges from a slowly drifting noise, in patches, first where the noise is lowest and then everywhere else. Where the line is lighting up it has a blue edge, which goes out as soon as it is full. Then the Enter button fades in slowly. Pressing it sends the mark back into the noise, faster, the name fades and everything starts again; if nobody presses it, it presses itself after a few seconds.

How it works

The mark in a texture

The mark is drawn only once with the 2D canvas, white on transparent, in a square of at most 440 pixels, and becomes a WebGL texture. On screen there is a single rectangle as big as the window: the shader knows where the mark’s square is and draws nothing outside it.

The noise against the threshold

For every pixel the shader works out a soft noise (value noise in three octaves, NOISE_SCALE says how fine the patches are) drifting by NOISE_SPEED over time. Then it compares it with how far the reveal has got: with a smoothstep SOFTNESS wide, the pixel is off if the noise is higher, on if it is lower, and halfway in the band between. The reveal goes from 0 to 1 a little past the edges (minus SOFTNESS, plus SOFTNESS), so at the start nothing shows and at the end it is all full.

The burning edge

The halfway band, where the pixel is neither off nor on, is the part lighting up: the shader measures it (one minus the distance from the middle) and there it mixes the line colour with the blue accent, by EDGE. So the mark rises with a blue thread in front of it, which stays nowhere.

The direction

One GSAP timeline does everything: the name in 0.8 seconds, the line filling in five equal steps with power3.inOut (the loading lasts at least MIN_WAIT seconds even when everything is ready), the AFTER_LOAD pause, the mark in REVEAL_TIME seconds and the button fading in over 2.5 seconds. Enter plays the reverse, shorter, with power2.in, and at the end the opening starts again.

Values to change

Name	File	Default	What it changes
`MIN_WAIT`	script.js	`1`	The shortest the loader lasts, in seconds.
`LOAD_TIME`	script.js	`1.6`	How long our pretend loading takes.
`AFTER_LOAD`	script.js	`0.5`	The pause between the full line and the mark.
`REVEAL_TIME`	script.js	`2.4`	The seconds the mark takes to come up.
`SOFTNESS`	script.js	`0.15`	How soft the edge of the dissolve is.
`NOISE_SCALE`	script.js	`7`	How fine the patches of the noise are.
`NOISE_SPEED`	script.js	`0.02`	How quickly the noise drifts.
`EDGE`	script.js	`0.6`	How strongly the burning edge glows blue.
`AUTO_ENTER`	script.js	`4`	After how many seconds Enter presses itself; 0 to wait for a click.
`HOLD`	script.js	`1.2`	The seconds of empty screen before it starts again.

Try them in the Playground

When to use it

For the opening of a sound studio, a label, a festival or a 3D experience that has to load something before you go in and asks for a click (for instance to switch the audio on). It works with any mark made of thin lines.

On phones

The same, with the mark taking almost the whole width; Enter is tapped with a finger.

With reduced motion

No moving noise and no blue edge: the mark appears in a soft, even fade and goes the same way.

Pitfalls

The threshold must be widened past 0 and 1 by SOFTNESS: otherwise at zero reveal the lowest half of the noise already shows and at full reveal holes are left.
The WebGL canvas must be created with premultipliedAlpha and the colour multiplied by the opacity: without it, the edges of the line on a dark ground come out light and dirty.
The mark must be drawn into the texture with its width multiplied by the dpr: drawn at one pixel and scaled up, on retina screens it becomes a blurred line.
Enter must be ignored until the mark is full: pressed halfway, the exit timeline starts from where it was and the mark would jump back.

Libraries

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 5.6 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.