AI CSS Animations

Agent Budget Limit Reached

A run budget meter climbs turn by turn toward its $5.00 cap, warming from the accent to amber. At the cap the bar flashes, the run line swaps to Paused and a Raise limit to $10 button rises in.

Also known as: spend limit reached ui, usage cap paused, ai budget meter.

Run budget
Refactoring the billing module Paused at your $5.00 limit
Cap set for this run

HTML

<div class="aia-budget-limit-reached" role="status" aria-label="Run paused at its 5 dollar spend limit">
  <div class="aia-budget-limit-reached-head">
    <span>Run budget</span>
    <span class="aia-budget-limit-reached-amt" aria-hidden="true"><span class="aia-budget-limit-reached-usd"></span> / $5.00</span>
  </div>
  <div class="aia-budget-limit-reached-bar" aria-hidden="true"></div>
  <div class="aia-budget-limit-reached-state">
    <span class="aia-budget-limit-reached-run"><i aria-hidden="true"></i>Refactoring the billing module</span>
    <span class="aia-budget-limit-reached-pause"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6.5v11M15 6.5v11"/></svg>Paused at your $5.00 limit</span>
  </div>
  <div class="aia-budget-limit-reached-actions">
    <span class="aia-budget-limit-reached-note">Cap set for this run</span>
    <button type="button" class="aia-budget-limit-reached-end">End run</button>
    <button type="button" class="aia-budget-limit-reached-raise">Raise limit to $10</button>
  </div>
</div>

CSS

