AI CSS Animations

Queued Follow-up Message

A follow-up typed mid-run waits in a dashed bubble with a Sends after this step chip. When pnpm test passes, the bubble lifts into the thread, fills solid, flips to Delivered and Claude replies.

Also known as: queue message while agent works, message queued ui, send after current step.

Running pnpm test Step 3 of 548 passed

Also bump the version to 2.4.1 Sends after this stepDelivered

Got it. I'll bump package.json to 2.4.1 next.

HTML

<div class="aia-queued-message" role="status" aria-label="Your message is queued and sends after this step">
  <p class="aia-queued-message-step">
    <span class="aia-queued-message-st" aria-hidden="true"><i></i><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>Running <code>pnpm test</code></span>
    <span class="aia-queued-message-of"><em>Step 3 of 5</em><em>48 passed</em></span>
  </p>
  <div class="aia-queued-message-thread">
    <p class="aia-queued-message-mine">
      <span class="aia-queued-message-bubble">Also bump the version to 2.4.1</span>
      <span class="aia-queued-message-chip"><span class="aia-queued-message-q"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>Sends after this step</span><span class="aia-queued-message-ok"><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>Delivered</span></span>
    </p>
    <p class="aia-queued-message-reply"><span 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>Got it. I'll bump package.json to 2.4.1 next.</p>
  </div>
  <div class="aia-queued-message-box" aria-hidden="true"><span>Message Claude</span><i><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 18.5v-13M6.5 11 12 5.5l5.5 5.5"/></svg></i></div>
</div>

CSS

