Back to the library
Quarantine hold, slow beat
Variant: Slow beat
The same containment-and-review gesture stretched to a calmer cycle, with the sweep crossing at a lower constant speed and the verdict arriving later in the loop. Reach for this on a full-page or empty-state placement where the hold is the only thing on screen and a fast repeat would nag. Geometry and easing are identical to the single beat; only the master clock and the inner sub-clocks are longer, so the frame still snaps in well under 300ms while the review itself reads as unhurried.
moderationstatusholdreviewloop
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>Quarantine hold — slow beat</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
(#d97757 / #b85c3e / #788c5d / #b04a3f). */
--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.2s;
--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);
--_frame: calc(0.26s / var(--speed));
--_pip: calc(0.22s / var(--speed));
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
min-height: 100vh;
display: grid;
place-items: center;
background: var(--ivory);
color: var(--slate);
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
padding: 16px;
}
.stage {
width: min(360px, 92vw);
display: grid;
gap: clamp(10px, 3vw, 14px);
}
.plate {
position: relative;
padding: clamp(14px, 4vw, 18px);
background: var(--paper);
border: 1px solid var(--oat);
border-radius: calc(14px * var(--round));
overflow: hidden;
}
.item {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(10px, 3vw, 13px);
align-items: center;
animation: hold var(--t) var(--ease-in-out) infinite;
}
.thumb {
width: clamp(38px, 12vw, 46px);
height: clamp(38px, 12vw, 46px);
border-radius: calc(9px * var(--round));
background: linear-gradient(135deg, var(--clay) 0%, var(--rust) 100%);
position: relative;
flex: none;
}
.thumb::after {
content: "";
position: absolute;
inset: 28% 24% 30% 24%;
border-radius: calc(3px * var(--round));
background: var(--paper);
opacity: 0.55;
}
.lines { display: grid; gap: 7px; }
.line {
height: 8px;
border-radius: 999px;
background: var(--oat);
}
.line.a { width: 72%; }
.line.b { width: 44%; }
.frame {
position: absolute;
inset: clamp(7px, 2.4vw, 10px);
pointer-events: none;
}
.corner {
position: absolute;
width: 16%;
height: 26%;
border: 2px solid var(--rust);
opacity: 0;
animation: clamp-in var(--t) var(--ease-out) infinite;
}
.corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: calc(5px * var(--round)); transform-origin: top left; }
.corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: calc(5px * var(--round)); transform-origin: top right; }
.corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: calc(5px * var(--round)); transform-origin: bottom left; }
.corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: calc(5px * var(--round)); transform-origin: bottom right; }
.sweep {
position: absolute;
top: 0;
bottom: 0;
left: -18%;
width: 18%;
background: linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, var(--clay) 22%, transparent) 50%,
transparent 100%);
animation: pass var(--t) linear infinite;
}
.sweep::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 2px;
background: var(--clay);
}
.status {
display: flex;
align-items: center;
gap: 9px;
font-size: clamp(11px, 3.2vw, 12.5px);
letter-spacing: 0.04em;
}
.pip {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--rust);
flex: none;
animation: verdict var(--t) var(--ease-out) infinite;
}
.label { opacity: 0.72; }
.meter {
height: 3px;
border-radius: 999px;
background: var(--oat);
overflow: hidden;
}
.meter i {
display: block;
height: 100%;
background: var(--clay-d);
transform: scaleX(0);
transform-origin: left center;
animation: fill var(--t) linear infinite;
}
/* Longer cycle: the hold is entered early and kept for most of the loop,
so the frame snap still lands near 250ms of real time. */
@keyframes hold {
0%, 4% { opacity: 1; filter: saturate(1); transform: scale(1); }
12%, 84% { opacity: 0.58; filter: saturate(0.35); transform: scale(0.97); }
95%, 100% { opacity: 1; filter: saturate(1); transform: scale(1); }
}
@keyframes clamp-in {
0% { opacity: 0; transform: scale(1.5); }
7%, 90% { opacity: 1; transform: scale(1); }
98%, 100% { opacity: 0; transform: scale(1.18); }
}
@keyframes pass {
0%, 10% { transform: translateX(0); opacity: 0; }
12% { transform: translateX(0); opacity: 1; }
74% { transform: translateX(640%); opacity: 1; }
78%, 100% { transform: translateX(640%); opacity: 0; }
}
@keyframes fill {
0%, 12% { transform: scaleX(0); }
74%, 100% { transform: scaleX(1); }
}
@keyframes verdict {
0%, 76% { background: var(--rust); transform: scale(0.94); }
84% { background: var(--olive); transform: scale(1); }
100% { background: var(--olive); transform: scale(1); }
}
@media (max-width: 380px) {
.plate { padding: 13px; }
.stage { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.item { animation: hold-rm calc(var(--t) * 1.6) ease-in-out infinite; }
.corner { animation: clamp-rm calc(var(--t) * 1.6) ease infinite; }
.sweep { display: none; }
.meter i {
animation: fill-rm calc(var(--t) * 1.6) linear infinite;
transform: scaleX(1);
}
.pip { animation: verdict-rm calc(var(--t) * 1.6) ease infinite; }
@keyframes hold-rm {
0%, 4% { opacity: 1; filter: saturate(1); }
12%, 84% { opacity: 0.68; filter: saturate(0.4); }
95%, 100% { opacity: 1; filter: saturate(1); }
}
@keyframes clamp-rm {
0% { opacity: 0.15; }
7%, 90% { opacity: 1; }
98%, 100% { opacity: 0.15; }
}
@keyframes fill-rm {
0%, 12% { opacity: 0.25; }
74%, 100% { opacity: 1; }
}
@keyframes verdict-rm {
0%, 76% { background: var(--rust); }
84% { background: var(--olive); }
100% { background: var(--olive); }
}
}
</style>
</head>
<body>
<div class="stage">
<div class="plate">
<div class="item">
<div class="thumb"></div>
<div class="lines">
<div class="line a"></div>
<div class="line b"></div>
</div>
</div>
<div class="frame">
<span class="corner tl"></span>
<span class="corner tr"></span>
<span class="corner bl"></span>
<span class="corner br"></span>
</div>
<div class="sweep"></div>
</div>
<div class="meter"><i></i></div>
<div class="status">
<span class="pip"></span>
<span class="label">Held for review</span>
</div>
</div>
</body>
</html>The variant family
Same idea, one axis moved. Compare them side by side before you commit.