The Euler's disk settling under the word

3D, Hover, PhysicsGSAP, CSS onlyAdvancedCompressed weight: Demo 6.4 KBGSAP 28 KBFreeDownload the zip

A minimal-style 3D animated headline: under the word Settle a polished steel disk spins on its rim like Euler's disk. The tilt drops slowly and then collapses, the contact point circles faster and faster and the disk lies flat with a last shiver, while the word trembles with the table and settles by one pixel. A tap spins it again.

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>Stillpoint</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- a steel Euler's disk spinning on its rim under a word: it wobbles faster and faster, lower and lower, until it
       lies flat with a last shiver, and the word settles with it; a tap spins it again -->
  <main class="pagina" data-pagina>
    <header class="testa">
      <p class="marchio" data-entra>Stillpoint</p>
      <p class="testa__nota" data-entra>Desk objects in steel</p>
    </header>

    <h1 class="parola" data-parola aria-label="Settle">Settle</h1>

    <div class="scena" data-scena aria-hidden="true">
      <div class="piano" data-piano>
        <div class="ombra" data-ombra></div>
        <div class="contatto" data-contatto></div>
        <div class="disco" data-disco></div>
      </div>
    </div>

    <footer class="piede">
      <p class="nota" data-entra data-nota>Tap to spin it again</p>
      <p class="misura" data-entra><span data-tilt>Tilt 0.0°</span><span class="misura__sep"></span><span data-stato>at rest</span></p>
    </footer>
  </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.

23 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 Euler's disk settling under the word” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

Stillpoint is an invented shop of steel desk objects. Under the word Settle, large and dark on a warm white, a polished steel disk rests on a table. It starts by itself: it rises onto its rim spinning, tilted at 26 degrees, and begins to turn like Euler's disk. For a few seconds it seems almost frozen at its tilt, then the tilt collapses: the point where the rim touches the table circles faster and faster, the disk sinks lower, and meanwhile it barely turns on itself any more, so much that the mark engraved on its face slows down until it stops. In the end it rattles on the table with a last shiver and stays down. The word above trembles slightly with the table while the disk runs, more and more towards the end, and when the disk settles each letter drops one pixel and comes back up, one after the other. At the bottom the tilt reads in degrees, and the status goes from spinning to wobbling to settling to at rest, in orange, the only colour. The steel face brightens when it faces the lamp and darkens on the other side, the reflection stays still while the disk turns, and the shadow tightens and darkens as the disk sinks. After a few seconds it starts again by itself; a click or a tap relaunches it whenever you like, and the pointer tilts the table slightly towards itself.

How it works

A disk made of slices

The disk is CSS 3D: twelve circles stacked a few tenths of a pixel apart make the thickness, and the first and the last are the two steel faces. The table is a div laid back 48 degrees with rotateX, and inside it, with transform-style: preserve-3d, the disk is placed with translateZ, rotateZ(φ), rotateX(θ) and rotateZ(ψ): where the contact point is, how far it tilts, how far it has turned on itself. Raising it by R · sin θ keeps the lowest point of the rim on the table.

The physics of Euler's disk

The tilt goes as the cube root of the time left, θ = TILT · ∛(1 − t / DURATION): it drops slowly and collapses at the end, as with the real disk. The precession grows as 1 / √sin θ, capped at 5.2 turns per second because beyond that, at 60 frames, it would appear to spin backwards. Rolling without slipping, the disk turns on itself by ω · (1 − cos θ): almost nothing when it is low, which is why the engraved mark stops while the contact point races.

The shiver and the word

Below half a degree the disk switches to settling: for half a second the tilt is |sin(55 t)| times an exponential decay, and it rattles on the table more and more softly. The word has a parent and a child per letter: the child trembles in phase with the contact point, with an amplitude that grows with the precession, and the parent does the final settle, one pixel down and up with back.out, one letter every 35 thousandths.

The light on the steel

Every frame computes the disk's normal, (sin θ sin φ, −sin θ cos φ, cos θ), and its dot product with the lamp direction: it becomes a brightness() on the face. The reflection is a conic gradient that turns against the disk, so it stays still relative to the light, and the brushed steel in circles is a repeating radial gradient.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`Settle`	The word above the disk.
`TILT`	script.js	`26`	The tilt the disk starts from, in degrees.
`DURATION`	script.js	`7.5`	How many seconds the disk takes to settle.
`SPIN`	script.js	`1`	How fast it spins at the start.
`SIZE`	script.js	`1`	The size of the disk.
`SHAKE`	script.js	`1`	How much the word trembles while the disk spins.
`PAUSE`	script.js	`2.4`	How many seconds it rests before starting again by itself.
`LEAN`	script.js	`1`	How much the table tilts towards the pointer.

Try them in the Playground

When to use it

As the opening headline of a design object shop, a product studio or a brand of metal watches and accessories; behind a word about calm, balance or focus, for a meditation app or a retreat; as the presentation page of a single object, where the motion tells the quality of the material.

On phones

The same animation: the disk and the word are sized on both width and height, so they fit the box even on a small phone. A tap relaunches the disk; the table doesn't tilt, because without a pointer there is nowhere to look.

With reduced motion

The disk is already settled, still and flat, the word is in place and the status reads at rest: no spinning, no trembling. The labels and the disk fade in.

Pitfalls

With the camera too low (table laid back at 64 degrees) the disk tilted towards the viewer is seen edge-on and seems to float above its shadow: at 48 degrees it always reads as resting.
The real precession grows without limit as the disk sinks: beyond 5 turns per second, at 60 frames, the eye sees it slow down or spin backwards. It needs a cap.
A round contact shadow just outside the rim reads as a dot: it has to be squashed along the rim and placed just inside.
A brightness() filter on an element with preserve-3d flattens it: it goes only on the faces, which hold only 2D things.

Libraries

GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.

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

Testing

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