R to re-roll · Esc to reset

Partition panels settle

Variant: Single beat

A row of soft textile-like partition panels tilts open to reveal the content behind them, used as an entrance for a filtered list or a newly loaded panel group. This single-beat version moves all four panels on one shared 260ms swing so the reveal reads as one gesture rather than a sequence. The transform origin sits on each panel's inner edge so they hinge like a folding screen instead of sliding, and the loop holds closed briefly before repeating so the eye can register the closed state.

entrancerevealpanelstaggerscreen

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>Partition panels settle — single beat</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: 3.2s; /* the authored master loop */
  --t: calc(var(--cycle) / var(--speed));

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

* { box-sizing: border-box; }

html, body { margin: 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);
}

.stage {
  width: min(420px, 92vw);
  padding: clamp(14px, 4vw, 22px);
  background: var(--paper);
  border: 1px solid var(--oat);
  border-radius: calc(14px * var(--round));
}

.caption {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(11px, 3vw, 12.5px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--slate) 55%, var(--ivory));
  margin-bottom: clamp(10px, 3vw, 14px);
}

.caption .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clay);
  animation: pip var(--t) linear infinite;
}

.screen {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(5px, 1.6vw, 8px);
  height: clamp(108px, 30vw, 140px);
  perspective: 620px;
}

/* Content sitting behind the partition — it is what the panels uncover. */
.bay {
  position: relative;
  overflow: hidden;
  border-radius: calc(9px * var(--round));
  background: color-mix(in oklab, var(--ivory) 78%, var(--oat));
}

.bay::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 16%;
  height: 34%;
  border-radius: calc(5px * var(--round));
  background: color-mix(in oklab, var(--olive) 42%, var(--paper));
}

.bay::before {
  content: '';
  position: absolute;
  left: 14%;
  top: 18%;
  width: 42%;
  height: 12%;
  border-radius: 999px;
  background: color-mix(in oklab, var(--slate) 22%, var(--ivory));
}

.panel {
  position: absolute;
  inset: 0;
  border-radius: calc(9px * var(--round));
  background:
    repeating-linear-gradient(
      90deg,
      color-mix(in oklab, var(--clay) 88%, var(--paper)) 0 3px,
      color-mix(in oklab, var(--clay-d) 82%, var(--paper)) 3px 6px
    );
  transform-origin: left center;
  will-change: transform, opacity;
  animation: fold var(--t) var(--ease-out) infinite;
}

/* Each panel hinges on the edge it shares with its neighbour, so the row
   reads as one folding screen rather than four sliding tiles. */
.bay:nth-child(even) .panel { transform-origin: right center; }

@keyframes fold {
  0%           { transform: rotateY(0deg) scale(1); opacity: 1; }
  /* 260ms of a 3.2s loop = 8.125% — the whole row swings on one beat. */
  8.125%, 78%  { transform: rotateY(-72deg) scale(0.97); opacity: 0; }
  86%          { transform: rotateY(0deg) scale(1); opacity: 1; }
  100%         { transform: rotateY(0deg) scale(1); opacity: 1; }
}

@keyframes pip {
  0%, 6%   { opacity: 1; }
  40%      { opacity: 0.3; }
  78%, 100% { opacity: 1; }
}

@media (max-width: 380px) {
  .stage { padding: 12px; }
  .caption { margin-bottom: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .panel {
    /* Movement out, meaning kept: the panels dissolve in place on a slower clock. */
    animation: fade calc(var(--cycle) * 2 / var(--speed)) var(--ease-out) infinite;
    transform: none;
  }
  .caption .dot {
    animation: pip calc(var(--cycle) * 2 / var(--speed)) linear infinite;
  }
  @keyframes fade {
    0%          { opacity: 1; }
    10%, 78%    { opacity: 0.12; }
    88%, 100%   { opacity: 1; }
  }
}
</style>
</head>
<body>
  <div class="stage">
    <div class="caption"><span class="dot"></span>Workspace ready</div>
    <div class="screen">
      <div class="bay"><div class="panel"></div></div>
      <div class="bay"><div class="panel"></div></div>
      <div class="bay"><div class="panel"></div></div>
      <div class="bay"><div class="panel"></div></div>
    </div>
  </div>
</body>
</html>

The variant family

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