@property --aia-budget-limit-reached-u {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.18;
}
@property --aia-budget-limit-reached-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --aia-budget-limit-reached-cents {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --aia-budget-limit-reached-dol {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --aia-budget-limit-reached-rem {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.aia-budget-limit-reached {
  --c: var(--aia-color, #7c5cff);
  font-size: var(--aia-size, 16px);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.4;
  position: relative;
  box-sizing: border-box;
  padding: 0.9em 1em;
  border-radius: 0.9em;
  background: color-mix(in srgb, currentColor 3%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 11%, transparent), 0 0.1em 0.2em color-mix(in srgb, currentColor 4%, transparent), 0 0.9em 2em -1.1em rgb(0 0 0 / 0.3);
  --d: 8s;
  --u: var(--aia-budget-limit-reached-u);
  --p: var(--aia-budget-limit-reached-p);
  --w: clamp(0, (var(--u) - 0.75) * 5, 1);
  width: 20em;
  animation: aia-budget-limit-reached-clock var(--d) cubic-bezier(0.3, 0, 0.2, 1) infinite;
}
.aia-budget-limit-reached > * {
  animation: aia-budget-limit-reached-fade var(--d) linear infinite;
}
.aia-budget-limit-reached-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85em;
  font-weight: 600;
}
.aia-budget-limit-reached-amt {
  color: color-mix(in srgb, currentColor 50%, transparent);
  font: 500 0.95em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-budget-limit-reached-usd {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  --aia-budget-limit-reached-cents: calc(var(--u) * 500);
  --aia-budget-limit-reached-dol: calc(var(--aia-budget-limit-reached-cents) / 100 - 0.5);
  --aia-budget-limit-reached-rem: calc(var(--aia-budget-limit-reached-cents) - var(--aia-budget-limit-reached-dol) * 100);
  counter-reset: dol var(--aia-budget-limit-reached-dol) rem var(--aia-budget-limit-reached-rem);
}
.aia-budget-limit-reached-head .aia-budget-limit-reached-usd { color: color-mix(in srgb, #d97706 calc(var(--w) * 84%), color-mix(in srgb, currentColor 90%, transparent)); }
.aia-budget-limit-reached-usd::before { content: "$" counter(dol) "." counter(rem, decimal-leading-zero); }
.aia-budget-limit-reached-bar {
  position: relative;
  height: 0.6em;
  margin-top: 0.6em;
  border-radius: 999em;
  background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 0.1em), color-mix(in srgb, currentColor 14%, transparent) calc(25% - 0.1em) 25%), color-mix(in srgb, currentColor 7%, transparent);
}
.aia-budget-limit-reached-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, #f59e0b calc(var(--w) * 100%), var(--c));
  transform: scaleX(var(--u));
  transform-origin: left;
}
.aia-budget-limit-reached-bar::after {
  content: "";
  position: absolute;
  inset: -0.2em;
  border-radius: inherit;
  box-shadow: 0 0 0 calc(var(--p) * (1 - var(--p)) * 1.2em) color-mix(in srgb, #f59e0b 40%, transparent);
  opacity: calc(var(--p) * (1 - var(--p)) * 4);
}
.aia-budget-limit-reached-state {
  display: grid;
  margin-top: 0.7em;
  font-size: 0.8em;
}
.aia-budget-limit-reached-state > * {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
}
.aia-budget-limit-reached-run {
  color: color-mix(in srgb, currentColor 65%, transparent);
  opacity: calc(1 - clamp(0, var(--p) * 2.5, 1));
  transform: translateY(calc(var(--p) * -0.4em));
}
.aia-budget-limit-reached-run i {
  box-sizing: border-box;
  width: 0.95em;
  height: 0.95em;
  border-radius: 50%;
  border: 0.15em solid color-mix(in srgb, var(--c) 22%, transparent);
  border-top-color: var(--c);
  animation: aia-budget-limit-reached-spin 0.8s linear infinite;
}
.aia-budget-limit-reached-pause {
  color: color-mix(in srgb, #d97706 84%, currentColor);
  font-weight: 600;
  opacity: clamp(0, (var(--p) - 0.4) * 2.5, 1);
  transform: translateY(calc((1 - var(--p)) * 0.4em));
}
.aia-budget-limit-reached-pause svg {
  width: 1.05em;
  height: 1.05em;
  stroke-width: 3;
}
.aia-budget-limit-reached-note {
  position: absolute;
  left: 0;
  color: color-mix(in srgb, currentColor 45%, transparent);
  font-size: 0.7em;
  white-space: nowrap;
  opacity: calc(1 - clamp(0, var(--p) * 2.5, 1));
}
.aia-budget-limit-reached-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5em;
  margin-top: 0.75em;
  padding-top: 0.75em;
  border-top: 1px solid color-mix(in srgb, currentColor 9%, transparent);
}
.aia-budget-limit-reached-actions button {
  position: relative;
  padding: 0.5em 0.9em;
  border: 0;
  border-radius: 0.55em;
  font: 600 0.8em system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  opacity: clamp(0, (var(--p) - 0.4) * 2.5, 1);
  transform: translateY(calc((1 - clamp(0, (var(--p) - 0.4) * 2.5, 1)) * 0.5em));
}
.aia-budget-limit-reached-actions button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.aia-budget-limit-reached-end {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
  color: inherit;
}
.aia-budget-limit-reached-raise {
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.3em 0.8em -0.3em color-mix(in srgb, var(--c) 70%, transparent);
}
.aia-budget-limit-reached-raise::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: aia-budget-limit-reached-pulse 2.2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
@keyframes aia-budget-limit-reached-clock {
  0%, 4% { --aia-budget-limit-reached-u: 0.18; }
  10%, 17% { --aia-budget-limit-reached-u: 0.34; }
  23%, 30% { --aia-budget-limit-reached-u: 0.52; }
  36%, 42% { --aia-budget-limit-reached-u: 0.68; }
  48%, 54% { --aia-budget-limit-reached-u: 0.86; }
  60%, 95.5% { --aia-budget-limit-reached-u: 1; }
  96.5%, 100% { --aia-budget-limit-reached-u: 0.18; }
  0%, 60% { --aia-budget-limit-reached-p: 0; }
  68%, 95.5% { --aia-budget-limit-reached-p: 1; }
  96.5% { --aia-budget-limit-reached-p: 0; }
}
@keyframes aia-budget-limit-reached-fade {
  0%, 93% { opacity: 1; }
  95.5%, 97% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes aia-budget-limit-reached-spin {
  to { transform: rotate(360deg); }
}
@keyframes aia-budget-limit-reached-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 50%, transparent); }
  70%, 100% { box-shadow: 0 0 0 0.55em color-mix(in srgb, var(--c) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .aia-budget-limit-reached,
  .aia-budget-limit-reached > *,
  .aia-budget-limit-reached-run i,
  .aia-budget-limit-reached-raise::after {
    animation: none;
  }
  .aia-budget-limit-reached {
    --aia-budget-limit-reached-u: 1;
    --aia-budget-limit-reached-p: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aia-budget-limit-reached, .aia-budget-limit-reached *, .aia-budget-limit-reached::before, .aia-budget-limit-reached::after, .aia-budget-limit-reached *::before, .aia-budget-limit-reached *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

  • Color: set --aia-color on the element or a parent. Currently previewing #3b82f6.
  • Base size: set --aia-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
  • Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
  • Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar ai animations

Agent Tool Call Card
Agent Terminal Output
Agent File Edit Diff
Agent Plan Checklist