Back to the library
Balance — counterweight
Variant: Counterweight
An elevator car and its counterweight trading places over a pulley. The counterweight rides in a mirrored wrapper so one set of keyframes drives both ends of the cable — the two riders cannot disagree, for the same reason the real ones cannot: there is only one rope. The dashed rim turns 229 degrees because 56px of travel over a 14px radius is four radians, on the same curve and window as the cars; any other figure and the pulley is slipping its cable. Both trips ride the same ease-in-out, since a balanced pair weighs the same in both directions — the whole economy the machine is built on. Use it when documenting anything that cancels a fixed cost so the motor pays only for the difference.
physicsdiagramloop
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>Balance — counterweight</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: 4.8s;
--t: calc(var(--cycle) / var(--speed));
--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);
}
.stage {
display: grid;
gap: 10px;
width: 232px;
}
.cap {
font-size: 11px;
letter-spacing: 0.04em;
color: color-mix(in srgb, var(--slate) 52%, transparent);
}
.scene {
position: relative;
width: 232px;
height: 152px;
}
.ground {
position: absolute;
left: 0;
right: 0;
top: 150px;
height: 2px;
background: var(--oat);
}
/* The rim is dashed so its rotation is legible, and the rotation is not
decoration: 56px of travel over a 14px radius is 4 radians, 229
degrees, on the same curve and the same window as the cars — a pulley
that turned any other amount would be slipping its cable. */
.wheel {
position: absolute;
left: 102px;
top: 14px;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1.6px dashed color-mix(in srgb, var(--slate) 45%, transparent);
animation: turn var(--t) infinite;
}
.hub {
position: absolute;
left: 112px;
top: 24px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--clay-d);
}
/* Each side is a cable and its rider moving as one group, clipped at the
pulley's axle height, so the cable can be any length without a single
height animating. */
.side {
position: absolute;
top: 28px;
bottom: 0;
overflow: hidden;
}
.side.l {
left: 85px;
width: 34px;
}
.side.r {
left: 120px;
width: 20px;
}
/* The counterweight rides inside a mirrored wrapper, so one set of
keyframes drives both ends of the cable in opposite directions — the
two riders cannot disagree for the same reason the real ones cannot:
there is only one rope. */
.flip {
position: absolute;
inset: 0;
transform: scaleY(-1);
}
.car-rig,
.weight-rig {
position: absolute;
left: 0;
right: 0;
animation: travel var(--t) infinite;
}
.car-rig {
top: 76px;
}
.weight-rig {
top: 70px;
}
.cable {
position: absolute;
top: -150px;
height: 150px;
width: 1.5px;
background: color-mix(in srgb, var(--slate) 45%, transparent);
}
.car-rig .cable {
left: 16.25px;
}
/* In mirrored coordinates the pulley is below, so this cable hangs off
the weight's far edge — visually, up. */
.weight-rig .cable {
top: 34px;
height: 150px;
left: 9.25px;
}
.car {
position: relative;
width: 34px;
height: 40px;
border-radius: calc(4px * var(--round));
background: var(--paper);
border: 1.5px solid var(--oat);
}
/* The passenger — the only mass in the scene the counterweight does not
already cancel, and the only thing the motor is truly lifting. */
.rider {
position: absolute;
left: 13px;
bottom: 6px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--clay);
}
.weight {
position: relative;
width: 20px;
height: 34px;
border-radius: calc(3px * var(--round));
background: var(--oat);
transform: scaleY(-1);
}
.weight::before,
.weight::after {
content: '';
position: absolute;
left: 3px;
right: 3px;
height: 1.5px;
background: color-mix(in srgb, var(--slate) 25%, transparent);
}
.weight::before {
top: 10px;
}
.weight::after {
top: 21px;
}
/* Ease-in-out both ways: the cars are already on screen and travelling
A to B, and nothing about a balanced pair is an entrance. The trip up
and the trip down cost the same because the system weighs the same in
both directions — that symmetry is the whole economy. */
@keyframes travel {
0%,
8% {
transform: translateY(0);
animation-timing-function: var(--ease-in-out);
}
32%,
55% {
transform: translateY(-56px);
animation-timing-function: var(--ease-in-out);
}
79%,
100% {
transform: translateY(0);
}
}
@keyframes turn {
0%,
8% {
transform: rotate(0deg);
animation-timing-function: var(--ease-in-out);
}
32%,
55% {
transform: rotate(229deg);
animation-timing-function: var(--ease-in-out);
}
79%,
100% {
transform: rotate(0deg);
}
}
@media (prefers-reduced-motion: reduce) {
/* The travel goes. The pair at rest still states the idea — two
masses hung against each other — and the rider breathes to mark
which one the motor is for. */
.car-rig,
.weight-rig,
.wheel {
animation: none;
transform: none;
}
.flip .weight-rig {
transform: none;
}
.rider {
animation: rest-cue calc(var(--t) * 1.8) ease infinite;
}
@keyframes rest-cue {
0%,
100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
}
</style>
</head>
<body>
<div
class="stage"
role="img"
aria-label="An elevator car and its counterweight hang over a pulley; the car rises exactly as the counterweight falls, the dashed pulley rim turning with the cable, then the pair returns"
>
<p class="cap">one cable, two ends · the motor lifts only the passenger</p>
<div class="scene">
<div class="ground"></div>
<div class="side l">
<div class="car-rig">
<span class="cable"></span>
<div class="car"><span class="rider"></span></div>
</div>
</div>
<div class="side r">
<div class="flip">
<div class="weight-rig">
<span class="cable"></span>
<div class="weight"></div>
</div>
</div>
</div>
<span class="wheel"></span>
<span class="hub"></span>
</div>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.