Back to the library
Ambient — hatched drift
Variant: Hatched drift
A texture rather than a light: 45° rules at a 9px pitch creeping about two pixels a second under a soft mask. The travel is exactly the pattern’s horizontal period — the perpendicular pitch times root two, which is where the 1.414214 comes from — so the last frame is pixel-identical to the first and a loop this slow has no seam to catch. Linear, because a texture that eases is a texture visibly sliding. The test it has to pass is that you cannot say which way it was going a moment ago, which is why the contrast is this low and the pitch this small. Reach for it on a large empty surface where a gradient would read as a mood and a grid would read as a chart.
ambientloopsweep
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>Ambient — hatched drift</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 — one pitch crossed per cycle, which works out at about two
pixels a second. Slow enough that you cannot say which way it was
going a moment ago, which is the test an ambient texture has to pass. */
--cycle: 6.4s;
--t: calc(var(--cycle) / var(--speed));
--_pitch: 9px;
}
* {
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);
}
.panel {
position: relative;
overflow: hidden;
width: min(392px, calc(100% - 26px));
height: clamp(150px, 46vw, 214px);
border: 1px solid var(--oat);
border-radius: calc(16px * var(--round));
background: var(--paper);
}
/* Inset past the panel on every side, so the travel never drags the
pattern's own edge into frame. The mask is what keeps this a texture
rather than wallpaper: full strength through the upper right, gone by
the lower left, so the hatch never announces where it stops. */
.hatch {
position: absolute;
inset: -28px;
background: repeating-linear-gradient(
45deg,
color-mix(in srgb, var(--clay) 30%, transparent) 0 1.2px,
transparent 1.2px var(--_pitch)
);
-webkit-mask-image: radial-gradient(78% 104% at 66% 22%, var(--slate) 0%, transparent 100%);
mask-image: radial-gradient(78% 104% at 66% 22%, var(--slate) 0%, transparent 100%);
animation: drift var(--t) linear infinite;
}
/* Exactly one period, and the number is not a taste decision: the rules
sit at 45 degrees, so the pattern's horizontal period is the
perpendicular pitch times root two. Travel that and the last frame is
pixel-identical to the first, which is the only way a loop this slow
can have no seam in it. Linear, because a texture that eases is a
texture visibly sliding. */
@keyframes drift {
to {
translate: calc(var(--_pitch) * 1.414214) 0;
}
}
.copy {
position: absolute;
right: clamp(16px, 4.6vw, 24px);
bottom: clamp(14px, 4.2vw, 22px);
left: clamp(16px, 4.6vw, 24px);
}
.head {
font-size: clamp(15px, 4.4vw, 19px);
font-weight: 600;
letter-spacing: -0.01em;
}
.sub {
margin-top: 3px;
font-size: clamp(11.5px, 3.3vw, 13px);
color: color-mix(in srgb, var(--slate) 55%, transparent);
}
@media (prefers-reduced-motion: reduce) {
/* Travel out, weight in. The hatch fades between full and just under
half over fifteen seconds — far too slow to read as a pulse, which is
the point, since a fast blink is its own hazard for exactly the people
who asked for less motion. */
.hatch {
animation-name: settle;
animation-duration: calc(var(--t) * 2.4);
animation-timing-function: ease;
translate: none;
}
@keyframes settle {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.42;
}
}
}
</style>
</head>
<body>
<div class="panel">
<div class="hatch" aria-hidden="true"></div>
<div class="copy">
<p class="head">Everything is quiet</p>
<p class="sub">Ambient motion. Nothing here reports state.</p>
</div>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.