Back to the library
Manifest scan, held flag
Variant: Held flag
Same scan and same detection, but the flag holds for most of the cycle before clearing — the sweep is quick, then the result sits still long enough to read the footer copy. Use it where the anomaly is the point and the user needs time to notice it, such as a dashboard tile glanced at in passing. The scan gradient completes early in the loop and then waits, which is what makes the long hold read as a verdict rather than a stall.
auditscanstatusloophold
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 — held flag</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: 4.6s;
--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;
}
/* Sweep finishes inside the first third; the rest of the loop is the hold. */
@keyframes sweep {
0% { transform: translateY(-40%); opacity: 0; }
4% { opacity: 1; }
22% { opacity: 1; }
28% { transform: translateY(285%); opacity: 0; }
100% { transform: translateY(285%); opacity: 0; }
}
@keyframes flag {
0%, 20% { background: color-mix(in oklab, var(--oat) 26%, var(--paper)); transform: translateX(0); }
26% { background: color-mix(in oklab, var(--rust) 16%, var(--paper)); transform: translateX(2.2%); }
90% { 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%, 20% { border-color: color-mix(in oklab, var(--slate) 24%, var(--paper)); transform: scale(0.97); }
26% { border-color: var(--rust); transform: scale(1); }
90% { 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%, 20% { background: color-mix(in oklab, var(--slate) 22%, var(--paper)); }
26%, 90% { background: var(--rust); }
100% { background: color-mix(in oklab, var(--slate) 22%, var(--paper)); }
}
@keyframes foot {
0%, 20% { opacity: 0.45; color: color-mix(in oklab, var(--slate) 50%, var(--paper)); }
28%, 92% { opacity: 1; color: var(--rust); }
100% { opacity: 0.45; color: color-mix(in oklab, var(--slate) 50%, var(--paper)); }
}
@keyframes pip {
0%, 18% { background: var(--olive); }
28%, 90% { 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.8 / var(--speed));
}
@keyframes flag {
0%, 20% { background: color-mix(in oklab, var(--oat) 26%, var(--paper)); transform: none; }
30%, 90% { 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%, 20% { border-color: color-mix(in oklab, var(--slate) 24%, var(--paper)); transform: none; }
30%, 90% { 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.