Back to the library
Coupling — hung from a pivot
Variant: Hung from a pivot
Nothing pushes the tag: the pin it hangs from is carried 38px, and everything the tag does is a reaction to its own support having moved. That makes it the reference build for any element anchored at an edge rather than through its middle — a sheet on a handle, a badge knocked by an arriving event, a panel hinged at the top of its trigger. The swing is authored as extremes only with ease-in-out between them, because a pendulum decelerates into every turn and dwells nowhere in between. Amplitude decays by a factor of 0.62 a swing while the half-period never moves off 204ms, and that is the number people get wrong: shrink each swing’s duration along with its arc and the settle reads as speeding up as it dies. The tag is a child of the string rather than a sibling of it, so it stays perpendicular to whatever the string is doing — weld it to the scene instead and it slides along an arc facing forwards, which is a rail with a curve in it.
physicstransitionloop
The source
A complete HTML document. Paste it into an empty .html file and it plays — no stylesheet, script, font, or image to fetch.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Coupling — hung from a pivot</title>
<style>
:root {
/* Neutrals — fixed, never remixed. */
--ivory: #faf9f5;
--paper: #ffffff;
--oat: #e3dacc;
--slate: #141413;
/* Knobs — the remix API. A knob exists iff declared here and used below. */
--hue: 38.8;
--lift: 0;
--chroma: 1;
--round: 1;
--speed: 1;
/* Accents — derived from the knobs with the family's offsets baked in,
so one hue roll moves them together. Defaults reproduce the original hex. */
--clay: oklch(calc(0.6724 + var(--lift)) calc(0.1308 * var(--chroma)) var(--hue));
--clay-d: oklch(calc(0.5797 + var(--lift)) calc(0.127 * var(--chroma)) var(--hue));
--olive: oklch(
calc(0.6118 + var(--lift)) calc(0.0713 * var(--chroma)) calc(var(--hue) + 88.3)
);
--rust: oklch(
calc(0.5408 + var(--lift)) calc(0.1357 * var(--chroma)) calc(var(--hue) - 10.3)
);
/* Clock — every duration in the document runs off --t. */
--cycle: 3.4s;
--t: calc(var(--cycle) / var(--speed));
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
/* Every keyframe in the swing sits at an extreme, so this curve is what
the pendulum actually is: it decelerates into each turn and
accelerates away from it, and never dwells anywhere in between. */
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background: var(--ivory);
font-family:
system-ui,
-apple-system,
'Segoe UI',
Roboto,
sans-serif;
color: var(--slate);
}
.scene {
position: relative;
width: 210px;
height: 118px;
}
.beam {
position: absolute;
top: 12px;
left: 0;
right: 0;
height: 2px;
background: var(--oat);
}
.rig {
position: absolute;
inset: 0;
animation: rig-cycle var(--t) linear infinite;
}
/* Nothing pushes the tag. The support is carried 38px and the tag is only
ever reacting to that — which is the whole reason the piece belongs to
this family rather than to the spring ones. */
.carriage {
position: absolute;
top: 6px;
left: 74px;
width: 14px;
height: 14px;
animation: carry var(--t) infinite;
}
.pin {
position: absolute;
top: 2px;
left: 2px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--clay-d);
}
/* The rest line, travelling with the pin. Amplitude is obvious without it;
the constant period is not — you read that off the tag crossing this
line at even intervals while the swings visibly shrink. */
.plumb {
position: absolute;
top: 7px;
left: 6.25px;
width: 1.5px;
height: 96px;
background: repeating-linear-gradient(to bottom, var(--oat) 0 4px, transparent 4px 9px);
}
.arm {
position: absolute;
top: 7px;
left: 6.25px;
width: 1.5px;
height: 68px;
background: var(--oat);
transform-origin: top center;
animation: swing var(--t) infinite;
}
/* A child of the arm, so it stays perpendicular to its own string. Weld
it to the scene instead and it slides along an arc facing forwards,
which is a rail with a curve in it rather than a thing hanging. */
.tag {
position: absolute;
top: 60px;
left: -20.25px;
width: 42px;
height: 26px;
border-radius: calc(6px * var(--round));
background: var(--paper);
border: 1.5px solid var(--oat);
}
.tag::before,
.tag::after {
content: '';
position: absolute;
left: 8px;
height: 3px;
border-radius: 2px;
}
.tag::before {
top: 6px;
width: 20px;
background: var(--clay);
}
.tag::after {
top: 14px;
width: 12px;
background: var(--oat);
}
@keyframes carry {
0%,
6% {
transform: translateX(0);
animation-timing-function: var(--ease-out);
}
13%,
91% {
transform: translateX(38px);
}
92%,
100% {
transform: translateX(0);
}
}
/* The support goes right, so the first swing goes left: a positive angle
about a pivot above the body carries the bob backwards, against the
travel, which is the only direction a body left behind can go.
Amplitude decays by a factor of 0.62 a swing; the half-period does not
move off 6% of the cycle for any of them. That is the whole piece —
a pendulum is isochronous, so shortening each swing as it shrinks is
the one mistake that makes a settle read as speeding up as it dies. */
@keyframes swing {
0%,
6% {
transform: rotate(0deg);
animation-timing-function: var(--ease-in-out);
}
14% {
transform: rotate(15deg);
animation-timing-function: var(--ease-in-out);
}
20% {
transform: rotate(-9.3deg);
animation-timing-function: var(--ease-in-out);
}
26% {
transform: rotate(5.8deg);
animation-timing-function: var(--ease-in-out);
}
32% {
transform: rotate(-3.6deg);
animation-timing-function: var(--ease-in-out);
}
38% {
transform: rotate(2.2deg);
animation-timing-function: var(--ease-in-out);
}
44% {
transform: rotate(-1.4deg);
animation-timing-function: var(--ease-in-out);
}
50%,
100% {
transform: rotate(0deg);
}
}
/* The carriage is re-seated at 92%, inside the window the rig spends dark,
so the shove never plays backwards. */
@keyframes rig-cycle {
0% {
opacity: 0;
}
3%,
86% {
opacity: 1;
}
90%,
100% {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
/* A swing is pure vestibular travel and all of it goes. What is kept is
the state the piece is about — something hanging, still attached, at
rest under its own pivot. */
.rig {
animation: none;
opacity: 1;
}
.carriage,
.arm {
animation: none;
transform: none;
}
.tag {
animation: rest-hang calc(var(--t) * 2) ease infinite;
}
@keyframes rest-hang {
0%,
100% {
opacity: 0.55;
}
50% {
opacity: 1;
}
}
}
</style>
</head>
<body>
<div
class="scene"
role="img"
aria-label="A tag hanging from a pin that is carried sideways; the tag swings out and rings down through shrinking arcs that each take the same time"
>
<div class="beam"></div>
<div class="rig">
<div class="carriage">
<span class="pin"></span>
<span class="plumb"></span>
<div class="arm">
<div class="tag"></div>
</div>
</div>
</div>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.