Back to the library
Balance — the tipping point
Variant: Tipping point
A standing block pushed twice around the same corner: the first lean peaks at 17 degrees, centre still short of the plumb line, and gravity hauls it back; the second passes 26 and the same gravity finishes the job. The tell is the creep — at the balance point the block has no speed left, so time visibly slows before the commit — and the fall that follows is an honest ease-in, a body accelerating rather than an element entering. The centre-of-mass dot cuts clay to rust on the exact frame it crosses the line: a verdict, not a mood. Use it wherever a threshold deserves to be felt — destructive confirms, swipe-to-commit, any control with a point of no return.
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 — the tipping point</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: 5.6s;
--t: calc(var(--cycle) / var(--speed));
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
/* The fall. Ease-in is banned on UI and correct here for the same
reason the split-flap uses it: this is a body accelerating under
gravity, not an element answering a person. */
--ease-accent: cubic-bezier(0.55, 0, 0.88, 0.4);
}
* {
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: 240px;
}
.cap {
font-size: 11px;
letter-spacing: 0.04em;
color: color-mix(in srgb, var(--slate) 52%, transparent);
}
.scene {
position: relative;
width: 240px;
height: 140px;
}
.ground {
position: absolute;
left: 0;
right: 0;
top: 126px;
height: 2px;
background: var(--oat);
}
.rig {
position: absolute;
inset: 0;
animation: rig-cycle var(--t) linear infinite;
}
/* The plumb line over the pivot corner — the only line in the piece that
matters. Everything left of it, gravity restores; everything right of
it, gravity finishes. */
.plumb {
position: absolute;
left: 120.25px;
top: 72px;
width: 1.5px;
height: 54px;
background: repeating-linear-gradient(
to bottom,
color-mix(in srgb, var(--slate) 30%, transparent) 0 4px,
transparent 4px 9px
);
/* Over the block, not under it: the lean sweeps across this line at
the exact moment the verdict lands, and a hidden threshold is no
threshold at all. */
z-index: 1;
}
/* Pivot: the bottom-right corner. Critical angle for a 30x62 block is
atan(15/31), just under 26 degrees. */
.block {
position: absolute;
left: 91px;
top: 64px;
width: 30px;
height: 62px;
border-radius: calc(4px * var(--round));
background: var(--paper);
border: 1.5px solid var(--oat);
transform-origin: 100% 100%;
animation: lean var(--t) infinite;
}
/* The centre of mass, riding inside the block. Its colour is the
verdict: a rust face stacked on the clay dot, stepped on the frame
the centre crosses the plumb — a state change, not a mood. */
.com {
position: absolute;
left: 10.5px;
top: 27.5px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--clay);
}
.com::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--rust);
opacity: 0;
animation: verdict var(--t) steps(1, end) infinite;
}
.finger {
position: absolute;
left: 40px;
top: 78px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--clay-d);
animation: push var(--t) infinite;
}
/* Two pushes, one line. The first peaks at 17 degrees — centre still
left of the corner — so gravity hauls it back and it rocks out on its
base. The second carries it to 28: past the plumb the block creeps,
nearly weightless, then the same gravity that refused the first push
finishes this one. The creep is the piece — at the point of balance a
body has no speed left, so time visibly slows there. */
@keyframes lean {
0%,
6% {
transform: rotate(0deg);
animation-timing-function: var(--ease-out);
}
12% {
transform: rotate(17deg);
animation-timing-function: var(--ease-accent);
}
18% {
transform: rotate(0deg);
animation-timing-function: var(--ease-out);
}
20% {
transform: rotate(2.2deg);
animation-timing-function: var(--ease-accent);
}
22.5% {
transform: rotate(0deg);
animation-timing-function: var(--ease-out);
}
24% {
transform: rotate(0.7deg);
animation-timing-function: var(--ease-accent);
}
25.5%,
36% {
transform: rotate(0deg);
animation-timing-function: var(--ease-out);
}
43% {
transform: rotate(26.5deg);
animation-timing-function: linear;
}
47.5% {
transform: rotate(28.5deg);
animation-timing-function: var(--ease-accent);
}
54% {
transform: rotate(90deg);
animation-timing-function: var(--ease-out);
}
56% {
transform: rotate(84.5deg);
animation-timing-function: var(--ease-accent);
}
58.5% {
transform: rotate(90deg);
animation-timing-function: var(--ease-out);
}
60% {
transform: rotate(87.8deg);
animation-timing-function: var(--ease-accent);
}
61.5%,
93% {
transform: rotate(90deg);
}
94%,
100% {
transform: rotate(0deg);
}
}
/* The finger tracks the face it is pushing and exists only while it has
business here — it arrives for each shove and withdraws after,
because a hand parked in the frame is a second actor with no role.
When the block commits it holds its ground and fades where it stands:
the fall is not its doing, and a hand chasing home mid-fall would
claim otherwise. */
@keyframes push {
0%,
3% {
transform: translateX(0);
opacity: 0;
animation-timing-function: var(--ease-in-out);
}
6% {
transform: translateX(43px);
opacity: 1;
animation-timing-function: var(--ease-out);
}
12%,
13.5% {
transform: translateX(57px);
opacity: 1;
animation-timing-function: var(--ease-in-out);
}
18% {
transform: translateX(14px);
opacity: 0;
animation-timing-function: var(--ease-in-out);
}
18.1%,
30% {
transform: translateX(0);
opacity: 0;
animation-timing-function: var(--ease-in-out);
}
34% {
transform: translateX(43px);
opacity: 1;
animation-timing-function: var(--ease-out);
}
43% {
transform: translateX(65px);
opacity: 1;
animation-timing-function: linear;
}
47.5%,
49% {
transform: translateX(67px);
opacity: 1;
animation-timing-function: ease;
}
52.5% {
transform: translateX(67px);
opacity: 0;
}
53%,
100% {
transform: translateX(0);
opacity: 0;
}
}
/* Cut on the frame the centre crosses the plumb — the ease-out lean
passes the critical 25.8deg at 41.7% — not on the frame the fall
becomes obvious. */
@keyframes verdict {
0%,
41.6% {
opacity: 0;
}
41.7%,
100% {
opacity: 1;
}
}
/* The block is stood back up between 93% and 94%, strictly inside the
dark window — a fallen thing righting itself is the one frame this
piece must never show. */
@keyframes rig-cycle {
0% {
opacity: 0;
}
3%,
86% {
opacity: 1;
}
92%,
100% {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
/* The rotation is the vestibular load and all of it goes. What stays
is the geometry lesson at rest: the block, its centre, and the line
the centre must not cross — with the centre breathing to say it is
the thing to watch. */
.rig {
animation: none;
opacity: 1;
}
.block {
animation: none;
transform: none;
}
.finger {
animation: none;
transform: none;
opacity: 0;
}
.com {
animation: rest-cue calc(var(--t) * 1.6) ease infinite;
}
.com::after {
animation: none;
opacity: 0;
}
@keyframes rest-cue {
0%,
100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
}
</style>
</head>
<body>
<div
class="stage"
role="img"
aria-label="A standing block is pushed twice: the first lean stops short of the plumb line over its corner and gravity sets it back; the second carries its centre past the line, it hesitates at the balance point, then tips over and lands on its side"
>
<p class="cap">the centre decides · short of the corner it recovers, past it it commits</p>
<div class="scene">
<div class="ground"></div>
<div class="rig">
<span class="plumb"></span>
<span class="finger"></span>
<div class="block"><span class="com"></span></div>
</div>
</div>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.