AI CSS Animations

Orchestrator Dispatch

A hub and spoke view of an orchestrator agent: packets fly out along curved wires to four workers, each spins up and finishes, and green packets fly home as the count reaches 4 of 4 reported.

Also known as: orchestrator worker agents, multi agent orchestration animation, agent hub and spoke.

Orchestrator Dispatching
  • exploreAuth flow
  • testsWrite specs
  • migrateusers table
  • docsAPI docs

HTML

<div class="aia-orchestrator-dispatch" role="status" aria-label="Orchestrator dispatching four workers">
  <div class="aia-orchestrator-dispatch-stage">
    <svg class="aia-orchestrator-dispatch-wires" viewBox="0 0 226 100" fill="none" aria-hidden="true">
      <g class="aia-orchestrator-dispatch-w1"><path d="M98 37C84 37 84 18 68 18" pathLength="1"/><path d="M98 37C84 37 84 18 68 18" pathLength="1"/><path d="M98 37C84 37 84 18 68 18" pathLength="1"/><path d="M98 37C84 37 84 18 68 18" pathLength="1"/><path d="M98 37C84 37 84 18 68 18" pathLength="1"/></g>
      <g class="aia-orchestrator-dispatch-w2"><path d="M98 47C84 47 84 82 68 82" pathLength="1"/><path d="M98 47C84 47 84 82 68 82" pathLength="1"/><path d="M98 47C84 47 84 82 68 82" pathLength="1"/><path d="M98 47C84 47 84 82 68 82" pathLength="1"/><path d="M98 47C84 47 84 82 68 82" pathLength="1"/></g>
      <g class="aia-orchestrator-dispatch-w3"><path d="M128 37C142 37 142 18 158 18" pathLength="1"/><path d="M128 37C142 37 142 18 158 18" pathLength="1"/><path d="M128 37C142 37 142 18 158 18" pathLength="1"/><path d="M128 37C142 37 142 18 158 18" pathLength="1"/><path d="M128 37C142 37 142 18 158 18" pathLength="1"/></g>
      <g class="aia-orchestrator-dispatch-w4"><path d="M128 47C142 47 142 82 158 82" pathLength="1"/><path d="M128 47C142 47 142 82 158 82" pathLength="1"/><path d="M128 47C142 47 142 82 158 82" pathLength="1"/><path d="M128 47C142 47 142 82 158 82" pathLength="1"/><path d="M128 47C142 47 142 82 158 82" pathLength="1"/></g>
    </svg>
    <b class="aia-orchestrator-dispatch-label">Orchestrator</b>
    <span class="aia-orchestrator-dispatch-hub" 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-orchestrator-dispatch-count"><span>Dispatching</span><span class="aia-orchestrator-dispatch-n"></span></span>
    <ul class="aia-orchestrator-dispatch-workers">
      <li class="aia-orchestrator-dispatch-w1"><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><b>explore</b><span>Auth flow</span></li>
      <li class="aia-orchestrator-dispatch-w2"><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><b>tests</b><span>Write specs</span></li>
      <li class="aia-orchestrator-dispatch-w3"><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><b>migrate</b><span>users table</span></li>
      <li class="aia-orchestrator-dispatch-w4"><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><b>docs</b><span>API docs</span></li>
    </ul>
  </div>
</div>

CSS

