Arrival place setting

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>Arrival place setting — bold</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.8s;
  --t: calc(var(--cycle) / var(--speed));

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* Weight tokens — the only thing that moves across this family. */
  --_stroke: 3px;
  --_marker-r: 9.5%;
  --_travel: 26%;
  --_ink: 1;
  --_glow: 0.4;
  --_ring-ink: 0.9;
  --_stagger: calc(0.06s / var(--speed));
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--ivory);
  color: var(--slate);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.card {
  width: min(400px, 92vw);
  padding: clamp(18px, 5vw, 28px);
  border-radius: calc(18px * var(--round));
  background: var(--paper);
  border: 1px solid var(--oat);
  display: grid;
  justify-items: center;
  gap: clamp(12px, 3.5vw, 18px);
}

.stage {
  position: relative;
  width: min(168px, 46vw);
  aspect-ratio: 1;
}

.hearth {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26%;
  aspect-ratio: 1;
  margin: -13% 0 0 -13%;
  border-radius: 50%;
  background: var(--clay);
  opacity: var(--_ink);
  animation: breathe var(--t) var(--ease-out) infinite;
}

.halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 66%;
  aspect-ratio: 1;
  margin: -33% 0 0 -33%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--clay) 0%, transparent 70%);
  opacity: var(--_glow);
  animation: halo var(--t) var(--ease-out) infinite;
}

.ring {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: var(--_stroke) solid var(--oat);
  opacity: var(--_ring-ink);
}

.seat {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--_a));
}

/* Filled rather than outlined: at this size a ring of hollow markers
   starts to compete with the centre for attention. */
.seat i {
  position: absolute;
  display: block;
  width: calc(var(--_marker-r) * 2);
  aspect-ratio: 1;
  left: calc(var(--_marker-r) * -1);
  border-radius: 50%;
  background: var(--clay-d);
  top: -38%;
  opacity: 0;
  animation: lay var(--t) var(--ease-out) infinite;
  animation-delay: calc(var(--_i) * var(--_stagger));
}

.seat b {
  position: absolute;
  display: block;
  left: calc(var(--_stroke) / -2);
  top: -26%;
  width: var(--_stroke);
  height: 12%;
  background: var(--olive);
  opacity: 0;
  animation: layline var(--t) var(--ease-out) infinite;
  animation-delay: calc(var(--_i) * var(--_stagger));
}

.seat:nth-child(1) { --_a: 0deg;   --_i: 0; }
.seat:nth-child(2) { --_a: 60deg;  --_i: 1; }
.seat:nth-child(3) { --_a: 120deg; --_i: 2; }
.seat:nth-child(4) { --_a: 180deg; --_i: 3; }
.seat:nth-child(5) { --_a: 240deg; --_i: 4; }
.seat:nth-child(6) { --_a: 300deg; --_i: 5; }

@keyframes lay {
  0%   { opacity: 0; transform: translateY(var(--_travel)) scale(0.94); }
  14%  { opacity: var(--_ink); transform: translateY(0) scale(1); }
  72%  { opacity: var(--_ink); transform: translateY(0) scale(1); }
  84%  { opacity: 0; transform: translateY(0) scale(0.97); }
  100% { opacity: 0; transform: translateY(var(--_travel)) scale(0.94); }
}

@keyframes layline {
  0%   { opacity: 0; transform: translateY(var(--_travel)) scaleY(0.6); }
  14%  { opacity: calc(var(--_ink) * 0.85); transform: translateY(0) scaleY(1); }
  72%  { opacity: calc(var(--_ink) * 0.85); transform: translateY(0) scaleY(1); }
  84%  { opacity: 0; transform: translateY(0) scaleY(1); }
  100% { opacity: 0; transform: translateY(var(--_travel)) scaleY(0.6); }
}

@keyframes breathe {
  0%   { opacity: calc(var(--_ink) * 0.7); transform: scale(0.93); }
  50%  { opacity: var(--_ink); transform: scale(1); }
  100% { opacity: calc(var(--_ink) * 0.7); transform: scale(0.93); }
}

@keyframes halo {
  0%   { opacity: calc(var(--_glow) * 0.45); transform: scale(0.88); }
  50%  { opacity: var(--_glow); transform: scale(1.08); }
  100% { opacity: calc(var(--_glow) * 0.45); transform: scale(0.88); }
}

.label {
  font-size: clamp(11.5px, 3.2vw, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  opacity: 0.68;
}

@media (max-width: 380px) {
  .card { padding: 16px; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .seat i, .seat b { opacity: var(--_ink); animation: none; transform: none; }
  .seat b { opacity: calc(var(--_ink) * 0.85); }
  .hearth {
    animation: dim calc(var(--t) * 2) var(--ease-out) infinite;
    transform: none;
  }
  .halo {
    animation: dim-soft calc(var(--t) * 2) var(--ease-out) infinite;
    transform: none;
  }
  @keyframes dim {
    0%, 100% { opacity: calc(var(--_ink) * 0.65); }
    50%      { opacity: var(--_ink); }
  }
  @keyframes dim-soft {
    0%, 100% { opacity: calc(var(--_glow) * 0.45); }
    50%      { opacity: var(--_glow); }
  }
}
</style>
</head>
<body>
  <div class="card">
    <div class="stage">
      <div class="halo"></div>
      <div class="ring"></div>
      <div class="hearth"></div>
      <div class="seat"><i></i><b></b></div>
      <div class="seat"><i></i><b></b></div>
      <div class="seat"><i></i><b></b></div>
      <div class="seat"><i></i><b></b></div>
      <div class="seat"><i></i><b></b></div>
      <div class="seat"><i></i><b></b></div>
    </div>
    <div class="label">Preparing your table</div>
  </div>
</body>
</html>

The variant family

Same idea, one axis moved. Compare them side by side before you commit.