The dash relief
WebGL, 3D, Hover
Free
Back to the library
The row of discs
Six discs in Three.js, in a row seen at an angle, with a film poster printed on the front and iridescent metal on the back: they slide with the wheel or a drag, lean as they run, and a marker circles the front one.
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="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>La fila di dischi</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
<script type="importmap">
{ "imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.178.0/build/three.module.min.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.178.0/examples/jsm/"
} }
</script>
</head>
<body>
<main class="galleria" data-galleria>
<!-- i dischi in WebGL, e sopra un secondo canvas per lo scarabocchio a pennarello -->
<canvas class="galleria__tela" data-tela aria-hidden="true"></canvas>
<canvas class="galleria__segno" data-segno aria-hidden="true"></canvas>
<p class="attesa" data-attesa>I dischi stanno arrivando</p>
<section class="scheda" aria-live="polite">
<h1 class="scheda__titolo"><span class="maschera"><span data-titolo>Il faro</span></span></h1>
<dl class="crediti">
<div><dt>Regia</dt><dd class="maschera"><span data-regia>Nora Valli</span></dd></div>
<div><dt>Anno</dt><dd class="maschera"><span data-anno>2019</span></dd></div>
<div><dt>Con</dt><dd class="maschera"><span data-con>Livio Sarti, Ada Moretti</span></dd></div>
</dl>
</section>
<p class="nota" data-nota>Scorri con la rotella, trascina o usa le frecce: i dischi scorrono in fila. Sul disco davanti un pennarello fa un giro intorno; cliccalo per girarlo e vedere il retro.</p>
<div class="comandi">
<button class="comandi__tasto" type="button" data-prima aria-label="Film precedente">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6" /></svg>
</button>
<button class="comandi__tasto" type="button" data-dopo aria-label="Film successivo">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
</button>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script type="module" 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.
68 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 row of discs” from Animorio and fit it into my siteWhat it does
Six discs, like DVDs, in a row seen at an angle on a paper background; each one has a summer film season poster printed on it, with the title above the hole and a line of text running along the rim. Top left, the card of the front film: title and credits on thin rules. With the wheel, a drag or the arrows the row moves one disc at a time, stops with a small bounce, and while it runs the discs lean the way they travel; the card changes, its lines leave upwards and new ones rise. The front disc turns slowly on itself and tilts towards the pointer; hovering it, a marker draws two loops around it that tremble like hand drawing. A click flips it: behind is the iridescent metal of real discs.
How it works
A real disc
Each disc has five pieces: the face with the poster, a RingGeometry from 0.2 to 0.988 of the radius with a glossy MeshPhysicalMaterial and a veil of clearcoat; the back, the same ring turned over, metal with iridescence on (index 1.45, film thickness 120 to 1100 nanometres); a thin cylindrical edge; a metal ring and the clear hub. Reflections come from a RoomEnvironment passed through the PMREMGenerator, plus a warm light in front and a blue rim light.
The posters are drawn
Each poster is a 1024-pixel canvas painted by the script once fonts have loaded: a simple drawing, the title in Instrument Serif above the hole and a line of text along the rim, letter by letter rotated on the circle. The RingGeometry carries the right coordinates, so the square image falls onto the disc without cuts.
The head of the row
The row is a group rotated by −24° and −28.6°; disc i sits at x = (i − head) × 2.2 and z = −(i − head)² × 0.12, and distant ones shrink to 80%. The head is a continuous number that a spring brings to the chosen disc (strength 80, damping 11, a small bounce); its speed makes the discs lean by √speed × 0.11, up to 0.3.
The marker
Thirty points are taken on the rim of the front disc, each shifted at random by 3%, and projected onto the screen: two loops of smooth curves on a second canvas, redone ten times a second, so the line trembles. The marker comes in over 0.45 seconds when the pointer is inside the disc’s projected outline, and leaves in 0.3.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
PASSO, CURVA | script.js | 2.2, 0.12 | The distance between discs (1.7 in portrait) and how far the row recedes at the sides. |
MOLLA, FRENO | script.js | 80, 11 | The spring that stops the row on the chosen disc: more damping, less bounce. |
PIEGA | script.js | 0.11 | How much the discs lean while the row runs. |
INCLINA, GIRA | script.js | 0.24, 0.12 | How much the front disc tilts towards the pointer, and how fast it turns by itself. |
PENNARELLO | script.js | 2 giri, 10 fps | The marker’s loops, its points, how much it trembles and how many times a second it is redrawn. |
FILM | script.js | 6 | The films: title, credits, colours and the poster drawing. |
When to use it
For a catalogue of round things, or things with a front and a back: records, films, plates, badges, coasters, labels. The disc can be flipped, and its back says something too.
On phones
In portrait the row shrinks until the front disc fits the width and the next one peeks in from the edge; you drag sideways with a finger, and a tap on the disc flips it. The marker, which lives with the pointer, is not there.
With reduced motion
The row jumps to the chosen disc without the spring, the discs do not lean, turn by themselves or tilt; the marker does not tremble.
Pitfalls
- Iridescence without an environment to reflect is grey metal: it needs the RoomEnvironment in the PMREMGenerator, or an HDR image.
- Too much clearcoat and environment on the face cover the poster with a white glare: the face gets the environment at 55%, the back at 100%.
- The marker must hang on the tilt group, not the spinning one: otherwise it would rotate with the disc instead of staying still around it.
- If the wheel steps on every event, one trackpad gesture runs through the whole row: add up the delta, step at 60, then wait 320 milliseconds for the gesture to calm down.
Libraries
Three.js 0.178.0, GSAP 3.15.0, Instrument Serif 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 9.5 KB; the libraries: GSAP 28 KB, Three.js + RoomEnvironment 176 KB.
Testing
Tested on 3 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: Done
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.
