AI CSS Animations

Agent Is Browsing

A mini browser on docs.stripe.com where an agent's cursor clicks Refunds in the sidebar, the page scrolls, a highlight sweeps the lines it reads and a click lands on Copy. Built from skeleton blocks.

Also known as: ai browsing animation, computer use agent ui, browser agent animation.

Reading the Refunds API reference

HTML

<div class="aia-agent-browsing" role="status" aria-label="Agent is browsing docs.stripe.com">
  <div class="aia-agent-browsing-win" aria-hidden="true">
    <div class="aia-agent-browsing-bar">
      <i></i><i></i><i></i>
      <span class="aia-agent-browsing-url"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6" y="11" width="12" height="9" rx="2"/><path d="M8.5 11V8.5a3.5 3.5 0 0 1 7 0V11"/></svg>docs.stripe.com/api/refunds</span>
    </div>
    <div class="aia-agent-browsing-page">
      <div class="aia-agent-browsing-nav"><i></i><i></i><i class="aia-agent-browsing-pick"></i><i></i><i></i></div>
      <div class="aia-agent-browsing-main">
        <div class="aia-agent-browsing-scroll">
          <b class="aia-agent-browsing-h"></b>
          <i></i><i></i><i class="aia-agent-browsing-short"></i>
          <span class="aia-agent-browsing-code"><i></i><i></i><i></i><u>Copy</u></span>
          <i></i><i class="aia-agent-browsing-short"></i>
        </div>
        <span class="aia-agent-browsing-read"></span>
      </div>
    </div>
    <span class="aia-agent-browsing-cursor"><svg viewBox="0 0 24 24"><path d="M5 3.5 19 11l-6.2 1.6L9.6 19z"/></svg></span>
  </div>
  <p class="aia-agent-browsing-cap"><i aria-hidden="true"></i>Reading the Refunds API reference</p>
</div>

CSS

