The gyroscope rings
3D, Intro
NewFree
Back to the library
The mark that becomes a map
A sound studio’s mark read as a landscape, in the minimal style: seen from above it is only a bundle of thin contour lines; then the lines rise, the view tilts and the strokes of the mark become valleys. The deepest line, in blue, draws the mark. Drag to turn it.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The mark that becomes a map</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 mark of a made-up sound studio, seen from above as thin contour lines; the lines rise into a landscape
where the strokes of the mark are valleys, the view tilts, and the deepest line, the mark itself, turns blue -->
<main class="soglia" data-soglia>
<canvas class="tela" data-tela aria-hidden="true"></canvas>
<p class="nome"><span>Halde</span><span class="nome__sotto">sound</span></p>
<p class="aiuto">Drag to turn the map</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.
15 values to change
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 becomes a map” from Animorio and fit it into my siteWhat it does
The mark of Halde, a made-up sound studio, as a topographic map. At first it is seen from above: it is made only of pale thin contour lines, close round the three strokes, the ring, the peak and the wave, and a blue line runs along the bottom of each stroke. Then the lines rise, each to its own height, and a moment later the view tilts and settles with a small bounce: the strokes are valleys cut into a round plateau, with slightly uneven walls, and the blue line is the floor of the valleys. The map turns slowly on itself, after a few seconds lies flat again and rises again. Dragging turns and tilts it, the wheel brings it closer.
How it works
The mark as points
The three strokes (an arc, a peak, a wave of two Bézier curves) become about 360 points in a square from -1 to 1. On a grid of 121 by 121 points, inside a circle, the script works out only once the distance of each point from the nearest stroke.
From distance to height
The height is a valley: minus DEPTH on the stroke, zero beyond WIDTH, with a smoothstep in between, so the floor is flat and so is the plateau. On the walls, and only there, a noise of ROUGH is added that makes them uneven like real ground.
The contour lines
For each level, LEVELS in all, the script goes through every little square of the grid (marching squares): where the height crosses the level between two corners, it finds the exact point with a proportion and joins the points in pairs. The result is many small segments, sent only once to a WebGL buffer, one per level.
The projection
A contour line lies all at one height, so turning it round the vertical axis (spin) and tilting it (tilt) is a single 2 by 3 matrix, sent to the shader every frame with the height: the height, multiplied by a number going from 0 to 1 (rise), goes up the screen with the sine of the tilt, the depth shortens with the cosine. WebGL draws the lines with gl.LINES; the lowest level is blue and the others paler as they rise. A GSAP timeline raises the lines in RISE_TIME seconds and tilts the view with back.out, which settles with a small bounce.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
LEVELS | script.js | 12 | How many contour lines. |
DEPTH | script.js | 0.2 | How deep the valleys are, as a share of the map’s radius. |
WIDTH | script.js | 0.16 | How wide the valleys are. |
ROUGH | script.js | 0.04 | How uneven the walls are. |
TILT | script.js | 0.8 | How far the view tilts, in radians (0 is from straight above). |
RISE_TIME | script.js | 2.6 | The seconds the lines take to rise. |
SPIN | script.js | 0.08 | How fast the map turns by itself, in turns every ten seconds. |
STAY | script.js | 6 | The seconds the landscape stays up before lying flat again; 0 to stay up. |
When to use it
For the opening of a sound studio, a walking travel agency, a landscape studio or a mountain brand, or as an about page that shows the mark in another light. It works with any mark made of strokes, even with a word.
On phones
The same, with the map taking the width; the finger turns and tilts it.
With reduced motion
The landscape is already up and tilted, does not turn by itself and does not lie flat again; dragging still turns it.
Pitfalls
- The contour lines must be worked out only once: every frame only the segments already found are turned and projected. Redoing the marching squares every frame costs dozens of times more.
- The height must be made with a smoothstep and not a gaussian: the gaussian never reaches zero and fills the plateau with lines, and the map becomes a tangle.
- The noise must go only on the walls: on the flat plateau a hair of noise is enough to scatter patches of lines everywhere.
- WebGL lines are one device pixel wide, half a CSS pixel on a retina screen: there each level is drawn three times, moved one pixel right and one down, so it is as thick as a CSS line.
- Drawn with the 2D canvas, the thousands of segments every frame stalled the browser without a graphics card: with WebGL they go into the card’s memory once and every frame only a matrix changes.
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.