@property --aia-orchestrator-dispatch-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --aia-orchestrator-dispatch-k {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.aia-orchestrator-dispatch {
  --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: 8.5s;
  --t: var(--aia-orchestrator-dispatch-t);
  --ok: color-mix(in srgb, #16a34a 78%, currentColor);
  padding: 0.7em;
  animation: aia-orchestrator-dispatch-clock var(--d) linear infinite;
}
.aia-orchestrator-dispatch-stage {
  position: relative;
  width: 22.6em;
  height: 10em;
  animation: aia-orchestrator-dispatch-fade var(--d) linear infinite;
}
.aia-orchestrator-dispatch-w1 { --a: 0.15; --f: 0.5; }
.aia-orchestrator-dispatch-w2 { --a: 0.185; --f: 0.62; }
.aia-orchestrator-dispatch-w3 { --a: 0.22; --f: 0.42; }
.aia-orchestrator-dispatch-w4 { --a: 0.255; --f: 0.56; }
.aia-orchestrator-dispatch-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.aia-orchestrator-dispatch-wires g {
  --p: clamp(0, (var(--t) - var(--a) + 0.1) * 10, 1);
  --q: clamp(0, (var(--t) - var(--f)) * 14, 1);
  stroke-linecap: round;
}
/* the resting wire */
.aia-orchestrator-dispatch-wires path:nth-child(1) {
  stroke: color-mix(in srgb, currentColor 16%, transparent);
  stroke-width: 1.2;
}
/* the dispatch, drawn out behind the outgoing packet */
.aia-orchestrator-dispatch-wires path:nth-child(2) {
  stroke: var(--c);
  stroke-width: 1.4;
  stroke-dasharray: 1 2;
  stroke-dashoffset: calc(1 - var(--p));
  opacity: calc(clamp(0, var(--p) * 60, 1) * (0.75 - var(--q) * 0.75));
}
/* the report, drawn home behind the returning packet */
.aia-orchestrator-dispatch-wires path:nth-child(3) {
  stroke: var(--ok);
  stroke-width: 1.4;
  stroke-dasharray: 1 2;
  stroke-dashoffset: calc(var(--q) - 1);
  opacity: calc(clamp(0, var(--q) * 60, 1) * 0.8);
}
/* packets: a zero length dash with a round cap is a dot that rides the curve */
.aia-orchestrator-dispatch-wires path:nth-child(4),
.aia-orchestrator-dispatch-wires path:nth-child(5) {
  stroke-width: 5;
  stroke-dasharray: 0 1;
}
.aia-orchestrator-dispatch-wires path:nth-child(4) {
  stroke: var(--c);
  stroke-dashoffset: calc(var(--p) * -1);
  opacity: clamp(0, min(var(--p), 1 - var(--p)) * 12, 1);
  filter: drop-shadow(0 0 0.3em var(--c));
}
.aia-orchestrator-dispatch-wires path:nth-child(5) {
  stroke: var(--ok);
  stroke-dashoffset: calc(var(--q) - 1);
  opacity: clamp(0, min(var(--q), 1 - var(--q)) * 12, 1);
}
.aia-orchestrator-dispatch-label {
  position: absolute;
  left: 50%;
  top: 0.35em;
  transform: translateX(-50%);
  font-size: 0.78em;
  white-space: nowrap;
}
.aia-orchestrator-dispatch-hub {
  --g: calc(calc(clamp(0, (var(--t) - 0.03) * 33.3333, 1) * (1 - clamp(0, (var(--t) - 0.2) * 14.2857, 1))) + calc(clamp(0, (var(--t) - 0.49) * 100, 1) * (1 - clamp(0, (var(--t) - 0.52) * 33.3333, 1))) + calc(clamp(0, (var(--t) - 0.57) * 100, 1) * (1 - clamp(0, (var(--t) - 0.6) * 33.3333, 1))) + calc(clamp(0, (var(--t) - 0.63) * 100, 1) * (1 - clamp(0, (var(--t) - 0.66) * 33.3333, 1))) + calc(clamp(0, (var(--t) - 0.69) * 100, 1) * (1 - clamp(0, (var(--t) - 0.72) * 33.3333, 1))));
  --done: clamp(0, (var(--t) - 0.7) * 25, 1);
  position: absolute;
  left: calc(50% - 1.5em);
  top: 2.7em;
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  box-shadow:
    0 0 0 calc(var(--done) * 0.2em) var(--ok),
    0 0 0 calc(var(--g) * 0.55em) color-mix(in srgb, var(--c) 22%, transparent),
    0 0.4em 1em -0.4em color-mix(in srgb, var(--c) 80%, transparent);
}
.aia-orchestrator-dispatch-hub svg {
  width: 1.4em;
  height: 1.4em;
  fill: currentColor;
  stroke: none;
  transform: rotate(calc(var(--t) * 360deg));
}
.aia-orchestrator-dispatch-count {
  position: absolute;
  left: 50%;
  top: calc(6.2em / 0.66);
  display: grid;
  justify-items: center;
  transform: translateX(-50%);
  color: color-mix(in srgb, currentColor 55%, transparent);
  font: 600 0.66em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
}
.aia-orchestrator-dispatch-count > * { grid-area: 1 / 1; }
.aia-orchestrator-dispatch-count > span:first-child {
  opacity: calc(1 - clamp(0, (var(--t) - 0.27) * 33.3333, 1));
}
.aia-orchestrator-dispatch-n {
  --aia-orchestrator-dispatch-k: calc(clamp(0, (var(--t) - 0.49) * 200, 1) + clamp(0, (var(--t) - 0.57) * 200, 1) + clamp(0, (var(--t) - 0.63) * 200, 1) + clamp(0, (var(--t) - 0.69) * 200, 1));
  counter-reset: k var(--aia-orchestrator-dispatch-k);
  opacity: clamp(0, (var(--t) - 0.28) * 33.3333, 1);
}
.aia-orchestrator-dispatch-n::before {
  content: counter(k) "/4 reported";
  color: color-mix(in srgb, var(--ok) calc(var(--aia-orchestrator-dispatch-k) * 25%), color-mix(in srgb, currentColor 55%, transparent));
}
.aia-orchestrator-dispatch-workers {
  margin: 0;
  padding: 0;
  list-style: none;
}
.aia-orchestrator-dispatch-workers li {
  --on: clamp(0, (var(--t) - var(--a)) * 20, 1);
  --ok-p: clamp(0, (var(--t) - var(--f)) * 20, 1);
  position: absolute;
  display: grid;
  grid-template-columns: 1.1em 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 0.45em;
  box-sizing: border-box;
  width: 6.7em;
  height: 2.5em;
  padding: 0 0.55em;
  border-radius: 0.6em;
  background: color-mix(in srgb, currentColor 4%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, currentColor 10%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--c) calc(var(--on) * (1 - var(--ok-p)) * 55%), transparent),
    inset 0 0 0 1px color-mix(in srgb, #16a34a calc(var(--ok-p) * 50%), transparent);
}
.aia-orchestrator-dispatch-workers .aia-orchestrator-dispatch-w1 { left: 0.1em; top: 0.55em; }
.aia-orchestrator-dispatch-workers .aia-orchestrator-dispatch-w2 { left: 0.1em; bottom: 0.55em; }
.aia-orchestrator-dispatch-workers .aia-orchestrator-dispatch-w3 { right: 0.1em; top: 0.55em; }
.aia-orchestrator-dispatch-workers .aia-orchestrator-dispatch-w4 { right: 0.1em; bottom: 0.55em; }
.aia-orchestrator-dispatch-workers i {
  position: relative;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 1.1em;
  height: 1.1em;
}
/* idle ring that becomes a spinner */
.aia-orchestrator-dispatch-workers i::before {
  content: "";
  position: absolute;
  inset: 0.08em;
  border-radius: 50%;
  border: 0.12em solid color-mix(in srgb, currentColor 22%, transparent);
  border-top-color: color-mix(in srgb, var(--c) calc(var(--on) * 100%), color-mix(in srgb, currentColor 22%, transparent));
  opacity: calc(1 - var(--ok-p));
  animation: aia-orchestrator-dispatch-spin 0.8s linear infinite;
}
.aia-orchestrator-dispatch-workers svg {
  width: 1.05em;
  height: 1.05em;
  color: var(--ok);
  stroke-width: 3;
  opacity: var(--ok-p);
  transform: scale(calc(0.4 + var(--ok-p) * 0.6));
}
.aia-orchestrator-dispatch-workers b,
.aia-orchestrator-dispatch-workers span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: calc(0.5 + var(--on) * 0.5);
}
.aia-orchestrator-dispatch-workers b {
  font: 600 0.7em / 1.3 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-orchestrator-dispatch-workers span {
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-size: 0.62em;
}
@keyframes aia-orchestrator-dispatch-clock {
  from { --aia-orchestrator-dispatch-t: 0; }
  to { --aia-orchestrator-dispatch-t: 1; }
}
@keyframes aia-orchestrator-dispatch-fade {
  0% { opacity: 0; }
  3%, 93% { opacity: 1; }
  97.5%, 100% { opacity: 0; }
}
@keyframes aia-orchestrator-dispatch-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .aia-orchestrator-dispatch,
  .aia-orchestrator-dispatch-stage {
    animation: none;
    --aia-orchestrator-dispatch-t: 0.58;
  }
  .aia-orchestrator-dispatch-workers i::before { animation-duration: 2.4s; }
}

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