@property --aia-queued-message-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.aia-queued-message {
  --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: 8s;
  --t: var(--aia-queued-message-t);
  --k: clamp(0, (var(--t) - 1) * 8, 1);
  --m: clamp(0, (var(--t) - 1.15) * 1.3, 1);
  --r: clamp(0, (var(--t) - 2.2) * 1.5, 1);
  width: 21.5em;
  padding: 0.8em 0.9em 0.8em;
  animation: aia-queued-message-clock var(--d) cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.aia-queued-message-step,
.aia-queued-message-thread,
.aia-queued-message-box {
  animation: aia-queued-message-fade var(--d) linear infinite;
}
.aia-queued-message-step {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin: 0;
  font-size: 0.82em;
}
.aia-queued-message-step code {
  padding: 0.08em 0.38em;
  border-radius: 0.35em;
  background: color-mix(in srgb, currentColor 7%, transparent);
  font: 500 0.92em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-queued-message-st {
  display: grid;
  place-items: center;
  width: 1.1em;
  height: 1.1em;
}
.aia-queued-message-st > * { grid-area: 1 / 1; }
.aia-queued-message-st i {
  box-sizing: border-box;
  width: 0.95em;
  height: 0.95em;
  border-radius: 50%;
  border: 0.15em solid color-mix(in srgb, var(--c) 22%, transparent);
  border-top-color: var(--c);
  opacity: calc(1 - var(--k));
  animation: aia-queued-message-spin 0.8s linear infinite;
}
.aia-queued-message-st svg {
  width: 1.1em;
  height: 1.1em;
  color: color-mix(in srgb, #16a34a 78%, currentColor);
  stroke-width: 3;
  opacity: var(--k);
  transform: scale(calc(0.5 + var(--k) * 0.5));
}
.aia-queued-message-of {
  display: grid;
  margin-left: auto;
  justify-items: end;
  font: 500 0.88em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-queued-message-of em {
  grid-area: 1 / 1;
  font-style: normal;
  white-space: nowrap;
}
.aia-queued-message-of em:first-child {
  color: color-mix(in srgb, currentColor 50%, transparent);
  opacity: calc(1 - var(--k));
}
.aia-queued-message-of em:last-child {
  color: color-mix(in srgb, #16a34a 78%, currentColor);
  opacity: var(--k);
}
.aia-queued-message-thread {
  position: relative;
  height: 6.5em;
}
.aia-queued-message-mine {
  position: absolute;
  right: 0;
  top: 0.45em;
  display: grid;
  justify-items: end;
  gap: 0.25em;
  margin: 0;
  transform: translateY(calc((1 - var(--m)) * 2.15em));
}
.aia-queued-message-chip {
  display: grid;
  justify-items: end;
  font-size: 0.68em;
  font-weight: 600;
}
.aia-queued-message-chip > * {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.25em 0.6em;
  border-radius: 999em;
  white-space: nowrap;
}
.aia-queued-message-chip svg {
  width: 1.15em;
  height: 1.15em;
  stroke-width: 2.4;
}
.aia-queued-message-q {
  background: color-mix(in srgb, #d97706 13%, transparent);
  color: color-mix(in srgb, #d97706 84%, currentColor);
  opacity: calc(1 - clamp(0, var(--m) * 3, 1));
  animation: aia-queued-message-breathe 2s ease-in-out infinite;
}
.aia-queued-message-ok {
  color: color-mix(in srgb, currentColor 50%, transparent);
  opacity: clamp(0, (var(--m) - 0.6) * 3, 1);
}
.aia-queued-message-bubble {
  padding: 0.5em 0.8em;
  border: 1px dashed color-mix(in srgb, var(--c) calc(55% + var(--m) * 45%), transparent);
  border-radius: 0.9em 0.9em 0.3em 0.9em;
  background: color-mix(in srgb, var(--c) calc(var(--m) * 100%), transparent);
  color: color-mix(in srgb, #fff calc(var(--m) * 100%), color-mix(in srgb, currentColor 72%, transparent));
  font-size: 0.82em;
  white-space: nowrap;
  box-shadow: 0 0.4em 1em -0.5em color-mix(in srgb, var(--c) calc(var(--m) * 70%), transparent);
}
.aia-queued-message-reply {
  position: absolute;
  left: 0;
  top: 5.2em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  font-size: 0.82em;
  white-space: nowrap;
  opacity: var(--r);
  transform: translateY(calc((1 - var(--r)) * 0.5em));
  filter: blur(calc((1 - var(--r)) * 0.15em));
}
.aia-queued-message-reply > span {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.45em;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
}
.aia-queued-message-reply svg {
  width: 0.95em;
  height: 0.95em;
  fill: currentColor;
  stroke: none;
}
.aia-queued-message-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.15em;
  padding: 0 0.35em 0 0.8em;
  border-radius: 0.65em;
  background: color-mix(in srgb, currentColor 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
  color: color-mix(in srgb, currentColor 40%, transparent);
  font-size: 0.8em;
}
.aia-queued-message-box i {
  display: grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: color-mix(in srgb, currentColor 60%, transparent);
}
.aia-queued-message-box svg {
  width: 0.95em;
  height: 0.95em;
  stroke-width: 2.6;
}
@keyframes aia-queued-message-clock {
  0%, 3% { --aia-queued-message-t: 0; }
  34% { --aia-queued-message-t: 1; }
  38% { --aia-queued-message-t: 1.15; }
  50% { --aia-queued-message-t: 2; }
  62% { --aia-queued-message-t: 3; }
  66%, 95.5% { --aia-queued-message-t: 3.2; }
  96.5%, 100% { --aia-queued-message-t: 0; }
}
@keyframes aia-queued-message-fade {
  0%, 93% { opacity: 1; }
  95.5%, 97% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes aia-queued-message-spin {
  to { transform: rotate(360deg); }
}
@keyframes aia-queued-message-breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #d97706 0%, transparent); }
  50% { box-shadow: 0 0 0 0.25em color-mix(in srgb, #d97706 14%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .aia-queued-message,
  .aia-queued-message * {
    animation: none;
  }
  .aia-queued-message { --aia-queued-message-t: 0.6; }
}

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