Back to the library
Ambient — breathing lattice
Variant: Breathing lattice
A dot lattice whose phase is a function of position — delay is row plus column, times a twenty-fourth of the cycle — so one wavefront crosses the field diagonally instead of thirty-two dots blinking near each other. Position-derived phase is the whole difference between a surface moving and a scatter of independent animations, and it is two custom properties rather than a script. Only opacity and scale animate; the colour shift comes free, since clay at 0.18 over paper is a warm grey and at 0.48 it is clay. The trough never reaches zero, because the lattice is a texture first and a wave second and a card caught mid-lull still has to look like something — but the lull is real: the pass is done by 44% of the cycle and the remainder is stillness, for the same reason a typing indicator rests. The field is masked out over its bottom third rather than stopped short of the copy, so it reads as a surface the text is printed on instead of a component parked behind it.
ambientloopstaggerdot
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 — breathing lattice</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 — the wavefront needs 10 steps to cross the far corner, so at a
twenty-fourth of the cycle a step it clears the field in 42% of the
loop and the dot it started on is already back at rest. */
--cycle: 7.2s;
--t: calc(var(--cycle) / var(--speed));
--_step: calc(var(--t) / 24);
--_dot: 5px;
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}
* {
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);
}
/* Full-bleed, then faded out over the bottom third rather than stopped
short of it. A lattice that ends in a clean line above the copy reads
as a component sitting behind the text; one that thins out reads as a
surface the text happens to be printed on. */
.field {
position: absolute;
inset: clamp(18px, 5vw, 28px);
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-auto-rows: 1fr;
-webkit-mask-image: linear-gradient(var(--slate) 48%, transparent 88%);
mask-image: linear-gradient(var(--slate) 48%, transparent 88%);
}
/* The rows exist only to carry a row index; display: contents hands their
dots straight to the grid, and custom properties inherit through it. */
.row {
display: contents;
}
.row:nth-child(1) {
--_r: 0;
}
.row:nth-child(2) {
--_r: 1;
}
.row:nth-child(3) {
--_r: 2;
}
.row:nth-child(4) {
--_r: 3;
}
.row > i:nth-child(1) {
--_c: 0;
}
.row > i:nth-child(2) {
--_c: 1;
}
.row > i:nth-child(3) {
--_c: 2;
}
.row > i:nth-child(4) {
--_c: 3;
}
.row > i:nth-child(5) {
--_c: 4;
}
.row > i:nth-child(6) {
--_c: 5;
}
.row > i:nth-child(7) {
--_c: 6;
}
.row > i:nth-child(8) {
--_c: 7;
}
/* Phase is a function of position, not a random number: every dot on the
same anti-diagonal fires together, so what crosses the field is one
wavefront rather than thirty-two dots that happen to be near each
other. That is the entire difference between a surface moving and a
scatter of independent blinks. */
.row > i {
place-self: center;
width: var(--_dot);
height: var(--_dot);
border-radius: 50%;
background: var(--clay-d);
opacity: 0.18;
animation: breathe var(--t) var(--ease-in-out) infinite;
animation-delay: calc((var(--_r) + var(--_c)) * var(--_step));
}
/* Only opacity and scale animate; the colour shift comes free. Clay at
0.18 over paper is a warm grey and at 0.48 it is clay, so the crest
reads as light passing over the lattice without a second property being
animated to say so. The trough is 0.18 rather than 0 because the
lattice is a texture first and a wave second — a card caught during the
rest beat still has to look like something. That beat is real, though:
the pass is done by 44% and the remainder is stillness. */
@keyframes breathe {
0%,
100% {
transform: scale(0.68);
opacity: 0.18;
}
20% {
transform: scale(1);
opacity: 0.48;
}
44% {
transform: scale(0.68);
opacity: 0.18;
}
}
.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) {
/* Scale goes, the brightness stays, and the cycle doubles. The diagonal
offsets double with it — that is what keeps this a pass across the
field instead of thirty-two dots fading in unison, which at this size
would be the whole panel flashing. */
.row > i {
animation-name: breathe-dim;
animation-duration: calc(var(--t) * 2);
animation-delay: calc((var(--_r) + var(--_c)) * var(--_step) * 2);
animation-timing-function: ease;
transform: none;
}
@keyframes breathe-dim {
0%,
100% {
opacity: 0.18;
}
20% {
opacity: 0.42;
}
44% {
opacity: 0.18;
}
}
}
</style>
</head>
<body>
<div class="panel">
<div class="field" aria-hidden="true">
<div class="row"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div class="row"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div class="row"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div class="row"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
</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.