AI CSS Animations

Shopping Agent Paused at Checkout

A shopping agent builds an order line by line while the total rolls up to $189.01, then stops short of paying: an amber Paused before purchase note drops in and a Confirm purchase button pulses.

Also known as: ai shopping agent, confirm purchase ui, agentic checkout.

Order at Northwind SupplyVisa 0471
  • Trail running shoes, size 10$129.00
  • Merino socks, 3 pack$36.00
  • Shipping, 2 day$9.95
  • Tax$14.06

Total

Adding to cartPaused before purchase

HTML

<div class="aia-checkout-confirm-pause" role="status" aria-label="Agent paused before purchase, total $189.01">
  <div class="aia-checkout-confirm-pause-head"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 4.5h2.2l2 10.5h10l1.8-7.5H7"/><circle cx="9.5" cy="19" r="1.3"/><circle cx="16.5" cy="19" r="1.3"/></svg><b>Order at Northwind Supply</b><span>Visa 0471</span></div>
  <ul class="aia-checkout-confirm-pause-lines">
    <li style="--i: 1"><i class="aia-checkout-confirm-pause-thumb"></i><span>Trail running shoes, size 10</span><b>$129.00</b></li>
    <li style="--i: 2"><i class="aia-checkout-confirm-pause-thumb"></i><span>Merino socks, 3 pack</span><b>$36.00</b></li>
    <li style="--i: 3"><span>Shipping, 2 day</span><b>$9.95</b></li>
    <li style="--i: 4"><span>Tax</span><b>$14.06</b></li>
  </ul>
  <p class="aia-checkout-confirm-pause-total"><span>Total</span><b aria-hidden="true"></b></p>
  <div class="aia-checkout-confirm-pause-foot">
    <span class="aia-checkout-confirm-pause-state"><span class="aia-checkout-confirm-pause-busy">Adding to cart</span><span class="aia-checkout-confirm-pause-note"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.5 6.5v11M14.5 6.5v11"/></svg>Paused before purchase</span></span>
    <button type="button" class="aia-checkout-confirm-pause-buy">Confirm purchase</button>
  </div>
</div>

CSS

