Back to the library
Idle — a passing glint
Variant: Passing glint
A specular band crossing a surface for 781ms of a 6.4s loop, and that 12% duty cycle is the whole argument: a sheen that never stops is a skeleton shimmer, and a skeleton shimmer is a promise that the content has not arrived yet. This one has arrived, so the light has to be an event. Wide and weak rather than narrow and bright — the same energy packed into a 10px bar stops reading as light and starts reading as a scanner looking for something. It passes over the label instead of ducking behind it, because light falls on everything printed on a face. Linear across the crossing, since the source and the surface are moving at a constant rate relative to each other and an eased pass puts a hesitation mid-travel that nothing in the geometry accounts for. The band parks fully off-frame either side, so the 88% of the loop it spends resting is genuinely nothing and the seam is never on screen. The one member of this family that cannot sit on paper: a highlight is a surface returning light it was given.
ambientidleloopsweep
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>Idle — a passing glint</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 — 6.4s, of which the light is on the tile for 781ms. That 12%
duty cycle is the entire design: a sheen that runs continuously is a
skeleton shimmer, and a skeleton shimmer means the content has not
arrived yet. This surface has arrived. */
--cycle: 6.4s;
--t: calc(var(--cycle) / var(--speed));
}
* {
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);
}
/* Saturated on purpose, and the one member of this family that cannot sit
on paper: a specular highlight is the surface returning light it was
given, so on something already near white there is nothing to return. */
.tile {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
gap: 9px;
width: min(304px, calc(100% - 34px));
height: clamp(126px, 36vw, 152px);
padding: 0 clamp(18px, 5vw, 24px);
border-radius: calc(16px * var(--round));
background: linear-gradient(150deg, var(--clay), var(--clay-d));
color: var(--ivory);
}
/* Wide and weak rather than narrow and bright. A 42%-wide band at a
quarter opacity reads as light crossing a surface; the same energy
packed into a 10px bar reads as a scanner line looking for something.
It sits above the label rather than under it, because light falls on
everything printed on a face, and a highlight that ducks behind the
type is a decal rather than a reflection. */
.sheen {
position: absolute;
z-index: 2;
top: -40%;
bottom: -40%;
left: 0;
width: 42%;
background: linear-gradient(
90deg,
transparent,
color-mix(in srgb, var(--ivory) 26%, transparent) 50%,
transparent
);
rotate: -18deg;
translate: -150% 0;
animation: pass var(--t) linear infinite;
}
/* The bevel answers the pass. A real highlight lights the edge it crosses,
and adding that costs one opacity envelope — without it the band is an
overlay sliding over the tile rather than light landing on it. */
.rim {
position: absolute;
z-index: 3;
inset: 0;
border: 1px solid var(--ivory);
border-radius: inherit;
opacity: 0.16;
animation: bevel var(--t) linear infinite;
}
/* Linear across the pass, because the light source and the surface are
moving at a constant rate relative to one another and easing would put
a hesitation mid-crossing that nothing in the geometry accounts for.
The band starts and ends fully outside the tile, so the 88% of the loop
it spends parked is genuinely nothing, and the jump back at the seam
happens off-frame. */
@keyframes pass {
0% {
translate: -150% 0;
}
12.2% {
translate: 350% 0;
}
100% {
translate: 350% 0;
}
}
@keyframes bevel {
0% {
opacity: 0.16;
}
6% {
opacity: 0.44;
}
12.2%,
100% {
opacity: 0.16;
}
}
.mark {
width: 24px;
height: 24px;
border-radius: calc(7px * var(--round));
background: color-mix(in srgb, var(--ivory) 82%, transparent);
}
.head {
font-size: clamp(15px, 4.4vw, 18px);
font-weight: 600;
letter-spacing: -0.01em;
}
.sub {
margin-top: 2px;
font-size: clamp(11.5px, 3.3vw, 13px);
color: color-mix(in srgb, var(--ivory) 72%, transparent);
}
@media (prefers-reduced-motion: reduce) {
/* The band parks across the middle of the tile and the light arrives by
fading instead of travelling. The rhythm is kept — mostly nothing,
then a beat of light — because that rhythm, not the crossing, is what
distinguishes a glint from a shimmer. */
.sheen {
translate: 90% 0;
opacity: 0;
animation-name: glow;
animation-duration: calc(var(--t) * 1.6);
animation-timing-function: ease;
}
.rim {
animation-duration: calc(var(--t) * 1.6);
animation-timing-function: ease;
}
@keyframes glow {
0%,
100% {
opacity: 0;
}
6% {
opacity: 1;
}
12.2% {
opacity: 0;
}
}
}
</style>
</head>
<body>
<div
class="tile"
role="img"
aria-label="A clay tile sitting still, crossed once every few seconds by a soft band of light"
>
<div class="sheen" aria-hidden="true"></div>
<div class="rim" aria-hidden="true"></div>
<div class="mark"></div>
<div>
<p class="head">Nothing is happening</p>
<p class="sub">Idle motion — the surface is live, not busy.</p>
</div>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.