.aia-agent-browsing {
  --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;
  --d: 8s;
  display: grid;
  justify-items: center;
  gap: 0.6em;
}
.aia-agent-browsing-win {
  position: relative;
  width: 22em;
  overflow: hidden;
  border-radius: 0.75em;
  background: color-mix(in srgb, currentColor 3%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 11%, transparent), 0 1em 2em -1.1em rgb(0 0 0 / 0.35);
}
.aia-agent-browsing-bar {
  display: flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.45em 0.6em;
  border-bottom: 1px solid color-mix(in srgb, currentColor 9%, transparent);
}
.aia-agent-browsing-bar > i {
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 18%, transparent);
}
.aia-agent-browsing-url {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin: 0 auto;
  padding: 0.2em 0.8em;
  border-radius: 999em;
  background: color-mix(in srgb, currentColor 6%, transparent);
  color: color-mix(in srgb, currentColor 65%, transparent);
  font-size: 0.7em;
}
.aia-agent-browsing-url svg {
  width: 1em;
  height: 1em;
}
.aia-agent-browsing-page {
  display: grid;
  grid-template-columns: 5em 1fr;
  height: 8.6em;
}
.aia-agent-browsing-nav {
  display: grid;
  align-content: start;
  gap: 0.55em;
  padding: 0.8em 0.6em;
  border-right: 1px solid color-mix(in srgb, currentColor 8%, transparent);
}
.aia-agent-browsing-nav i,
.aia-agent-browsing-scroll > i {
  height: 0.38em;
  border-radius: 1em;
  background: color-mix(in srgb, currentColor 11%, transparent);
}
.aia-agent-browsing-nav i:nth-child(2n) { width: 75%; }
.aia-agent-browsing-pick {
  animation: aia-agent-browsing-pick var(--d) ease infinite;
}
.aia-agent-browsing-main {
  position: relative;
  overflow: hidden;
}
.aia-agent-browsing-scroll {
  display: grid;
  gap: 0.5em;
  padding: 0.8em 0.9em;
  animation: aia-agent-browsing-scroll var(--d) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.aia-agent-browsing-h {
  width: 55%;
  height: 0.75em;
  margin-bottom: 0.15em;
  border-radius: 0.3em;
  background: color-mix(in srgb, currentColor 22%, transparent);
}
.aia-agent-browsing-scroll > .aia-agent-browsing-short { width: 60%; }
.aia-agent-browsing-code {
  position: relative;
  display: grid;
  gap: 0.4em;
  padding: 0.6em 0.7em;
  border-radius: 0.45em;
  background: color-mix(in srgb, var(--c) 6%, #15151b);
}
.aia-agent-browsing-code i {
  width: 70%;
  height: 0.32em;
  border-radius: 1em;
  background: color-mix(in srgb, var(--c) 55%, #fff);
  opacity: 0.55;
}
.aia-agent-browsing-code i:nth-child(2) { width: 45%; background: #86efac; }
.aia-agent-browsing-code i:nth-child(3) { width: 58%; background: rgb(255 255 255 / 0.6); }
.aia-agent-browsing-code u {
  position: absolute;
  right: 0.5em;
  top: 0.45em;
  padding: 0.15em 0.45em;
  border-radius: 0.3em;
  background: rgb(255 255 255 / 0.1);
  color: rgb(255 255 255 / 0.75);
  font-size: 0.6em;
  text-decoration: none;
  animation: aia-agent-browsing-copy var(--d) ease infinite;
}
/* the reading highlight sweeping two lines */
.aia-agent-browsing-read {
  position: absolute;
  left: 0.7em;
  top: 1.95em;
  width: calc(100% - 1.4em);
  height: 1.35em;
  border-radius: 0.3em;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  box-shadow: inset 0.14em 0 0 var(--c);
  transform-origin: left;
  animation: aia-agent-browsing-read var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-agent-browsing-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.15em;
  height: 1.15em;
  animation: aia-agent-browsing-cursor var(--d) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.aia-agent-browsing-cursor svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--c);
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 0.1em 0.15em rgb(0 0 0 / 0.35));
}
/* click ripple */
.aia-agent-browsing-cursor::before {
  content: "";
  position: absolute;
  left: -0.45em;
  top: -0.45em;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 45%, transparent);
  opacity: 0;
  animation: aia-agent-browsing-click var(--d) ease-out infinite;
}
.aia-agent-browsing-cap {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  color: color-mix(in srgb, currentColor 60%, transparent);
  font-size: 0.8em;
}
.aia-agent-browsing-cap i {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--c);
  animation: aia-agent-browsing-blink 1.2s ease-in-out infinite;
}
@keyframes aia-agent-browsing-cursor {
  0% { transform: translate(17em, 7.5em); }
  14%, 22% { transform: translate(1.6em, 4.05em); }
  36%, 40% { transform: translate(9em, 4.4em); }
  54% { transform: translate(18em, 4.4em); }
  68%, 80% { transform: translate(19.3em, 5.35em); }
  100% { transform: translate(17em, 7.5em); }
}
@keyframes aia-agent-browsing-click {
  0%, 15% { opacity: 0; transform: scale(0.3); }
  16% { opacity: 1; transform: scale(0.3); }
  22%, 69% { opacity: 0; transform: scale(1.6); }
  70% { opacity: 1; transform: scale(0.3); }
  76%, 100% { opacity: 0; transform: scale(1.6); }
}
@keyframes aia-agent-browsing-pick {
  0%, 15%, 96%, 100% { background: color-mix(in srgb, currentColor 11%, transparent); }
  17%, 92% { background: var(--c); }
}
@keyframes aia-agent-browsing-scroll {
  0%, 22% { transform: translateY(0); }
  32%, 90% { transform: translateY(-1.2em); }
  100% { transform: translateY(0); }
}
@keyframes aia-agent-browsing-read {
  0%, 36% { opacity: 0; transform: scaleX(0); }
  38% { opacity: 1; transform: scaleX(0.05); }
  54% { opacity: 1; transform: scaleX(1); }
  62%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes aia-agent-browsing-copy {
  0%, 69% { background: rgb(255 255 255 / 0.1); }
  71%, 86% { background: var(--c); color: #fff; }
  92%, 100% { background: rgb(255 255 255 / 0.1); }
}
@keyframes aia-agent-browsing-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-agent-browsing *,
  .aia-agent-browsing *::before {
    animation-play-state: paused;
    animation-delay: calc(var(--d) * -0.45);
  }
}

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