@property --aia-checkout-confirm-pause-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --aia-checkout-confirm-pause-ct {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --aia-checkout-confirm-pause-dol {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --aia-checkout-confirm-pause-rem {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.aia-checkout-confirm-pause {
  --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-checkout-confirm-pause-t);
  --amber: color-mix(in srgb, #d97706 84%, currentColor);
  --stop: clamp(0, (var(--t) - 5.3) * 5, 1);
  width: 22em;
  padding: 0.75em 0.9em 0.7em;
  animation:
    aia-checkout-confirm-pause-clock var(--d) linear infinite,
    aia-checkout-confirm-pause-fade var(--d) linear infinite;
}
.aia-checkout-confirm-pause-head {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin-bottom: 0.4em;
  font-size: 0.8em;
}
.aia-checkout-confirm-pause-head svg {
  width: 1.15em;
  height: 1.15em;
  color: color-mix(in srgb, var(--c) 80%, currentColor);
}
.aia-checkout-confirm-pause-head b { margin-right: auto; }
.aia-checkout-confirm-pause-head span {
  color: color-mix(in srgb, currentColor 50%, transparent);
  font: 0.9em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-checkout-confirm-pause-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}
.aia-checkout-confirm-pause-lines li {
  --a: clamp(0, (var(--t) - var(--i)) * 4, 1);
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 1.55em;
  font-size: 0.8em;
  opacity: calc(0.12 + var(--a) * 0.88);
  transform: translateX(calc((1 - var(--a)) * 0.6em));
}
.aia-checkout-confirm-pause-lines li:nth-child(n + 3) { color: color-mix(in srgb, currentColor 60%, transparent); }
.aia-checkout-confirm-pause-thumb {
  width: 1.3em;
  height: 1.3em;
  border-radius: 0.3em;
  background: linear-gradient(135deg, #fb923c, #e11d48);
}
.aia-checkout-confirm-pause-lines li:nth-child(2) .aia-checkout-confirm-pause-thumb { background: linear-gradient(135deg, #94a3b8, #475569); }
.aia-checkout-confirm-pause-lines li:nth-child(n + 3) span { padding-left: 1.8em; }
.aia-checkout-confirm-pause-lines b {
  margin-left: auto;
  font: 500 0.95em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-checkout-confirm-pause-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0.3em 0 0.55em;
  padding-top: 0.4em;
  border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  font-size: 0.9em;
  font-weight: 650;
}
.aia-checkout-confirm-pause-total b {
  font: 650 1.05em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  --aia-checkout-confirm-pause-ct: calc(12900 * clamp(0, (var(--t) - 1) * 2, 1) + 3600 * clamp(0, (var(--t) - 2) * 2, 1) + 995 * clamp(0, (var(--t) - 3) * 2, 1) + 1406 * clamp(0, (var(--t) - 4) * 2, 1));
  --aia-checkout-confirm-pause-dol: calc(var(--aia-checkout-confirm-pause-ct) / 100 - 0.5);
  --aia-checkout-confirm-pause-rem: calc(var(--aia-checkout-confirm-pause-ct) - var(--aia-checkout-confirm-pause-dol) * 100);
  counter-reset: d var(--aia-checkout-confirm-pause-dol) r var(--aia-checkout-confirm-pause-rem);
}
.aia-checkout-confirm-pause-total b::before { content: "$" counter(d) "." counter(r, decimal-leading-zero); }
.aia-checkout-confirm-pause-foot {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 0.45em 0.45em 0.7em;
  border-radius: 0.65em;
  background: color-mix(in srgb, #d97706 calc(var(--stop) * 12%), color-mix(in srgb, currentColor 4%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #d97706 calc(var(--stop) * 35%), color-mix(in srgb, currentColor 8%, transparent));
}
.aia-checkout-confirm-pause-state {
  display: grid;
  margin-right: auto;
  font-size: 0.76em;
  font-weight: 600;
  white-space: nowrap;
}
.aia-checkout-confirm-pause-state > * {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 0.35em;
}
.aia-checkout-confirm-pause-busy {
  color: color-mix(in srgb, currentColor 55%, transparent);
  opacity: calc(1 - var(--stop));
}
.aia-checkout-confirm-pause-busy::before {
  content: "";
  box-sizing: border-box;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 0.15em solid color-mix(in srgb, var(--c) 22%, transparent);
  border-top-color: var(--c);
  animation: aia-checkout-confirm-pause-spin 0.8s linear infinite;
}
.aia-checkout-confirm-pause-note {
  color: var(--amber);
  opacity: var(--stop);
  transform: translateY(calc((1 - var(--stop)) * -0.5em));
}
.aia-checkout-confirm-pause-note svg {
  width: 1.2em;
  height: 1.2em;
  stroke-width: 2.8;
}
.aia-checkout-confirm-pause-buy {
  position: relative;
  padding: 0.5em 0.9em;
  border: 0;
  border-radius: 0.5em;
  background: color-mix(in srgb, var(--c) calc(var(--stop) * 100%), color-mix(in srgb, currentColor 10%, transparent));
  color: color-mix(in srgb, #fff calc(var(--stop) * 100%), color-mix(in srgb, currentColor 40%, transparent));
  font: 600 0.78em system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.aia-checkout-confirm-pause-buy:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.aia-checkout-confirm-pause-buy::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: var(--stop);
  animation: aia-checkout-confirm-pause-pulse 1.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
@keyframes aia-checkout-confirm-pause-clock {
  0%, 5% { --aia-checkout-confirm-pause-t: 0.6; }
  14%, 18% { --aia-checkout-confirm-pause-t: 1.6; }
  27%, 31% { --aia-checkout-confirm-pause-t: 2.6; }
  37%, 40% { --aia-checkout-confirm-pause-t: 3.6; }
  46%, 52% { --aia-checkout-confirm-pause-t: 4.6; }
  58%, 97% { --aia-checkout-confirm-pause-t: 5.6; }
  98%, 100% { --aia-checkout-confirm-pause-t: 0.6; }
}
@keyframes aia-checkout-confirm-pause-spin {
  to { transform: rotate(360deg); }
}
@keyframes aia-checkout-confirm-pause-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 0.55em color-mix(in srgb, var(--c) 0%, transparent); }
}
@keyframes aia-checkout-confirm-pause-fade {
  0%, 94% { opacity: 1; }
  98%, 99% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-checkout-confirm-pause {
    animation: none;
    --aia-checkout-confirm-pause-t: 5.6;
  }
  .aia-checkout-confirm-pause-buy::after,
  .aia-checkout-confirm-pause-busy::before { animation: none; }
}

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