AI CSS Animations

Sub-agent Tree

A main agent spawns three sub-agents: the tree line draws down, each branch elbows out and its row fades in with a spinner, then each finishes and the count reaches 3/3. One @property clock.

Also known as: subagent animation, agent tree ui, multi agent spawning.

Main agentDelegating 3 tasks
  • ExploreMap the auth flow
  • TaskWrite the migration
  • TaskRun the e2e suite

HTML

<div class="aia-subagent-tree" role="status" aria-label="Main agent running three sub-agents">
  <div class="aia-subagent-tree-root">
    <span class="aia-subagent-tree-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>
    <span class="aia-subagent-tree-who"><b>Main agent</b><span>Delegating 3 tasks</span></span>
    <span class="aia-subagent-tree-count" aria-hidden="true"></span>
  </div>
  <ul class="aia-subagent-tree-kids">
    <li><code>Explore</code><span>Map the auth flow</span><i 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></i></li>
    <li><code>Task</code><span>Write the migration</span><i 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></i></li>
    <li><code>Task</code><span>Run the e2e suite</span><i 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></i></li>
  </ul>
</div>

CSS

@property --aia-subagent-tree-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --aia-subagent-tree-n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.aia-subagent-tree {
  --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-subagent-tree-t);
  --ok: color-mix(in srgb, #16a34a 78%, currentColor);
  width: 20em;
  padding: 0.8em 0.95em 0.6em;
  animation:
    aia-subagent-tree-clock var(--d) cubic-bezier(0.45, 0, 0.3, 1) infinite;
}
.aia-subagent-tree-root {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.aia-subagent-tree-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 0.6em;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.35em 0.9em -0.35em color-mix(in srgb, var(--c) 80%, transparent);
}
.aia-subagent-tree-avatar::after {
  content: "";
  position: absolute;
  left: calc(50% - 0.045em);
  top: 100%;
  width: 0.09em;
  height: 0.5em;
  background: color-mix(in srgb, currentColor 24%, transparent);
}
.aia-subagent-tree-avatar svg {
  width: 1.05em;
  height: 1.05em;
  fill: currentColor;
  stroke: none;
}
.aia-subagent-tree-who {
  display: grid;
  margin-right: auto;
  line-height: 1.25;
}
.aia-subagent-tree-who b { font-size: 0.92em; }
.aia-subagent-tree-who span {
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-size: 0.78em;
}
.aia-subagent-tree-count {
  padding: 0.2em 0.55em;
  border-radius: 999em;
  background: color-mix(in srgb, currentColor 7%, transparent);
  font: 600 0.75em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --aia-subagent-tree-n: clamp(0, var(--t) - 3.3, 3);
  counter-reset: n var(--aia-subagent-tree-n);
  animation: aia-subagent-tree-fade var(--d) linear infinite;
}
.aia-subagent-tree-count::before { content: counter(n) "/3 done"; }
.aia-subagent-tree-kids {
  position: relative;
  margin: 0;
  padding: 0.15em 0 0 2.15em;
  list-style: none;
  animation: aia-subagent-tree-fade var(--d) linear infinite;
}
.aia-subagent-tree-kids li {
  --i: 0;
  --e: clamp(0, (var(--t) - var(--i)) * 2.5, 1);
  --v: clamp(0, (var(--t) - var(--i) - 0.35) * 2.5, 1);
  --g: clamp(0, (var(--t) - var(--i) - 0.45) * 1.8, 1);
  --ok-p: clamp(0, (var(--t) - 3.6 - var(--i)) * 2.5, 1);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 2.15em;
}
.aia-subagent-tree-kids li:nth-child(2) { --i: 1; }
.aia-subagent-tree-kids li:nth-child(3) { --i: 2; }
/* elbow from the trunk into this row: draws down, then across */
.aia-subagent-tree-kids li::before {
  content: "";
  position: absolute;
  left: -1.15em;
  top: -0.15em;
  width: 0.85em;
  height: calc(50% + 0.15em);
  box-sizing: border-box;
  border-left: 0.09em solid color-mix(in srgb, currentColor 24%, transparent);
  border-bottom: 0.09em solid color-mix(in srgb, currentColor 24%, transparent);
  border-bottom-left-radius: 0.55em;
  clip-path: inset(0 calc((1 - clamp(0, var(--e) * 2 - 1, 1)) * 100%) calc((1 - min(var(--e) * 2, 1)) * 100%) 0);
}
/* trunk continuing down to the next row */
.aia-subagent-tree-kids li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -1.15em;
  top: 50%;
  width: 0.09em;
  height: calc(50% + 0.15em);
  background: color-mix(in srgb, currentColor 24%, transparent);
  transform: scaleY(var(--v));
  transform-origin: top;
}
.aia-subagent-tree-kids code,
.aia-subagent-tree-kids span,
.aia-subagent-tree-kids i {
  opacity: var(--g);
  transform: translateX(calc((1 - var(--g)) * -0.6em));
}
.aia-subagent-tree-kids code {
  padding: 0.15em 0.45em;
  border-radius: 0.35em;
  background: color-mix(in srgb, var(--c) 13%, transparent);
  color: color-mix(in srgb, var(--c) 75%, currentColor);
  font: 600 0.72em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-subagent-tree-kids span {
  margin-right: auto;
  font-size: 0.85em;
  white-space: nowrap;
}
.aia-subagent-tree-kids i {
  position: relative;
  display: grid;
  place-items: center;
  width: 1em;
  height: 1em;
}
.aia-subagent-tree-kids i::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 0.12em solid color-mix(in srgb, var(--c) 25%, transparent);
  border-top-color: var(--c);
  opacity: calc(1 - var(--ok-p));
  animation: aia-subagent-tree-spin 0.8s linear infinite;
}
.aia-subagent-tree-kids svg {
  width: 1em;
  height: 1em;
  color: var(--ok);
  stroke-width: 3;
  opacity: var(--ok-p);
  transform: scale(calc(0.3 + var(--ok-p) * 0.7));
}
@keyframes aia-subagent-tree-clock {
  0%, 4% { --aia-subagent-tree-t: 0; }
  30%, 38% { --aia-subagent-tree-t: 3; }
  44%, 54% { --aia-subagent-tree-t: 4.3; }
  59%, 67% { --aia-subagent-tree-t: 5.3; }
  72%, 96% { --aia-subagent-tree-t: 6.3; }
  97%, 100% { --aia-subagent-tree-t: 0; }
}
@keyframes aia-subagent-tree-fade {
  0%, 92% { opacity: 1; }
  96%, 97% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes aia-subagent-tree-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .aia-subagent-tree,
  .aia-subagent-tree-count,
  .aia-subagent-tree-kids {
    animation: none;
    --aia-subagent-tree-t: 4.8;
  }
  .aia-subagent-tree-kids i::before { animation-duration: 2.4s; }
}

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