Streaming Code Block
A dark code block from a chat reply fills in line by line with syntax colors, line numbers arriving with each row and a soft highlight on the line being written. Each line is wiped in by clip-path.
Also known as: ai code streaming animation, code typing animation css, chatgpt code block, streaming markdown code.
let pending: Promise<Token> | null = null;export function refresh() {pending ??= fetchToken().finally(() => {pending = null;});return pending;}
HTML
<div class="aia-streaming-code-block" role="status" aria-label="Writing code">
<div class="aia-streaming-code-block-bar">
<span class="aia-streaming-code-block-lang">ts</span>
<span>session.ts</span>
<span class="aia-streaming-code-block-copy"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2.5"/><path d="M16 8V5.5A1.5 1.5 0 0 0 14.5 4h-9A1.5 1.5 0 0 0 4 5.5v9A1.5 1.5 0 0 0 5.5 16H8"/></svg>Copy</span>
</div>
<ol class="aia-streaming-code-block-lines">
<li style="--i: 0"><code><b class="aia-streaming-code-block-k">let</b> pending: <b class="aia-streaming-code-block-y">Promise</b><<b class="aia-streaming-code-block-y">Token</b>> | <b class="aia-streaming-code-block-k">null</b> = <b class="aia-streaming-code-block-k">null</b>;</code></li>
<li style="--i: 1"><code><b class="aia-streaming-code-block-k">export function</b> <b class="aia-streaming-code-block-f">refresh</b>() {</code></li>
<li style="--i: 2"><code> pending ??= <b class="aia-streaming-code-block-f">fetchToken</b>().<b class="aia-streaming-code-block-f">finally</b>(() => {</code></li>
<li style="--i: 3"><code> pending = <b class="aia-streaming-code-block-k">null</b>;</code></li>
<li style="--i: 4"><code> });</code></li>
<li style="--i: 5"><code> <b class="aia-streaming-code-block-k">return</b> pending;</code></li>
<li style="--i: 6"><code>}</code></li>
</ol>
</div>CSS
@property --aia-streaming-code-block-t {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
.aia-streaming-code-block {
--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;
--t: var(--aia-streaming-code-block-t);
width: 25em;
max-width: 100%;
overflow: hidden;
border: 1px solid rgb(255 255 255 / 0.12);
border-radius: 0.8em;
background: #111113;
box-shadow: 0 0.7em 1.8em -0.7em rgb(0 0 0 / 0.45);
color: #e4e4e7;
animation: aia-streaming-code-block-run 8s linear infinite;
}
.aia-streaming-code-block-bar {
display: flex;
align-items: center;
gap: 0.6em;
padding: 0.5em 0.85em;
border-bottom: 1px solid rgb(255 255 255 / 0.07);
font-size: 0.78em;
color: #a1a1aa;
}
.aia-streaming-code-block-lang {
padding: 0.05em 0.45em;
border-radius: 0.35em;
background: rgb(255 255 255 / 0.07);
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.aia-streaming-code-block-copy {
display: inline-flex;
align-items: center;
gap: 0.35em;
margin-left: auto;
}
.aia-streaming-code-block-copy svg {
width: 1.1em;
height: 1.1em;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.aia-streaming-code-block-lines {
margin: 0;
padding: 0.6em 0;
list-style: none;
counter-reset: aia-streaming-code-block-ln;
font: 0.8em / 1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
animation: aia-streaming-code-block-fade 8s linear infinite;
}
.aia-streaming-code-block-lines li {
--p: clamp(0, calc((var(--t) - var(--i)) * 1.1), 1);
--a: calc(clamp(0, calc((var(--t) - var(--i)) * 14), 1) * clamp(0, calc((var(--i) + 1 - var(--t)) * 14), 1));
position: relative;
display: flex;
padding: 0 1em 0 0;
counter-increment: aia-streaming-code-block-ln;
}
.aia-streaming-code-block-lines li::before {
content: counter(aia-streaming-code-block-ln);
width: 2em;
margin-right: 1.1em;
text-align: right;
color: rgb(255 255 255 / 0.26);
opacity: clamp(0, calc((var(--t) - var(--i)) * 8), 1);
}
.aia-streaming-code-block-lines li::after {
content: "";
position: absolute;
inset: 0;
border-left: 2px solid var(--c);
background: linear-gradient(90deg, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%);
opacity: var(--a);
}
.aia-streaming-code-block-lines code {
position: relative;
z-index: 1;
white-space: pre;
font: inherit;
clip-path: inset(-0.2em calc((1 - var(--p)) * 100%) -0.2em 0);
}
.aia-streaming-code-block-lines b {
font-weight: inherit;
}
.aia-streaming-code-block-k {
color: color-mix(in srgb, var(--c) 55%, #fff);
}
.aia-streaming-code-block-f {
color: #8ccaff;
}
.aia-streaming-code-block-y {
color: #f1c98b;
}
@keyframes aia-streaming-code-block-run {
0%, 6% { --aia-streaming-code-block-t: 0; }
20% { --aia-streaming-code-block-t: 1.6; }
24% { --aia-streaming-code-block-t: 2; }
44% { --aia-streaming-code-block-t: 4.4; }
48% { --aia-streaming-code-block-t: 4.6; }
66%, 100% { --aia-streaming-code-block-t: 7.2; }
}
@keyframes aia-streaming-code-block-fade {
0%, 90% { opacity: 1; }
97%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.aia-streaming-code-block,
.aia-streaming-code-block-lines { animation: none; }
.aia-streaming-code-block { --aia-streaming-code-block-t: 7.2; }
}
@media (prefers-reduced-motion: reduce) {
.aia-streaming-code-block, .aia-streaming-code-block *, .aia-streaming-code-block::before, .aia-streaming-code-block::after, .aia-streaming-code-block *::before, .aia-streaming-code-block *::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.