Back to the library
Ember charge hold
Variant: Ease-out
A hold-to-arm control that idles as a dim banked dot, fills its ring slowly, then catches: the core brightens and the ring flashes through in a fraction of the time the fill took. Use it as the loop-preview for a press-and-hold destructive or high-commitment action, where the long charge is the affordance and the ignition is the confirmation. The fill runs on a strong ease-out so the ring commits immediately on press and eases into the threshold, which is what makes the late flash read as a separate event rather than the tail of the same one.
holdconfirmloaderringstate
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>Ember charge hold — eased</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.4s; /* the authored master loop */
--t: calc(var(--cycle) / var(--speed));
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-accent: cubic-bezier(0.23, 1, 0.32, 1);
--_ring: 226; /* stroke-dasharray of the r=36 arc, in px */
--_glow: calc(0.9s / var(--speed));
}
* { 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);
}
.card {
width: min(300px, 88vw);
padding: clamp(18px, 5vw, 26px);
border-radius: calc(18px * var(--round));
background: var(--paper);
border: 1px solid var(--oat);
display: grid;
justify-items: center;
gap: clamp(12px, 4vw, 18px);
}
.dial {
position: relative;
width: clamp(96px, 30vw, 118px);
aspect-ratio: 1;
display: grid;
place-items: center;
}
svg { width: 100%; height: 100%; display: block; overflow: visible; }
.track {
fill: none;
stroke: var(--oat);
stroke-width: 5;
}
.arc {
fill: none;
stroke: var(--clay);
stroke-width: 5;
stroke-linecap: round;
stroke-dasharray: var(--_ring);
stroke-dashoffset: var(--_ring);
transform: rotate(-90deg);
transform-origin: 50% 50%;
animation: charge var(--t) var(--ease-accent) infinite;
}
/* Flash sweeps the same path a second time, faster — the ignition. */
.flare {
fill: none;
stroke: var(--rust);
stroke-width: 5;
stroke-linecap: round;
stroke-dasharray: 40 var(--_ring);
stroke-dashoffset: var(--_ring);
opacity: 0;
transform: rotate(-90deg);
transform-origin: 50% 50%;
animation: flare var(--t) linear infinite;
}
.core {
position: absolute;
width: 34%;
aspect-ratio: 1;
border-radius: 50%;
background: var(--clay-d);
opacity: 0.32;
transform: scale(0.92);
animation: core var(--t) var(--ease-out) infinite;
}
.halo {
position: absolute;
width: 34%;
aspect-ratio: 1;
border-radius: 50%;
background: var(--clay);
opacity: 0;
transform: scale(0.95);
animation: halo var(--t) var(--ease-out) infinite;
}
.label {
font-size: clamp(11px, 3.4vw, 12.5px);
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--slate);
opacity: 0.55;
position: relative;
height: 1.2em;
width: 100%;
text-align: center;
}
.label span {
position: absolute;
inset: 0;
}
.l-hold { animation: swapOut var(--t) var(--ease-out) infinite; }
.l-lit { color: var(--rust); opacity: 0; animation: swapIn var(--t) var(--ease-out) infinite; }
/* 0–64% charge, 64–74% ignition, then hold and reset. */
@keyframes charge {
0% { stroke-dashoffset: var(--_ring); }
64%, 88% { stroke-dashoffset: 0; }
97%, 100% { stroke-dashoffset: var(--_ring); }
}
@keyframes flare {
0%, 64% { stroke-dashoffset: var(--_ring); opacity: 0; }
66% { opacity: 1; }
76% { stroke-dashoffset: calc(var(--_ring) * -1); opacity: 1; }
80%, 100% { stroke-dashoffset: calc(var(--_ring) * -1); opacity: 0; }
}
@keyframes core {
0%, 8% { opacity: 0.3; transform: scale(0.92); }
60% { opacity: 0.5; transform: scale(0.96); }
66% { opacity: 1; transform: scale(1.02); }
88% { opacity: 0.95; transform: scale(1); }
100% { opacity: 0.3; transform: scale(0.92); }
}
@keyframes halo {
0%, 63% { opacity: 0; transform: scale(0.95); }
68% { opacity: 0.34; transform: scale(1.7); }
82%, 100% { opacity: 0; transform: scale(2); }
}
@keyframes swapOut {
0%, 60% { opacity: 0.55; }
67%, 92% { opacity: 0; }
100% { opacity: 0.55; }
}
@keyframes swapIn {
0%, 62% { opacity: 0; }
70%, 90% { opacity: 1; }
96%, 100% { opacity: 0; }
}
@media (max-width: 380px) {
.card { padding: 16px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
/* Movement drops; the charge-then-catch brightness still cycles, slowed ~1.8x. */
.arc { animation: none; stroke-dashoffset: 0; opacity: 0.35; }
.flare { animation: none; opacity: 0; }
.halo { animation: none; opacity: 0; }
.core {
transform: scale(1);
animation: coreCalm calc(var(--t) * 1.8) var(--ease-out) infinite;
}
.l-hold { animation: swapOut calc(var(--t) * 1.8) var(--ease-out) infinite; }
.l-lit { animation: swapIn calc(var(--t) * 1.8) var(--ease-out) infinite; }
@keyframes coreCalm {
0%, 60% { opacity: 0.32; }
70%, 90% { opacity: 0.9; }
100% { opacity: 0.32; }
}
}
</style>
</head>
<body>
<div class="card">
<div class="dial">
<svg viewBox="0 0 100 100" aria-hidden="true">
<circle class="track" cx="50" cy="50" r="36" />
<circle class="arc" cx="50" cy="50" r="36" />
<circle class="flare" cx="50" cy="50" r="36" />
</svg>
<div class="halo"></div>
<div class="core"></div>
</div>
<div class="label">
<span class="l-hold">Hold to arm</span>
<span class="l-lit">Armed</span>
</div>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.