AI CSS Animations

Agent Inspecting a Screenshot

The agent studies a checkout screenshot: a scan line sweeps it, a dashed box hops between candidates, then snaps onto the Place order button with corner brackets and a label giving its coordinates.

Also known as: vision model ui detection, screenshot analysis animation, ai finds element on screen.

checkout.png1440 x 900

HTML

<div class="aia-screenshot-inspect" role="status" aria-label="Agent locating the Place order button in a screenshot">
  <div class="aia-screenshot-inspect-head">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="5" width="17" height="14" rx="2"/><circle cx="9" cy="10" r="1.6"/><path d="m20.5 16-5-5-8 8"/></svg><code>checkout.png</code><span>1440 x 900</span>
  </div>
  <div class="aia-screenshot-inspect-shot" aria-hidden="true">
    <span class="aia-screenshot-inspect-nav"><i></i><i></i><i></i><i></i></span>
    <span class="aia-screenshot-inspect-h"></span>
    <span class="aia-screenshot-inspect-l1"></span>
    <span class="aia-screenshot-inspect-l2"></span>
    <span class="aia-screenshot-inspect-img"></span>
    <span class="aia-screenshot-inspect-card"><i></i><i></i><i></i><i></i></span>
    <span class="aia-screenshot-inspect-btn">Place order</span>
    <span class="aia-screenshot-inspect-scan"></span>
    <span class="aia-screenshot-inspect-box"><i></i></span>
    <span class="aia-screenshot-inspect-tag">button "Place order" <em>1128, 642</em></span>
  </div>
</div>

CSS

