AI CSS Animations

Browser Automation Agent

A labelled agent cursor in a mini browser clicks the email field, types ada@lovelace.dev, then presses Create account, while the action log under the window rolls through click, fill and wait.

Also known as: computer use form filling, playwright agent animation, ai filling a form.

click input#email fill "ada@lovelace.dev" click button "Create account" waitForURL /welcome

HTML

<div class="aia-browser-automation" role="status" aria-label="Agent filling in a sign up form">
  <div class="aia-browser-automation-win" aria-hidden="true">
    <div class="aia-browser-automation-bar">
      <i></i><i></i><i></i>
      <span class="aia-browser-automation-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>app.acme.dev/signup</span>
    </div>
    <div class="aia-browser-automation-page">
      <b class="aia-browser-automation-title">Create your account</b>
      <span class="aia-browser-automation-label">Work email</span>
      <span class="aia-browser-automation-input"><span class="aia-browser-automation-typed">ada@lovelace.dev</span><span class="aia-browser-automation-caret"></span></span>
      <span class="aia-browser-automation-btn"><span class="aia-browser-automation-go">Create account</span><span class="aia-browser-automation-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>Account created</span></span>
      <span class="aia-browser-automation-cursor"><svg viewBox="0 0 24 24"><path d="M5 3.5 19 11l-6.2 1.6L9.6 19z"/></svg><em>Claude</em></span>
    </div>
  </div>
  <p class="aia-browser-automation-log">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 5.5v13l10.5-6.5z"/></svg>
    <span class="aia-browser-automation-view">
      <span class="aia-browser-automation-roll">
        <span><b>click</b> input#email</span>
        <span><b>fill</b> "ada@lovelace.dev"</span>
        <span><b>click</b> button "Create account"</span>
        <span><b>waitForURL</b> /welcome</span>
      </span>
    </span>
  </p>
</div>

CSS

