AI CSS Animations

Tool Calls Folding Into a Summary

Six tool calls stream into a thread one by one, each spinning then checking off, until the group folds up into a single Ran 6 tools row with its diff totals and the agent's reply slides in below.

Also known as: collapsed tool calls ui, ran tools disclosure, agent steps accordion.

Running tools Ran 6 tools

Added a sliding window limiter to /login. All 14 limiter tests pass.

HTML

<div class="aia-tool-group-collapse" role="status" aria-label="Agent ran 6 tools">
  <div class="aia-tool-group-collapse-head">
    <span class="aia-tool-group-collapse-chev" 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="m9.5 6 6 6-6 6"/></svg></span>
    <span class="aia-tool-group-collapse-label">
      <span class="aia-tool-group-collapse-run">Running tools <b class="aia-tool-group-collapse-n" aria-hidden="true"></b></span>
      <span class="aia-tool-group-collapse-ran">Ran 6 tools</span>
    </span>
    <span class="aia-tool-group-collapse-sum" aria-hidden="true"><i>+18</i><i>-4</i><i>2 files</i></span>
  </div>
  <ul class="aia-tool-group-collapse-list" aria-hidden="true">
    <li style="--i: 0"><span class="aia-tool-group-collapse-box"><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><b>Read</b><code>src/server/limiter.ts</code></li>
    <li style="--i: 1"><span class="aia-tool-group-collapse-box"><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><b>Grep</b><code>"rateLimit(" in src</code></li>
    <li style="--i: 2"><span class="aia-tool-group-collapse-box"><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><b>Read</b><code>src/routes/login.ts</code></li>
    <li style="--i: 3"><span class="aia-tool-group-collapse-box"><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><b>Edit</b><code>src/routes/login.ts</code></li>
    <li style="--i: 4"><span class="aia-tool-group-collapse-box"><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><b>Bash</b><code>pnpm vitest run limiter</code></li>
    <li style="--i: 5"><span class="aia-tool-group-collapse-box"><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><b>Edit</b><code>CHANGELOG.md</code></li>
  </ul>
  <p class="aia-tool-group-collapse-reply">Added a sliding window limiter to <code>/login</code>. All 14 limiter tests pass.</p>
</div>

CSS

