AI CSS Animations

AI Cursor in a Shared Doc

A shared doc where Maya's cursor sits on a selected word while a labeled Claude cursor writes a new sentence word by word, each fresh word glowing in the accent before it settles into the page.

Also known as: multiplayer cursor animation, ai coauthor cursor, collaborative editing cursor.

Rollout

Rate limits for the public API go live on Oct 14.

Support needs a saved reply for 429 errors by then.

Ship behind the limits_v2 flag and ramp to 100% over a week.

HTML

<div class="aia-ai-collab-cursor-doc" role="status" aria-label="Claude is editing the doc with Maya">
  <div class="aia-ai-collab-cursor-doc-bar" 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="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg><b>Q3 launch plan</b><span><i></i>Maya</span><span><i></i>Claude</span></div>
  <div class="aia-ai-collab-cursor-doc-page">
    <h4>Rollout</h4>
    <p>Rate limits for the public API go live on <mark class="aia-ai-collab-cursor-doc-sel">Oct 14<span class="aia-ai-collab-cursor-doc-maya" aria-hidden="true"><b>Maya</b></span></mark>.</p>
    <p>Support needs a saved reply for 429 errors by then.</p>
    <p class="aia-ai-collab-cursor-doc-new"><span style="--k: 1">Ship </span><span style="--k: 2">behind </span><span style="--k: 3">the </span><span style="--k: 4"><code>limits_v2</code> </span><span style="--k: 5">flag </span><span style="--k: 6">and </span><span style="--k: 7">ramp </span><span style="--k: 8">to </span><span style="--k: 9">100% </span><span style="--k: 10">over </span><span style="--k: 11">a </span><span style="--k: 12">week.</span><i class="aia-ai-collab-cursor-doc-claude" aria-hidden="true"><b>Claude</b></i></p>
  </div>
</div>

CSS

@property --aia-ai-collab-cursor-doc-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}
.aia-ai-collab-cursor-doc {
  --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-ai-collab-cursor-doc-t);
  --maya: #db2777;
  width: 23em;
  padding: 0;
  overflow: hidden;
  animation:
    aia-ai-collab-cursor-doc-clock var(--d) linear infinite,
    aia-ai-collab-cursor-doc-fade var(--d) linear infinite;
}
.aia-ai-collab-cursor-doc-bar {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.55em 0.85em;
  border-bottom: 1px solid color-mix(in srgb, currentColor 9%, transparent);
  font-size: 0.78em;
}
.aia-ai-collab-cursor-doc-bar svg {
  width: 1.1em;
  height: 1.1em;
  color: color-mix(in srgb, currentColor 50%, transparent);
}
.aia-ai-collab-cursor-doc-bar b {
  margin-right: auto;
  font-weight: 600;
}
.aia-ai-collab-cursor-doc-bar span {
  display: flex;
  align-items: center;
  gap: 0.3em;
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-size: 0.92em;
}
.aia-ai-collab-cursor-doc-bar span i {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--maya);
}
.aia-ai-collab-cursor-doc-bar span + span i { background: var(--c); }
.aia-ai-collab-cursor-doc-page {
  padding: 0.7em 1.1em 0.9em;
  font-size: 0.84em;
  line-height: 1.55;
}
.aia-ai-collab-cursor-doc-page h4 {
  margin: 0 0 0.2em;
  font-size: 1.05em;
}
.aia-ai-collab-cursor-doc-page p {
  margin: 0 0 0.3em;
  color: color-mix(in srgb, currentColor 78%, transparent);
}
.aia-ai-collab-cursor-doc-sel {
  position: relative;
  border-radius: 0.15em;
  color: inherit;
  animation: aia-ai-collab-cursor-doc-select var(--d) ease infinite;
}
/* Maya's caret and name flag, at the end of her selection */
.aia-ai-collab-cursor-doc-maya {
  position: absolute;
  right: -0.06em;
  top: 0.05em;
  bottom: 0.05em;
  width: 0.12em;
  background: var(--maya);
}
.aia-ai-collab-cursor-doc-maya b,
.aia-ai-collab-cursor-doc-claude b {
  position: absolute;
  left: 0;
  bottom: 100%;
  padding: 0.12em 0.4em;
  border-radius: 0.3em 0.3em 0.3em 0;
  background: var(--maya);
  transform: translateY(-0.1em);
  color: #fff;
  font: 600 0.66em / 1.3 system-ui, sans-serif;
  white-space: nowrap;
}
.aia-ai-collab-cursor-doc-new {
  min-height: 3.1em;
  margin-bottom: 0.6em;
  padding-right: 2.2em;
}
.aia-ai-collab-cursor-doc-new span {
  --s: clamp(0, (var(--t) - var(--k)) * 8, 1);
  --fresh: clamp(0, 1 - (var(--t) - var(--k)) / 3, 1);
  display: inline-block;
  max-width: calc(var(--s) * 6em);
  overflow: hidden;
  vertical-align: bottom;
  white-space: pre;
  opacity: var(--s);
  background: color-mix(in srgb, var(--c) calc(var(--fresh) * 20%), transparent);
  color: color-mix(in srgb, var(--c) calc(var(--fresh) * 70%), currentColor);
}
.aia-ai-collab-cursor-doc-new code {
  font: 0.92em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-ai-collab-cursor-doc-claude {
  position: relative;
  display: inline-block;
  width: 0.12em;
  height: 1.2em;
  margin-left: 0.04em;
  vertical-align: -0.22em;
  background: var(--c);
}
.aia-ai-collab-cursor-doc-claude b {
  top: 100%;
  bottom: auto;
  border-radius: 0 0.3em 0.3em 0.3em;
  background: var(--c);
  transform: none;
}
@keyframes aia-ai-collab-cursor-doc-clock {
  0%, 8% { --aia-ai-collab-cursor-doc-t: 0.5; }
  70% { --aia-ai-collab-cursor-doc-t: 12.5; }
  96%, 97% { --aia-ai-collab-cursor-doc-t: 16; }
  98%, 100% { --aia-ai-collab-cursor-doc-t: 0.5; }
}
@keyframes aia-ai-collab-cursor-doc-select {
  0%, 22% { background: transparent; }
  26%, 100% { background: color-mix(in srgb, #db2777 22%, transparent); }
}
@keyframes aia-ai-collab-cursor-doc-fade {
  0%, 93% { opacity: 1; }
  97%, 99% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-ai-collab-cursor-doc,
  .aia-ai-collab-cursor-doc-sel {
    animation: none;
    --aia-ai-collab-cursor-doc-t: 16;
  }
  .aia-ai-collab-cursor-doc-sel { background: color-mix(in srgb, #db2777 22%, transparent); }
}

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