Agent Cursor Editing Code
A dark editor where an agent's named cursor opens a new line in auth.ts and types await limiter.consume(req.ip); with the line glowing as it is written. The text steps in by ch.
Also known as: ai code editor animation, ai cursor animation, collaborative cursor css.
HTML
<div class="aia-agent-cursor-edit" role="status" aria-label="Claude is editing auth.ts">
<div class="aia-agent-cursor-edit-tabs" aria-hidden="true"><span>limiter.ts</span><span class="aia-agent-cursor-edit-tab">auth.ts</span></div>
<div class="aia-agent-cursor-edit-code" aria-hidden="true">
<p><i>1</i><span><em>export async function</em> <u>login</u>(req) {</span></p>
<p><i>2</i><span> <em>const</em> user = <em>await</em> <u>findUser</u>(req.email);</span></p>
<p><i>3</i><span> <em>if</em> (!user) <em>return</em> <u>unauthorized</u>();</span></p>
<p class="aia-agent-cursor-edit-new"><i>4</i><span><span class="aia-agent-cursor-edit-typed"><em>await</em> limiter.<u>consume</u>(req.ip);</span><span class="aia-agent-cursor-edit-caret"></span></span></p>
<p><i>5</i><span> <em>return</em> <u>createSession</u>(user);</span></p>
<p><i>6</i><span>}</span></p>
</div>
</div>CSS
.aia-agent-cursor-edit {
--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;
overflow: hidden;
border-radius: 0.8em;
background: color-mix(in srgb, var(--c) 5%, #0d0d11);
box-shadow: 0 0 0 1px rgb(255 255 255 / 0.09), 0 1em 2.2em -1em rgb(0 0 0 / 0.55);
color: #e4e4e7;
--d: 7s;
width: 22em;
}
.aia-agent-cursor-edit-tabs {
display: flex;
font: 0.72em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
border-bottom: 1px solid rgb(255 255 255 / 0.07);
}
.aia-agent-cursor-edit-tabs span {
padding: 0.6em 1em;
color: rgb(255 255 255 / 0.45);
}
.aia-agent-cursor-edit-tabs .aia-agent-cursor-edit-tab {
color: #fff;
background: rgb(255 255 255 / 0.04);
box-shadow: inset 0 -0.14em 0 var(--c);
}
.aia-agent-cursor-edit-code {
box-sizing: border-box;
min-height: calc(1.7em * 6 + 1.1em);
padding: 0.55em 0;
font: 0.78em / 1 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
animation: aia-agent-cursor-edit-fade var(--d) linear infinite;
}
.aia-agent-cursor-edit-code p {
display: flex;
align-items: center;
height: 1.7em;
margin: 0;
white-space: pre;
}
.aia-agent-cursor-edit-code i {
flex: none;
width: 2.2em;
padding-right: 1em;
color: rgb(255 255 255 / 0.3);
font-style: normal;
text-align: right;
}
.aia-agent-cursor-edit-code em {
font-style: normal;
color: color-mix(in srgb, var(--c) 50%, #fff);
}
.aia-agent-cursor-edit-code u {
text-decoration: none;
color: #7dd3fc;
}
.aia-agent-cursor-edit-new {
overflow: hidden;
animation: aia-agent-cursor-edit-open var(--d) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.aia-agent-cursor-edit-new > span {
display: flex;
align-items: center;
}
.aia-agent-cursor-edit-typed {
display: inline-block;
margin-left: 2ch;
overflow: hidden;
animation: aia-agent-cursor-edit-type var(--d) infinite;
}
.aia-agent-cursor-edit-caret {
position: relative;
width: 0.14em;
height: 1.25em;
background: var(--c);
animation: aia-agent-cursor-edit-caret var(--d) linear infinite;
}
.aia-agent-cursor-edit-caret::after {
content: "Claude";
position: absolute;
left: 0.5em;
top: 50%;
translate: 0 -50%;
padding: 0.25em 0.5em;
border-radius: 0.35em;
background: var(--c);
color: #fff;
font: 600 0.75em system-ui, sans-serif;
}
@keyframes aia-agent-cursor-edit-open {
0%, 10% { height: 0; background: transparent; box-shadow: none; }
18% { height: 1.7em; background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: inset 0.16em 0 0 var(--c); }
70% { background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: inset 0.16em 0 0 var(--c); }
80%, 96% { height: 1.7em; background: color-mix(in srgb, #22c55e 10%, transparent); box-shadow: inset 0.16em 0 0 #4ade80; }
100% { height: 0; background: transparent; box-shadow: none; }
}
@keyframes aia-agent-cursor-edit-type {
0%, 22% { width: 0; animation-timing-function: steps(30, end); }
64%, 99% { width: 30ch; }
100% { width: 0; }
}
@keyframes aia-agent-cursor-edit-caret {
0%, 9% { opacity: 0; }
12%, 74% { opacity: 1; }
80%, 100% { opacity: 0; }
}
@keyframes aia-agent-cursor-edit-fade {
0%, 92% { opacity: 1; }
96%, 99% { opacity: 0.35; }
100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.aia-agent-cursor-edit-code,
.aia-agent-cursor-edit-new,
.aia-agent-cursor-edit-typed,
.aia-agent-cursor-edit-caret {
animation-play-state: paused;
animation-delay: calc(var(--d) * -0.68);
}
}
@media (prefers-reduced-motion: reduce) {
.aia-agent-cursor-edit, .aia-agent-cursor-edit *, .aia-agent-cursor-edit::before, .aia-agent-cursor-edit::after, .aia-agent-cursor-edit *::before, .aia-agent-cursor-edit *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--aia-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--aia-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. 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.