Back to the library
Manifest scan, slow beat
Variant: Slow beat
The same manifest integrity check, paced as a deliberate patrol rather than a quick pass: the scan line takes noticeably longer to cross the rows and the unlisted record surfaces late in the sweep. Use it when the check is a long-running background job and a fast cycle would misrepresent the work. Only the clock changes — geometry, easing and keyframe percentages are identical to the single-beat sibling, so the detection still lands at the same point in the pass.
auditscanstatuslooplist
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>Manifest scan — 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.4s;
--t: calc(var(--cycle) / var(--speed));
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
* { box-sizing: border-box; }
body {
margin: 0;
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);
}
.panel {
position: relative;
width: min(360px, 90vw);
padding: clamp(12px, 3.4vw, 18px);
background: var(--paper);
border: 1px solid var(--oat);
border-radius: calc(12px * var(--round));
overflow: hidden;
}
.head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: clamp(11px, 2.9vw, 12.5px);
letter-spacing: 0.06em;
text-transform: uppercase;
color: color-mix(in oklab, var(--slate) 55%, var(--paper));
margin-bottom: clamp(10px, 2.6vw, 14px);
}
.pip {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--olive);
animation: pip var(--t) linear infinite;
}
.rows {
position: relative;
display: grid;
gap: clamp(7px, 1.9vw, 9px);
}
.row {
position: relative;
display: flex;
align-items: center;
gap: 9px;
height: clamp(20px, 5.4vw, 24px);
padding: 0 8px;
border-radius: calc(6px * var(--round));
background: color-mix(in oklab, var(--oat) 26%, var(--paper));
}
.bar {
height: 5px;
border-radius: 999px;
background: color-mix(in oklab, var(--slate) 22%, var(--paper));
}
.tick {
width: 10px;
height: 10px;
flex: 0 0 auto;
border-radius: 50%;
border: 1.5px solid color-mix(in oklab, var(--slate) 24%, var(--paper));
}
/* The unlisted row: identical to its neighbours until the scan reaches it. */
.row.stow {
background: color-mix(in oklab, var(--oat) 26%, var(--paper));
animation: flag var(--t) var(--ease-out) infinite;
}
.row.stow .tick {
animation: flagtick var(--t) var(--ease-out) infinite;
}
.row.stow .bar {
animation: flagbar var(--t) var(--ease-out) infinite;
}
.scan {
position: absolute;
left: -6%;
right: -6%;
top: 0;
height: 34%;
pointer-events: none;
background: linear-gradient(
to bottom,
transparent 0%,
color-mix(in oklab, var(--clay) 12%, transparent) 62%,
var(--clay) 100%
);
animation: sweep var(--t) linear infinite;
}
.foot {
margin-top: clamp(10px, 2.6vw, 13px);
font-size: clamp(11px, 2.8vw, 12px);
color: color-mix(in oklab, var(--slate) 50%, var(--paper));
animation: foot var(--t) var(--ease-out) infinite;
}
/* Percentages match the single-beat sibling exactly; only --cycle differs. */
@keyframes sweep {
0% { transform: translateY(-40%); opacity: 0; }
8% { opacity: 1; }
62% { opacity: 1; }
72% { transform: translateY(285%); opacity: 0; }
100% { transform: translateY(285%); opacity: 0; }
}
@keyframes flag {
0%, 58% { background: color-mix(in oklab, var(--oat) 26%, var(--paper)); transform: translateX(0); }
66% { background: color-mix(in oklab, var(--rust) 16%, var(--paper)); transform: translateX(2.2%); }
86% { background: color-mix(in oklab, var(--rust) 14%, var(--paper)); transform: translateX(2.2%); }
100% { background: color-mix(in oklab, var(--oat) 26%, var(--paper)); transform: translateX(0); }
}
@keyframes flagtick {
0%, 58% { border-color: color-mix(in oklab, var(--slate) 24%, var(--paper)); transform: scale(0.97); }
66% { border-color: var(--rust); transform: scale(1); }
86% { border-color: var(--rust); transform: scale(1); }
100% { border-color: color-mix(in oklab, var(--slate) 24%, var(--paper)); transform: scale(0.97); }
}
@keyframes flagbar {
0%, 58% { background: color-mix(in oklab, var(--slate) 22%, var(--paper)); }
66%, 86% { background: var(--rust); }
100% { background: color-mix(in oklab, var(--slate) 22%, var(--paper)); }
}
@keyframes foot {
0%, 58% { opacity: 0.45; color: color-mix(in oklab, var(--slate) 50%, var(--paper)); }
68%, 88% { opacity: 1; color: var(--rust); }
100% { opacity: 0.45; color: color-mix(in oklab, var(--slate) 50%, var(--paper)); }
}
@keyframes pip {
0%, 55% { background: var(--olive); }
68%, 86% { background: var(--rust); }
100% { background: var(--olive); }
}
@media (max-width: 380px) {
.panel { padding: 11px; }
.row { padding: 0 6px; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
/* Keep the detection legible as a colour cycle; drop the travelling line. */
.scan { animation: none; opacity: 0; }
.row.stow,
.row.stow .tick,
.row.stow .bar,
.foot,
.pip {
animation-duration: calc(var(--cycle) * 1.6 / var(--speed));
}
@keyframes flag {
0%, 50% { background: color-mix(in oklab, var(--oat) 26%, var(--paper)); transform: none; }
70%, 88% { background: color-mix(in oklab, var(--rust) 14%, var(--paper)); transform: none; }
100% { background: color-mix(in oklab, var(--oat) 26%, var(--paper)); transform: none; }
}
@keyframes flagtick {
0%, 50% { border-color: color-mix(in oklab, var(--slate) 24%, var(--paper)); transform: none; }
70%, 88% { border-color: var(--rust); transform: none; }
100% { border-color: color-mix(in oklab, var(--slate) 24%, var(--paper)); transform: none; }
}
}
</style>
</head>
<body>
<div class="panel">
<div class="head">
<span>Manifest check</span>
<span class="pip" aria-hidden="true"></span>
</div>
<div class="rows">
<div class="row"><span class="tick"></span><span class="bar" style="width: 54%"></span></div>
<div class="row"><span class="tick"></span><span class="bar" style="width: 70%"></span></div>
<div class="row"><span class="tick"></span><span class="bar" style="width: 44%"></span></div>
<div class="row stow"><span class="tick"></span><span class="bar" style="width: 62%"></span></div>
<div class="row"><span class="tick"></span><span class="bar" style="width: 50%"></span></div>
<div class="scan" aria-hidden="true"></div>
</div>
<div class="foot">1 record not on the manifest</div>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.