.aia-browser-automation {
  --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;
  --ok: color-mix(in srgb, #16a34a 78%, currentColor);
  display: grid;
  justify-items: center;
  gap: 0.55em;
}
.aia-browser-automation-win {
  width: 21em;
  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-browser-automation-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-browser-automation-bar > i {
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 18%, transparent);
}
.aia-browser-automation-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-browser-automation-url svg {
  width: 1em;
  height: 1em;
}
.aia-browser-automation-page {
  position: relative;
  height: 7.5em;
}
.aia-browser-automation-page > * { position: absolute; }
.aia-browser-automation-title {
  left: 1.6em;
  top: 0.6em;
  font-size: 0.8em;
  font-weight: 700;
}
.aia-browser-automation-label {
  left: 2em;
  top: 2.75em;
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-size: 0.62em;
  font-weight: 600;
}
.aia-browser-automation-input {
  left: 1.25em;
  right: 1.25em;
  top: 2.6em;
  display: flex;
  align-items: center;
  height: 1.75em;
  padding: 0 0.6em;
  box-sizing: border-box;
  border-radius: 0.45em;
  background: color-mix(in srgb, currentColor 3%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
  animation: aia-browser-automation-focus var(--d) ease infinite;
}
.aia-browser-automation-typed {
  display: inline-block;
  overflow: hidden;
  font: 0.72em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
  animation: aia-browser-automation-type var(--d) infinite;
}
.aia-browser-automation-caret {
  width: 0.08em;
  height: 0.95em;
  margin-left: 0.05em;
  background: var(--c);
  animation:
    aia-browser-automation-blink 0.9s steps(1) infinite,
    aia-browser-automation-caret var(--d) steps(1) infinite;
}
.aia-browser-automation-btn {
  left: 1.25em;
  right: 1.25em;
  top: 4.95em;
  display: grid;
  place-items: center;
  height: 1.75em;
  border-radius: 0.45em;
  background: var(--c);
  color: #fff;
  font-size: 1em;
  animation: aia-browser-automation-press var(--d) cubic-bezier(0.3, 1.4, 0.5, 1) infinite;
}
.aia-browser-automation-btn > * {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.72em;
  font-weight: 600;
}
.aia-browser-automation-go { animation: aia-browser-automation-go var(--d) ease infinite; }
.aia-browser-automation-ok { animation: aia-browser-automation-ok var(--d) ease infinite; }
.aia-browser-automation-ok svg {
  width: 1.15em;
  height: 1.15em;
  stroke-width: 3;
}
.aia-browser-automation-cursor {
  left: 0;
  top: 0;
  width: 1.15em;
  height: 1.15em;
  animation: aia-browser-automation-cursor var(--d) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.aia-browser-automation-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));
}
/* the name tag that rides with the cursor */
.aia-browser-automation-cursor em {
  position: absolute;
  left: 0.95em;
  top: 0.95em;
  padding: 0.15em 0.45em;
  border-radius: 0.3em 0.6em 0.6em 0.6em;
  background: var(--c);
  color: #fff;
  font: normal 600 0.55em system-ui, sans-serif;
  white-space: nowrap;
}
/* click ripple */
.aia-browser-automation-cursor::before {
  content: "";
  position: absolute;
  left: -0.4em;
  top: -0.4em;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 45%, transparent);
  opacity: 0;
  animation: aia-browser-automation-click var(--d) ease-out infinite;
}
.aia-browser-automation-log {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  padding: 0.25em 0.7em 0.25em 0.55em;
  border-radius: 999em;
  background: color-mix(in srgb, currentColor 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 9%, transparent);
  font: 0.72em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-browser-automation-log svg {
  width: 0.95em;
  height: 0.95em;
  color: var(--c);
  fill: currentColor;
}
.aia-browser-automation-view {
  height: 1.5em;
  overflow: hidden;
}
.aia-browser-automation-roll {
  display: grid;
  animation: aia-browser-automation-roll var(--d) cubic-bezier(0.34, 1.4, 0.64, 1) infinite;
}
.aia-browser-automation-roll span {
  height: 1.5em;
  line-height: 1.5em;
  color: color-mix(in srgb, currentColor 65%, transparent);
  white-space: nowrap;
}
.aia-browser-automation-roll b {
  color: color-mix(in srgb, var(--c) 80%, currentColor);
  font-weight: 600;
}
@keyframes aia-browser-automation-cursor {
  0% { transform: translate(16.6em, 0.55em); }
  13%, 44% { transform: translate(14.4em, 3.1em); }
  56%, 64% { transform: translate(15.3em, 5.45em); }
  80%, 100% { transform: translate(16.6em, 0.55em); }
}
@keyframes aia-browser-automation-click {
  0%, 13% { opacity: 0; transform: scale(0.3); }
  14% { opacity: 1; transform: scale(0.3); }
  20%, 56% { opacity: 0; transform: scale(1.7); }
  57% { opacity: 1; transform: scale(0.3); }
  63%, 100% { opacity: 0; transform: scale(1.7); }
}
@keyframes aia-browser-automation-focus {
  0%, 13%, 54%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); }
  15%, 52% { box-shadow: inset 0 0 0 1px var(--c), 0 0 0 0.2em color-mix(in srgb, var(--c) 20%, transparent); }
}
@keyframes aia-browser-automation-type {
  0%, 18% { width: 0; animation-timing-function: steps(16, end); }
  42%, 96% { width: 16ch; }
  97%, 100% { width: 0; }
}
@keyframes aia-browser-automation-caret {
  0%, 14% { visibility: hidden; }
  15%, 53% { visibility: visible; }
  54%, 100% { visibility: hidden; }
}
@keyframes aia-browser-automation-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@keyframes aia-browser-automation-press {
  0%, 56% { transform: none; background: var(--c); }
  58% { transform: scale(0.95); background: var(--c); }
  64% { transform: none; background: var(--c); }
  67%, 94% { transform: none; background: var(--ok); }
  97%, 100% { transform: none; background: var(--c); }
}
@keyframes aia-browser-automation-go {
  0%, 64%, 97%, 100% { opacity: 1; transform: none; }
  67%, 94% { opacity: 0; transform: translateY(-0.5em); }
}
@keyframes aia-browser-automation-ok {
  0%, 64%, 97%, 100% { opacity: 0; transform: translateY(0.5em); }
  68%, 94% { opacity: 1; transform: none; }
}
@keyframes aia-browser-automation-roll {
  0%, 15% { transform: translateY(0); }
  18%, 54% { transform: translateY(-1.5em); }
  57%, 64% { transform: translateY(-3em); }
  67%, 96% { transform: translateY(-4.5em); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .aia-browser-automation *,
  .aia-browser-automation *::before {
    animation-play-state: paused;
    animation-delay: calc(var(--d) * -0.4);
  }
}

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