Animations.
Back to the library

Ember charge hold, snapped catch

Variant: Snap settle

The same dial with a snap curve: the fill leaves hard, coasts through the middle, and arrives at the threshold with a small settle, so the ignition reads as a mechanism catching rather than a meter topping out. Reach for this on a playful or brand-forward confirmation where a little physical character is wanted. Nothing overshoots geometrically — the settle is carried by the core's scale, which is capped at 1.06 so it cannot clip the ring.

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" />
<meta name="animation-knobs" content="overshoot: ok; speed: 0.7-1.3" />
<title>Ember charge hold — snapped catch</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);
  /* Springy: leaves hard, coasts, settles. Applied only where nothing can clip. */
  --ease-accent: cubic-bezier(0.16, 1.1, 0.3, 1);

  --_ring: 226; /* stroke-dasharray of the r=36 arc, in px */
}

* { 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: coreSnap var(--t) var(--ease-accent) 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-accent) 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-accent) infinite; }
.l-lit  { color: var(--rust); opacity: 0; animation: swapIn var(--t) var(--ease-accent) 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; }
}

/* Settle lives here, capped at 1.06 so the core never reaches the ring. */
@keyframes coreSnap {
  0%, 8%    { opacity: 0.3; transform: scale(0.92); }
  60%       { opacity: 0.5; transform: scale(0.96); }
  66%       { opacity: 1; transform: scale(1.06); }
  74%       { opacity: 1; transform: scale(0.99); }
  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.

Ember charge hold

Ease-out

Ember charge hold, held creep

Held creep

Ember charge hold, linear charge

Linear