AI CSS Animations

Agent Run Interrupted

An agent edits files one by one until the Esc keycap presses: the spinner stops on a square, the partial output dims, and Interrupted. What should I do instead? appears as the reply box takes focus.

Also known as: interrupt agent animation, esc to interrupt, stopped by user ui.

Switching to pino
  • Updated src/api/users.ts
  • Updated src/api/orders.ts
  • Updating src/api/billing.ts
  • Interrupted. What should I do instead?

HTML

<div class="aia-user-interrupted" role="status" aria-label="Run interrupted, Claude asks what to do instead">
  <div class="aia-user-interrupted-head">
    <span class="aia-user-interrupted-avatar" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5l1.9 5.1 5.1 1.9-5.1 1.9L12 17.5l-1.9-5.1L5 10.5l5.1-1.9z"/></svg></span>
    <b>Switching to pino</b>
    <span class="aia-user-interrupted-hint" aria-hidden="true">
      <span class="aia-user-interrupted-esc"><kbd>esc</kbd>to interrupt</span>
      <span class="aia-user-interrupted-stopped">Stopped</span>
    </span>
  </div>
  <ul class="aia-user-interrupted-log">
    <li><span class="aia-user-interrupted-st" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5.5 12.5 4 4 9-9.5"/></svg></span><span>Updated <code>src/api/users.ts</code></span></li>
    <li><span class="aia-user-interrupted-st" aria-hidden="true"><i></i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5.5 12.5 4 4 9-9.5"/></svg></span><span>Updated <code>src/api/orders.ts</code></span></li>
    <li class="aia-user-interrupted-cur"><span class="aia-user-interrupted-st" aria-hidden="true"><i></i><b></b></span><span>Updating <code>src/api/billing.ts</code></span></li>
    <li class="aia-user-interrupted-ask">Interrupted. What should I do instead?</li>
  </ul>
  <div class="aia-user-interrupted-box" aria-hidden="true"><i></i><span>Reply to Claude</span></div>
</div>

CSS

