Back to the library
Pour fill confirm
Variant: Ease-in-out
An ease-in-out rise: the level starts slow, crosses the middle of its travel fast, and eases into place. This is the sibling for when the fill is a morph between two committed levels rather than an entrance — it reads as a controlled transfer with weight at both ends, at the cost of a slightly softer first moment. Same vessel, same 3.2s cycle, same hold; only the curve differs.
progressstatusfillmorphloop
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>Pour fill confirm — ease-in-out</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;
--t: calc(var(--cycle) / var(--speed));
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
/* File-specific: the level line trails the body by one small beat. */
--_lag: calc(60ms / var(--speed));
--_label-in: calc(220ms / 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;
-webkit-font-smoothing: antialiased;
}
.card {
width: min(380px, 90vw);
padding: clamp(16px, 5vw, 24px);
background: var(--paper);
border: 1px solid var(--oat);
border-radius: calc(14px * var(--round));
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: clamp(14px, 4vw, 20px);
}
.vessel {
position: relative;
width: clamp(56px, 17vw, 68px);
height: clamp(76px, 23vw, 92px);
border-radius: calc(10px * var(--round)) calc(10px * var(--round)) calc(26px * var(--round)) calc(26px * var(--round));
background: var(--ivory);
border: 1.5px solid var(--oat);
overflow: hidden;
flex: none;
}
.body-fill,
.level {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100%;
}
.body-fill {
background: linear-gradient(180deg, var(--clay) 0%, var(--clay-d) 100%);
clip-path: inset(100% 0 0 0);
animation: rise var(--t) var(--ease-in-out) infinite;
}
.level {
background: linear-gradient(180deg, color-mix(in oklch, var(--paper) 62%, var(--clay)) 0 2.5px, transparent 2.5px);
clip-path: inset(100% 0 0 0);
animation: rise var(--t) var(--ease-in-out) var(--_lag) infinite;
}
@keyframes rise {
0% { clip-path: inset(100% 0 0 0); }
46% { clip-path: inset(22% 0 0 0); }
82% { clip-path: inset(22% 0 0 0); }
100% { clip-path: inset(100% 0 0 0); }
}
.copy { min-width: 0; }
.title {
font-size: clamp(13px, 3.6vw, 15px);
font-weight: 550;
letter-spacing: 0.01em;
margin: 0 0 6px;
}
.sub {
font-size: clamp(11px, 3.1vw, 12.5px);
line-height: 1.35;
margin: 0;
color: color-mix(in oklch, var(--slate) 55%, var(--ivory));
}
.ticks {
margin-top: 12px;
display: flex;
gap: 6px;
}
.ticks i {
display: block;
width: clamp(16px, 5vw, 22px);
height: 3px;
border-radius: 999px;
background: var(--oat);
transform-origin: left center;
transform: scaleX(0.35);
animation: tick var(--t) var(--ease-in-out) infinite;
}
.ticks i:nth-child(1) { animation-delay: calc(0ms / var(--speed)); }
.ticks i:nth-child(2) { animation-delay: calc(90ms / var(--speed)); }
.ticks i:nth-child(3) { animation-delay: calc(180ms / var(--speed)); }
@keyframes tick {
0% { transform: scaleX(0.35); background: var(--oat); }
40% { transform: scaleX(1); background: var(--olive); }
82% { transform: scaleX(1); background: var(--olive); }
100% { transform: scaleX(0.35); background: var(--oat); }
}
.mark {
display: inline-block;
margin-left: 6px;
color: var(--olive);
opacity: 0;
transform: translateY(2px);
animation: mark var(--t) var(--ease-out) var(--_label-in) infinite;
}
@keyframes mark {
0%, 14% { opacity: 0; transform: translateY(2px); }
40%, 82% { opacity: 1; transform: translateY(0); }
92%, 100% { opacity: 0; transform: translateY(0); }
}
@media (max-width: 380px) {
.card { padding: 14px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.body-fill {
clip-path: inset(22% 0 0 0);
animation: hold-breathe calc(var(--cycle) * 2.2 / var(--speed)) ease-in-out infinite;
}
.level {
clip-path: inset(22% 0 0 0);
animation: hold-breathe calc(var(--cycle) * 2.2 / var(--speed)) ease-in-out calc(60ms / var(--speed)) infinite;
}
.ticks i {
transform: scaleX(1);
background: var(--olive);
animation: none;
}
.mark { opacity: 1; transform: none; animation: none; }
@keyframes hold-breathe {
0%, 100% { opacity: 0.72; }
50% { opacity: 1; }
}
}
</style>
</head>
<body>
<div class="card">
<div class="vessel" aria-hidden="true">
<div class="body-fill"></div>
<div class="level"></div>
</div>
<div class="copy">
<p class="title">Archive synced<span class="mark">✓</span></p>
<p class="sub">Local changes written to the vault.</p>
<div class="ticks" aria-hidden="true"><i></i><i></i><i></i></div>
</div>
</div>
</body>
</html>The variant family
Same idea, one axis moved. Compare them side by side before you commit.