@property --aia-tool-group-collapse-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --aia-tool-group-collapse-n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.aia-tool-group-collapse {
  --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: 9s;
  --t: var(--aia-tool-group-collapse-t);
  --ok: color-mix(in srgb, #16a34a 78%, currentColor);
  --rh: 1.55em;
  width: 22em;
  padding: 0.65em 0.9em 0.7em;
  animation:
    aia-tool-group-collapse-clock var(--d) linear infinite,
    aia-tool-group-collapse-fade var(--d) linear infinite;
}
.aia-tool-group-collapse-head {
  display: flex;
  align-items: center;
  gap: 0.45em;
  height: 1.7em;
}
.aia-tool-group-collapse-chev {
  display: grid;
  place-items: center;
  width: 1.1em;
  height: 1.1em;
  color: color-mix(in srgb, currentColor 50%, transparent);
  animation: aia-tool-group-collapse-turn var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-tool-group-collapse-chev svg {
  width: 0.95em;
  height: 0.95em;
  stroke-width: 2.4;
}
.aia-tool-group-collapse-label {
  display: grid;
  font-size: 0.88em;
}
.aia-tool-group-collapse-label > * {
  grid-area: 1 / 1;
  white-space: nowrap;
}
.aia-tool-group-collapse-run {
  background: linear-gradient(90deg, color-mix(in srgb, currentColor 55%, transparent) 35%, currentColor 50%, color-mix(in srgb, currentColor 55%, transparent) 65%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
  animation:
    aia-tool-group-collapse-shine 1.8s linear infinite,
    aia-tool-group-collapse-out var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-tool-group-collapse-n {
  margin-left: 0.2em;
  font: 500 0.9em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --aia-tool-group-collapse-n: clamp(0, var(--t) - 0.4, 6);
  counter-reset: n var(--aia-tool-group-collapse-n);
}
.aia-tool-group-collapse-n::before { content: counter(n) "/6"; }
.aia-tool-group-collapse-ran {
  font-weight: 600;
  animation: aia-tool-group-collapse-in var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-tool-group-collapse-sum {
  display: flex;
  gap: 0.55em;
  margin-left: auto;
  font: 500 0.74em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  animation: aia-tool-group-collapse-in var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-tool-group-collapse-sum i { font-style: normal; color: color-mix(in srgb, currentColor 50%, transparent); }
.aia-tool-group-collapse-sum i:first-child { color: var(--ok); }
.aia-tool-group-collapse-sum i:nth-child(2) { color: color-mix(in srgb, #dc2626 80%, currentColor); }
.aia-tool-group-collapse-list {
  box-sizing: border-box;
  margin: 0 0 0 0.52em;
  padding: 0.25em 0 0 0.85em;
  overflow: hidden;
  list-style: none;
  border-left: 1px solid color-mix(in srgb, currentColor 13%, transparent);
  animation: aia-tool-group-collapse-fold var(--d) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.aia-tool-group-collapse-list li {
  --a: clamp(0, (var(--t) - var(--i)) * 4, 1);
  --p: clamp(0, (var(--t) - var(--i) - 0.85) * 8, 1);
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: calc(var(--rh) * var(--a));
  overflow: hidden;
  opacity: var(--a);
  transform: translateY(calc((1 - var(--a)) * 0.4em));
}
.aia-tool-group-collapse-box {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 0.95em;
  height: 0.95em;
}
.aia-tool-group-collapse-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 0.12em solid color-mix(in srgb, var(--c) 22%, transparent);
  border-top-color: var(--c);
  opacity: calc(1 - var(--p));
  animation: aia-tool-group-collapse-spin 0.8s linear infinite;
}
.aia-tool-group-collapse-box svg {
  width: 0.95em;
  height: 0.95em;
  color: var(--ok);
  stroke-width: 3;
  opacity: var(--p);
  transform: scale(calc(0.4 + var(--p) * 0.6));
}
.aia-tool-group-collapse-list b {
  font-size: 0.8em;
  font-weight: 600;
}
.aia-tool-group-collapse-list code {
  overflow: hidden;
  color: color-mix(in srgb, currentColor 58%, transparent);
  font: 0.74em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aia-tool-group-collapse-reply {
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  font-size: 0.86em;
  line-height: 1.45;
  animation: aia-tool-group-collapse-reply var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-tool-group-collapse-reply code {
  padding: 0.05em 0.35em;
  border-radius: 0.3em;
  background: color-mix(in srgb, currentColor 7%, transparent);
  font: 0.9em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
@keyframes aia-tool-group-collapse-clock {
  0% { --aia-tool-group-collapse-t: 0; }
  6% { --aia-tool-group-collapse-t: 1; }
  13% { --aia-tool-group-collapse-t: 2; }
  18% { --aia-tool-group-collapse-t: 3; }
  29% { --aia-tool-group-collapse-t: 4; }
  43% { --aia-tool-group-collapse-t: 5; }
  51%, 100% { --aia-tool-group-collapse-t: 6.2; }
}
@keyframes aia-tool-group-collapse-fold {
  0%, 58% { max-height: calc(var(--rh) * 6 + 0.3em); opacity: 1; }
  65%, 97% { max-height: 0; opacity: 0; }
  98%, 100% { max-height: calc(var(--rh) * 6 + 0.3em); opacity: 1; }
}
@keyframes aia-tool-group-collapse-reply {
  0%, 61% { max-height: 0; padding-top: 0; opacity: 0; transform: translateY(0.5em); }
  68%, 96% { max-height: 3.6em; padding-top: 0.45em; opacity: 1; transform: none; }
  98%, 100% { max-height: 0; padding-top: 0; opacity: 0; }
}
@keyframes aia-tool-group-collapse-turn {
  0%, 58%, 100% { transform: rotate(90deg); }
  64%, 97% { transform: rotate(0deg); }
}
@keyframes aia-tool-group-collapse-out {
  0%, 58%, 100% { opacity: 1; transform: none; }
  62%, 97% { opacity: 0; transform: translateY(-0.5em); }
}
@keyframes aia-tool-group-collapse-in {
  0%, 59% { opacity: 0; transform: translateY(0.5em); }
  64%, 100% { opacity: 1; transform: none; }
}
@keyframes aia-tool-group-collapse-shine {
  from { background-position: 100% 0; }
  to { background-position: -50% 0; }
}
@keyframes aia-tool-group-collapse-spin {
  to { transform: rotate(360deg); }
}
@keyframes aia-tool-group-collapse-fade {
  0%, 93% { opacity: 1; }
  97%, 99% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-tool-group-collapse {
    animation: none;
    --aia-tool-group-collapse-t: 6.2;
  }
  .aia-tool-group-collapse-chev,
  .aia-tool-group-collapse-run,
  .aia-tool-group-collapse-ran,
  .aia-tool-group-collapse-sum,
  .aia-tool-group-collapse-list,
  .aia-tool-group-collapse-reply {
    animation-play-state: paused;
    animation-delay: calc(var(--d) * -0.8);
  }
  .aia-tool-group-collapse-box::before { animation: none; }
}

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