Tiles that rise
SVG, Hover, Physics
NewFree
Back to the library
The cycloid race
In the minimal style, with real physics: two thin tracks run from the same rim to the same rim, one straight through the bottom and one a cycloid. Two beads start together from rest and the one on the curve always arrives first, even though its way is longer; the times stop and in the headline the word curve takes the accent.
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 cycloid race</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage aria-label="Swale couriers: the fastest way down is a curve. Click to race again.">
<h1 class="head" data-head>The fastest way down is a <span class="head__key" data-key>curve</span>.</h1>
<!-- two tracks from the same rim to the same rim: two straight lines through the bottom, and a cycloid -->
<svg class="scene" data-scene aria-hidden="true">
<path class="track track--line" data-line d="" />
<path class="track track--curve" data-curve d="" />
<line class="ledge" data-ledge-l />
<line class="ledge" data-ledge-r />
<circle class="bead bead--line" data-bead-line r="7" />
<circle class="bead bead--curve" data-bead-curve r="7" />
</svg>
<dl class="times" data-times>
<div class="times__row times__row--curve" data-row-curve>
<dt>Curve</dt>
<dd data-t-curve>0.00 s</dd>
</div>
<div class="times__row times__row--line" data-row-line>
<dt>Straight</dt>
<dd data-t-line>0.00 s</dd>
</div>
</dl>
<p class="brand">Swale <span>couriers</span></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.
17 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 cycloid race” from Animorio and fit it into my siteWhat it does
On a black page, under the headline The fastest way down is a curve., two thin tracks draw themselves from one rim to the other: two straight lines meeting at the lowest point, the shortest way, and a light cycloid, the curve a point on a rolling wheel draws. On the left rim, on a small ledge, two beads wait one inside the other: a light ring for the straight lines and an orange disc for the curve. The ledge slides away and the beads fall from rest under the same gravity with no friction: the one on the curve drops almost straight down, picks up speed at once, passes the bottom ahead and climbs; the one on the straight lines starts slowly and falls behind. Underneath two times count in hundredths. The orange bead arrives at rest on the right rim and a ledge slides in under it with a small bounce: its time stops in orange, 2.40 s, and in the headline the word curve turns orange, heavier and wider on a spring. The ring arrives later, 2.85 s, and settles round it. After a pause the race goes back, right to left. A click starts it over. The brand at the bottom is a made-up courier service, Swale.
How it works
Exact physics, not an ease
On a cycloid x = r(θ − sin θ), y = r(1 − cos θ) a bead starting from rest at the cusp has the wheel's angle growing evenly: θ = t·√(g/r). On the straight lines the acceleration is constant, g·sin α, down and then up. g is chosen so the curve takes RACE seconds from rim to rim; the straight way then comes out √(π² + 4)/π times slower, about 18.5% more.
GSAP runs the clock
The timeline tweens a single number, the race time, with ease none; one function puts the beads in place with the formulas and writes the two times, stopping each at its arrival time. Since the arrival times are known in advance, the ledge sliding in, the orange time and the headline word are placed in the timeline at exactly those moments.
Stopping on the rim
On the far rim each bead has zero speed (all the energy is back in height): the right moment for a ledge to slide in under it with back.out, with no trick at all. The two beads are different sizes, a ring and a smaller disc, so when they rest together one sits inside the other instead of covering it.
The word that wins
The word curve in the headline is a span whose font-stretch is tied to the --w variable (Mona Sans runs from 75 to 125 in width): when the curve arrives it takes the accent colour, its weight goes from 360 to 640 and its width from 88 to 100 with elastic.out, and on the next race it goes back.
Loop, phone and reduced motion
After the entrance (the tracks draw with stroke-dashoffset, the beads appear on a spring) the timeline runs two races, there and back, then starts again from the loop label. The measures (the wheel's radius, the beads, the headline and the times) are taken again on every resize. With reduced motion the finished race, with both times and the word in orange, fades in.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
RACE | script.js | 2.4 | The seconds the bead on the curve takes from rim to rim (gravity is set to match). |
HOLD | script.js | 1.6 | The seconds the beads rest on the rim before the race back. |
BEAD | script.js | 7 | The radius of the beads in pixels (it grows a little on large screens). |
WORD | script.js | 'curve' | The word of the headline that lights up when the curve wins. |
When to use it
As the opening of a landing page that wants to say «the shortest way is not the fastest»: a delivery or courier service, a routing or logistics app, a physics or maths course, a popular science article; or as the animated picture for a «how it works» section.
On phones
The same animation with the sizes adapted: the cycloid takes the whole width of the screen (it is π times as wide as it is tall, so it stays low), the headline goes onto two lines and the times sit underneath.
With reduced motion
Nothing runs: the finished race, with the beads on the right rim, both times and the word curve in orange, fades in and stays.
Pitfalls
- Two equal beads resting on the same rim covered each other: only one showed. The ring is larger than the disc, so at rest one sits inside the other.
- Stopping the beads at the bottom with a buffer would have needed a made-up bounce, and both would have arrived at the same point one on top of the other: arriving on the opposite rim they stop on their own, at zero speed, and the race back starts from there.
- The legend had a coloured dot in front of Curve and Straight: it is gone, the colour is carried by the word itself.
- 7 pixel beads on a cycloid 1300 pixels wide got lost: their size grows with the wheel's radius, up to 1.8 times.
Libraries
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 4.9 KB; the libraries: GSAP 28 KB.
Testing
Tested on 19 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.