.aia-screenshot-inspect {
  --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;
  width: 21em;
  padding: 0.7em 0.8em 0.8em;
}
.aia-screenshot-inspect-head {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0 0.1em 0.55em;
  font-size: 0.74em;
}
.aia-screenshot-inspect-head svg {
  width: 1.15em;
  height: 1.15em;
  color: var(--c);
}
.aia-screenshot-inspect-head code { font: 600 1em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; }
.aia-screenshot-inspect-head span {
  margin-left: auto;
  color: color-mix(in srgb, currentColor 45%, transparent);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-screenshot-inspect-shot {
  position: relative;
  height: 9.2em;
  overflow: hidden;
  border-radius: 0.5em;
  background: color-mix(in srgb, currentColor 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 10%, transparent);
}
.aia-screenshot-inspect-shot > * { position: absolute; }
.aia-screenshot-inspect-nav {
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.6em;
  height: 1.5em;
  padding: 0 0.7em;
  border-bottom: 1px solid color-mix(in srgb, currentColor 9%, transparent);
}
.aia-screenshot-inspect-nav i {
  width: 1.8em;
  height: 0.32em;
  border-radius: 1em;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.aia-screenshot-inspect-nav i:first-child {
  width: 0.7em;
  height: 0.7em;
  margin-right: auto;
  border-radius: 0.2em;
  background: color-mix(in srgb, var(--c) 60%, transparent);
}
.aia-screenshot-inspect-h,
.aia-screenshot-inspect-l1,
.aia-screenshot-inspect-l2,
.aia-screenshot-inspect-card i {
  height: 0.36em;
  border-radius: 1em;
  background: color-mix(in srgb, currentColor 13%, transparent);
}
.aia-screenshot-inspect-h {
  left: 0.8em;
  top: 2.3em;
  width: 6.5em;
  height: 0.65em;
  background: color-mix(in srgb, currentColor 24%, transparent);
}
.aia-screenshot-inspect-l1 { left: 0.8em; top: 3.5em; width: 8.5em; }
.aia-screenshot-inspect-l2 { left: 0.8em; top: 4.2em; width: 6em; }
.aia-screenshot-inspect-img {
  left: 0.8em;
  top: 5.2em;
  width: 8.5em;
  height: 3.2em;
  border-radius: 0.35em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, transparent), color-mix(in srgb, currentColor 8%, transparent));
}
.aia-screenshot-inspect-card {
  left: 10.5em;
  top: 2.1em;
  width: 7.4em;
  height: 6.4em;
  display: grid;
  align-content: start;
  gap: 0.55em;
  padding: 0.65em;
  box-sizing: border-box;
  border-radius: 0.45em;
  background: color-mix(in srgb, currentColor 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 10%, transparent);
}
.aia-screenshot-inspect-card i:first-child { width: 60%; background: color-mix(in srgb, currentColor 24%, transparent); }
.aia-screenshot-inspect-card i:nth-child(3) { width: 80%; }
.aia-screenshot-inspect-card i:nth-child(4) { width: 45%; }
.aia-screenshot-inspect-btn {
  left: 11.1em;
  top: 6.75em;
  width: 6.2em;
  height: 1.25em;
  display: grid;
  place-items: center;
  border-radius: 0.35em;
  background: color-mix(in srgb, var(--c) 70%, color-mix(in srgb, currentColor 40%, transparent));
  color: #fff;
  font-size: 1em;
}
.aia-screenshot-inspect-btn {
  font-size: 0.6em;
  font-weight: 600;
  left: calc(11.1em / 0.6);
  top: calc(6.75em / 0.6);
  width: calc(6.2em / 0.6);
  height: calc(1.25em / 0.6);
}
.aia-screenshot-inspect-scan {
  left: 0;
  right: 0;
  top: 0;
  height: 2.5em;
  background: linear-gradient(transparent, color-mix(in srgb, var(--c) 16%, transparent) 85%, var(--c) 85%, var(--c) 88%, transparent 88%);
  animation: aia-screenshot-inspect-scan var(--d) cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.aia-screenshot-inspect-box {
  left: 0;
  top: 0;
  border-radius: 0.3em;
  animation: aia-screenshot-inspect-box var(--d) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
/* corner brackets that clamp on when it locks */
.aia-screenshot-inspect-box i {
  position: absolute;
  inset: -0.3em;
  --b: 0.14em;
  --s: 0.6em;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--s) var(--b),
    linear-gradient(var(--c), var(--c)) 0 0 / var(--b) var(--s),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--s) var(--b),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--b) var(--s),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--s) var(--b),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--b) var(--s),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--s) var(--b),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--b) var(--s);
  background-repeat: no-repeat;
  animation: aia-screenshot-inspect-lock var(--d) cubic-bezier(0.34, 1.6, 0.64, 1) infinite;
}
.aia-screenshot-inspect-tag {
  left: 7.6em;
  top: 5.05em;
  display: inline-flex;
  gap: 0.5em;
  padding: 0.25em 0.55em;
  border-radius: 0.35em;
  background: var(--c);
  color: #fff;
  font: 600 0.58em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
  box-shadow: 0 0.4em 1em -0.3em rgb(0 0 0 / 0.4);
  animation: aia-screenshot-inspect-tag var(--d) cubic-bezier(0.34, 1.5, 0.64, 1) infinite;
}
.aia-screenshot-inspect-tag {
  left: auto;
  right: calc(1.6em / 0.58);
  top: calc(5.15em / 0.58);
  transform-origin: right bottom;
}
.aia-screenshot-inspect-tag em {
  font-style: normal;
  opacity: 0.75;
}
@keyframes aia-screenshot-inspect-scan {
  0% { opacity: 0; transform: translateY(-2.5em); }
  2% { opacity: 1; }
  24% { opacity: 1; transform: translateY(9.2em); }
  25%, 100% { opacity: 0; transform: translateY(9.2em); }
}
@keyframes aia-screenshot-inspect-box {
  0%, 22% { opacity: 0; transform: translate(0.5em, 1.9em); width: 7.3em; height: 1.1em; box-shadow: inset 0 0 0 0.1em var(--c); background: transparent; }
  26%, 32% { opacity: 1; transform: translate(0.5em, 1.9em); width: 7.3em; height: 1.1em; box-shadow: inset 0 0 0 0.1em var(--c); background: transparent; }
  40%, 46% { opacity: 1; transform: translate(0.5em, 4.9em); width: 9.1em; height: 3.8em; box-shadow: inset 0 0 0 0.1em var(--c); background: transparent; }
  54%, 58% { opacity: 1; transform: translate(10.25em, 1.85em); width: 7.9em; height: 1.05em; box-shadow: inset 0 0 0 0.1em var(--c); background: transparent; }
  66%, 93% { opacity: 1; transform: translate(10.95em, 6.6em); width: 6.5em; height: 1.55em; box-shadow: inset 0 0 0 0.1em var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
  97%, 100% { opacity: 0; transform: translate(10.95em, 6.6em); width: 6.5em; height: 1.55em; box-shadow: inset 0 0 0 0.1em var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
}
@keyframes aia-screenshot-inspect-lock {
  0%, 65% { opacity: 0; transform: scale(1.5); }
  70%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes aia-screenshot-inspect-tag {
  0%, 69% { opacity: 0; transform: translateY(0.6em) scale(0.8); }
  75%, 93% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-screenshot-inspect *,
  .aia-screenshot-inspect * * {
    animation-play-state: paused;
    animation-delay: calc(var(--d) * -0.85);
  }
}

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