Agent Plan Checklist: CSS AI Animation

Agent Plan Checklist

An agent's plan card working down four steps: the current row spins and brightens, finished rows get a check and a struck line, and the count climbs to 4 of 4. One @property clock drives every row.

Also known as: ai todo list animation, agent plan ui, task checklist animation.

Plan

Read the auth middleware
Add a rate limiter to /login
Write tests for the lockout
Run the full test suite

Color Base size 16px Dark background

HTML

<div class="aia-agent-plan-checklist" role="status" aria-label="Working through a four step plan">
  <div class="aia-agent-plan-checklist-head">
    <span>Plan</span>
    <span class="aia-agent-plan-checklist-count" aria-hidden="true"></span>
  </div>
  <ol class="aia-agent-plan-checklist-list">
    <li><span class="aia-agent-plan-checklist-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><span class="aia-agent-plan-checklist-text">Read the auth middleware</span></li>
    <li><span class="aia-agent-plan-checklist-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><span class="aia-agent-plan-checklist-text">Add a rate limiter to /login</span></li>
    <li><span class="aia-agent-plan-checklist-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><span class="aia-agent-plan-checklist-text">Write tests for the lockout</span></li>
    <li><span class="aia-agent-plan-checklist-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><span class="aia-agent-plan-checklist-text">Run the full test suite</span></li>
  </ol>
</div>

CSS

@property --aia-agent-plan-checklist-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}
@property --aia-agent-plan-checklist-n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.aia-agent-plan-checklist {
  --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-agent-plan-checklist-t);
  width: 19em;
  padding: 0.85em 1em 0.7em;
  animation: aia-agent-plan-checklist-clock var(--d) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.aia-agent-plan-checklist-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.45em;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, currentColor 55%, transparent);
}
.aia-agent-plan-checklist-count {
  font-variant-numeric: tabular-nums;
  --aia-agent-plan-checklist-n: calc(var(--t) - 0.5);
  counter-reset: n var(--aia-agent-plan-checklist-n);
  animation: aia-agent-plan-checklist-fade var(--d) linear infinite;
}
.aia-agent-plan-checklist-count::before { content: counter(n) " of 4"; }
.aia-agent-plan-checklist-list {
  margin: 0;
  padding: 0;
  list-style: none;
  animation: aia-agent-plan-checklist-fade var(--d) linear infinite;
}
.aia-agent-plan-checklist-list li {
  --i: 0;
  --p: clamp(0, (var(--t) - var(--i) - 0.5) * 2, 1);
  --a: clamp(0, min(var(--t) - var(--i), var(--i) + 1 - var(--t)) * 5, 1);
  display: flex;
  align-items: center;
  gap: 0.6em;
  height: 1.95em;
  font-size: 0.92em;
}
.aia-agent-plan-checklist-list li:nth-child(2) { --i: 1; }
.aia-agent-plan-checklist-list li:nth-child(3) { --i: 2; }
.aia-agent-plan-checklist-list li:nth-child(4) { --i: 3; }
.aia-agent-plan-checklist-box {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.09em color-mix(in srgb, currentColor 28%, transparent);
}
.aia-agent-plan-checklist-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 0.12em solid transparent;
  border-top-color: var(--c);
  border-right-color: var(--c);
  opacity: var(--a);
  animation: aia-agent-plan-checklist-spin 0.8s linear infinite;
}
.aia-agent-plan-checklist-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c);
  transform: scale(var(--p));
}
.aia-agent-plan-checklist-box svg {
  position: relative;
  z-index: 1;
  width: 0.72em;
  height: 0.72em;
  color: #fff;
  stroke-width: 3.4;
  opacity: var(--p);
  transform: scale(calc(0.4 + var(--p) * 0.6));
}
.aia-agent-plan-checklist-text {
  position: relative;
  white-space: nowrap;
  font-weight: calc(400 + var(--a) * 150);
  opacity: calc(1 - var(--p) * 0.45 - (1 - var(--a)) * (1 - var(--p)) * 0.4);
}
.aia-agent-plan-checklist-text::after {
  content: "";
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  top: 55%;
  height: 0.08em;
  background: currentColor;
  transform: scaleX(var(--p));
  transform-origin: left;
}
@keyframes aia-agent-plan-checklist-clock {
  0%, 16% { --aia-agent-plan-checklist-t: 0.5; }
  21%, 37% { --aia-agent-plan-checklist-t: 1.5; }
  42%, 58% { --aia-agent-plan-checklist-t: 2.5; }
  63%, 78% { --aia-agent-plan-checklist-t: 3.5; }
  83%, 96% { --aia-agent-plan-checklist-t: 4.5; }
  97%, 100% { --aia-agent-plan-checklist-t: 0.5; }
}
@keyframes aia-agent-plan-checklist-fade {
  0%, 92% { opacity: 1; }
  96%, 97% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes aia-agent-plan-checklist-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .aia-agent-plan-checklist,
  .aia-agent-plan-checklist-count,
  .aia-agent-plan-checklist-list {
    animation: none;
    --aia-agent-plan-checklist-t: 2.5;
  }
  .aia-agent-plan-checklist-box::before { animation-duration: 2.4s; }
}

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

Agent Plan Checklist

HTML

CSS

Customizing this snippet

Similar ai animations