@property --aia-user-interrupted-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.aia-user-interrupted {
  --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;
  --t: var(--aia-user-interrupted-t);
  --x: clamp(0, (var(--t) - 1) * 6, 1);
  --a: clamp(0, (var(--t) - 1.6) * 3, 1);
  width: 21.5em;
  padding: 0.85em 1em 0.8em;
  animation: aia-user-interrupted-clock var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-user-interrupted-head,
.aia-user-interrupted-log,
.aia-user-interrupted-box {
  animation: aia-user-interrupted-fade var(--d) linear infinite;
}
.aia-user-interrupted-head {
  display: flex;
  align-items: center;
  gap: 0.55em;
}
.aia-user-interrupted-avatar {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 0.5em;
  background: var(--c);
  color: #fff;
}
.aia-user-interrupted-avatar svg {
  width: 0.95em;
  height: 0.95em;
  fill: currentColor;
  stroke: none;
}
.aia-user-interrupted-head b {
  margin-right: auto;
  font-size: 0.86em;
  white-space: nowrap;
}
.aia-user-interrupted-hint {
  display: grid;
  justify-items: end;
  font-size: 0.7em;
}
.aia-user-interrupted-hint > * {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
}
.aia-user-interrupted-esc {
  color: color-mix(in srgb, currentColor 50%, transparent);
  opacity: calc(1 - var(--x));
}
.aia-user-interrupted-esc kbd {
  padding: 0.1em 0.4em;
  border-radius: 0.35em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent), inset 0 -0.12em 0 color-mix(in srgb, currentColor 12%, transparent);
  color: color-mix(in srgb, currentColor 75%, transparent);
  font: 600 0.95em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  animation: aia-user-interrupted-press var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-user-interrupted-stopped {
  padding: 0.15em 0.55em;
  border-radius: 999em;
  background: color-mix(in srgb, #dc2626 12%, transparent);
  color: color-mix(in srgb, #dc2626 80%, currentColor);
  font-weight: 600;
  opacity: var(--x);
  transform: scale(calc(0.85 + var(--x) * 0.15));
}
.aia-user-interrupted-log {
  margin: 0.6em 0 0;
  padding: 0;
  list-style: none;
}
.aia-user-interrupted-log li {
  display: flex;
  align-items: center;
  gap: 0.55em;
  height: 1.72em;
  font-size: 0.8em;
  white-space: nowrap;
}
.aia-user-interrupted-log li:not(.aia-user-interrupted-ask) { opacity: calc(1 - var(--x) * 0.55); }
.aia-user-interrupted-log code {
  font: 0.92em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  color: color-mix(in srgb, currentColor 70%, transparent);
}
.aia-user-interrupted-st {
  display: grid;
  place-items: center;
  width: 1.05em;
  height: 1.05em;
}
.aia-user-interrupted-st > * { grid-area: 1 / 1; }
.aia-user-interrupted-st svg {
  width: 1.05em;
  height: 1.05em;
  color: color-mix(in srgb, #16a34a 78%, currentColor);
  stroke-width: 3;
}
.aia-user-interrupted-st 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-user-interrupted-spin 0.8s linear infinite;
}
.aia-user-interrupted-log li:nth-child(2) i { opacity: calc(1 - clamp(0, (var(--t) - 0.2) * 8, 1)); }
.aia-user-interrupted-log li:nth-child(2) svg {
  opacity: clamp(0, (var(--t) - 0.2) * 8, 1);
  transform: scale(calc(0.5 + clamp(0, (var(--t) - 0.2) * 8, 1) * 0.5));
}
.aia-user-interrupted-cur {
  --v: clamp(0, (var(--t) - 0.32) * 5, 1);
}
.aia-user-interrupted-log .aia-user-interrupted-cur > span:last-child {
  opacity: var(--v);
  transform: translateX(calc((1 - var(--v)) * -0.5em));
}
.aia-user-interrupted-cur i { opacity: calc(var(--v) * (1 - var(--x))); }
.aia-user-interrupted-cur b {
  width: 0.62em;
  height: 0.62em;
  border-radius: 0.15em;
  background: color-mix(in srgb, #dc2626 80%, currentColor);
  opacity: var(--x);
  transform: scale(calc(0.3 + var(--x) * 0.7));
}
.aia-user-interrupted-log .aia-user-interrupted-ask {
  padding-left: 1.6em;
  color: color-mix(in srgb, currentColor 85%, transparent);
  font-weight: 600;
  opacity: var(--a);
  transform: translateY(calc((1 - var(--a)) * 0.5em));
}
.aia-user-interrupted-box {
  display: flex;
  align-items: center;
  gap: 0.15em;
  height: 2.2em;
  margin-top: 0.5em;
  padding: 0 0.75em;
  border-radius: 0.6em;
  background: color-mix(in srgb, currentColor 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) calc(var(--a) * 100%), color-mix(in srgb, currentColor 12%, transparent)), 0 0 0 calc(var(--a) * 0.25em) color-mix(in srgb, var(--c) 16%, transparent);
  color: color-mix(in srgb, currentColor 40%, transparent);
  font-size: 0.8em;
}
.aia-user-interrupted-box i {
  width: 0.1em;
  height: 1.1em;
  background: var(--c);
  opacity: var(--a);
  animation: aia-user-interrupted-blink 1s steps(1) infinite;
}
@keyframes aia-user-interrupted-clock {
  0%, 3% { --aia-user-interrupted-t: 0; }
  30% { --aia-user-interrupted-t: 0.9; }
  36%, 40% { --aia-user-interrupted-t: 1.2; }
  50% { --aia-user-interrupted-t: 2; }
  56%, 95.5% { --aia-user-interrupted-t: 2.3; }
  96.5%, 100% { --aia-user-interrupted-t: 0; }
}
@keyframes aia-user-interrupted-press {
  0%, 30%, 37%, 100% { transform: none; background: transparent; }
  33.5% { transform: translateY(0.12em); background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
}
@keyframes aia-user-interrupted-fade {
  0%, 93% { opacity: 1; }
  95.5%, 97% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes aia-user-interrupted-spin {
  to { transform: rotate(360deg); }
}
@keyframes aia-user-interrupted-blink {
  0%, 50% { visibility: visible; }
  51%, 100% { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-user-interrupted,
  .aia-user-interrupted * {
    animation: none;
  }
  .aia-user-interrupted { --aia-user-interrupted-t: 2.3; }
}

@media (prefers-reduced-motion: reduce) {
  .aia-user-interrupted, .aia-user-interrupted *, .aia-user-interrupted::before, .aia-user-interrupted::after, .aia-user-interrupted *::before, .aia-user-interrupted *::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