AI CSS Animations

Agent Handoff

A Planner agent finishes a spec and hands it to a Coder agent: a spec.md chip arcs along a dashed track, the receiver pulses on arrival and its spinning ring takes over. Both labels swap as it lands.

Also known as: agent handoff animation, multi agent workflow animation, agent to agent transfer.

Planner Writing specHanded off
Coder WaitingImplementing

HTML

<div class="aia-agent-handoff" role="status" aria-label="Planner handing the spec to Coder">
  <div class="aia-agent-handoff-node aia-agent-handoff-from">
    <span class="aia-agent-handoff-face" aria-hidden="true">P</span>
    <b>Planner</b>
    <span class="aia-agent-handoff-state"><span>Writing spec</span><span>Handed off</span></span>
  </div>
  <div class="aia-agent-handoff-track" aria-hidden="true">
    <span class="aia-agent-handoff-x"><span class="aia-agent-handoff-chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg>spec.md</span></span>
  </div>
  <div class="aia-agent-handoff-node aia-agent-handoff-to">
    <span class="aia-agent-handoff-face" aria-hidden="true">C</span>
    <b>Coder</b>
    <span class="aia-agent-handoff-state"><span>Waiting</span><span>Implementing</span></span>
  </div>
</div>

CSS

.aia-agent-handoff {
  --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: 6.4s;
  display: grid;
  grid-template-columns: 5.6em 1fr 5.6em;
  align-items: start;
  width: 23em;
  padding: 1em 0.8em 0.85em;
}
.aia-agent-handoff-node {
  display: grid;
  justify-items: center;
  gap: 0.15em;
  text-align: center;
}
.aia-agent-handoff-node b {
  margin-top: 0.35em;
  font-size: 0.88em;
}
.aia-agent-handoff-face {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: color-mix(in srgb, var(--c) 80%, currentColor);
  font-weight: 700;
}
/* the working ring: a conic arc masked to a thin band */
.aia-agent-handoff-face::before {
  content: "";
  position: absolute;
  inset: -0.28em;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 35%, var(--c));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.14em), #000 calc(100% - 0.13em));
  mask: radial-gradient(farthest-side, transparent calc(100% - 0.14em), #000 calc(100% - 0.13em));
  animation:
    aia-agent-handoff-spin 1.1s linear infinite,
    aia-agent-handoff-busy-from var(--d) ease infinite;
}
.aia-agent-handoff-to .aia-agent-handoff-face::before {
  animation:
    aia-agent-handoff-spin 1.1s linear infinite,
    aia-agent-handoff-busy-to var(--d) ease infinite;
}
.aia-agent-handoff-to .aia-agent-handoff-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent);
  animation: aia-agent-handoff-land var(--d) cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.aia-agent-handoff-state {
  display: grid;
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-size: 0.74em;
  white-space: nowrap;
}
.aia-agent-handoff-state > * {
  grid-area: 1 / 1;
}
.aia-agent-handoff-from .aia-agent-handoff-state > :first-child { animation: aia-agent-handoff-from-a var(--d) ease infinite; }
.aia-agent-handoff-from .aia-agent-handoff-state > :last-child { animation: aia-agent-handoff-from-b var(--d) ease infinite; }
.aia-agent-handoff-to .aia-agent-handoff-state > :first-child { animation: aia-agent-handoff-to-a var(--d) ease infinite; }
.aia-agent-handoff-to .aia-agent-handoff-state > :last-child {
  color: color-mix(in srgb, var(--c) 80%, currentColor);
  font-weight: 600;
  animation: aia-agent-handoff-to-b var(--d) ease infinite;
}
.aia-agent-handoff-track {
  position: relative;
  height: 2.6em;
  margin: 0 0.2em;
}
.aia-agent-handoff-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 0.05em);
  height: 0.1em;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, currentColor 28%, transparent) 0 0.4em, transparent 0.4em 0.75em);
  animation: aia-agent-handoff-flow 0.6s linear infinite;
}
.aia-agent-handoff-x {
  position: absolute;
  top: calc(50% - 0.8em);
  left: 0;
  animation: aia-agent-handoff-x var(--d) cubic-bezier(0.55, 0, 0.25, 1) infinite;
}
.aia-agent-handoff-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  height: 1.6em;
  padding: 0 0.55em 0 0.4em;
  border-radius: 0.5em;
  background: var(--c);
  color: #fff;
  font: 600 0.72em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
  box-shadow: 0 0.5em 1em -0.4em color-mix(in srgb, var(--c) 80%, transparent);
  animation: aia-agent-handoff-hop var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-agent-handoff-chip svg {
  width: 1.1em;
  height: 1.1em;
}
@keyframes aia-agent-handoff-x {
  0%, 30% { left: 0; transform: translateX(0); }
  56%, 100% { left: 100%; transform: translateX(-100%); }
}
@keyframes aia-agent-handoff-hop {
  0%, 24% { opacity: 0; transform: scale(0.5); }
  30% { opacity: 1; transform: scale(1); }
  43% { transform: translateY(-0.9em) rotate(-4deg); }
  56% { opacity: 1; transform: none; }
  61%, 100% { opacity: 0; transform: scale(0.4); }
}
@keyframes aia-agent-handoff-busy-from {
  0%, 26%, 100% { opacity: 1; }
  32%, 96% { opacity: 0; }
}
@keyframes aia-agent-handoff-busy-to {
  0%, 57%, 96%, 100% { opacity: 0; }
  62%, 92% { opacity: 1; }
}
@keyframes aia-agent-handoff-land {
  0%, 56% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 0.8em color-mix(in srgb, var(--c) 0%, transparent); }
}
@keyframes aia-agent-handoff-from-a {
  0%, 28%, 98%, 100% { opacity: 1; transform: none; }
  32%, 94% { opacity: 0; transform: translateY(-0.5em); }
}
@keyframes aia-agent-handoff-from-b {
  0%, 28%, 98%, 100% { opacity: 0; transform: translateY(0.5em); }
  32%, 94% { opacity: 1; transform: none; }
}
@keyframes aia-agent-handoff-to-a {
  0%, 56%, 98%, 100% { opacity: 1; transform: none; }
  60%, 94% { opacity: 0; transform: translateY(-0.5em); }
}
@keyframes aia-agent-handoff-to-b {
  0%, 56%, 98%, 100% { opacity: 0; transform: translateY(0.5em); }
  60%, 94% { opacity: 1; transform: none; }
}
@keyframes aia-agent-handoff-spin {
  to { transform: rotate(360deg); }
}
@keyframes aia-agent-handoff-flow {
  to { background-position: 0.75em 0; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-agent-handoff *,
  .aia-agent-handoff *::before,
  .aia-agent-handoff *::after {
    animation-play-state: paused;
    animation-delay: calc(var(--d) * -0.75);
  }
}

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