Agent Terminal Output
A dark terminal where pnpm build types itself out, then the build log prints line by line the way a real shell does, ending on built in 2.41s and a fresh prompt. A stepped height reveals the lines.
Also known as: terminal animation css, command line typing animation, streaming terminal output.
$pnpm build
vite v6.2.0 building for production...
✓ 1284 modules transformed.
dist/index.html0.46 kB
dist/assets/index.js142.8 kB
✓ built in 2.41s
$
HTML
<div class="aia-agent-terminal" role="status" aria-label="Running pnpm build">
<div class="aia-agent-terminal-bar" aria-hidden="true"><i></i><i></i><i></i><span>~/acme/web</span></div>
<div class="aia-agent-terminal-body">
<p><span class="aia-agent-terminal-ps">$</span><span class="aia-agent-terminal-typed">pnpm build</span><span class="aia-agent-terminal-caret"></span></p>
<div class="aia-agent-terminal-out">
<p>vite v6.2.0 building for production...</p>
<p><b>✓</b> 1284 modules transformed.</p>
<p><span>dist/index.html</span><em>0.46 kB</em></p>
<p><span>dist/assets/index.js</span><em>142.8 kB</em></p>
<p><b>✓ built in 2.41s</b></p>
<p><span class="aia-agent-terminal-ps">$</span><span class="aia-agent-terminal-caret aia-agent-terminal-caret-end"></span></p>
</div>
</div>
</div>CSS
.aia-agent-terminal {
--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: 6.6s;
--lh: 1.6em;
width: 22em;
}
.aia-agent-terminal-bar {
display: flex;
align-items: center;
gap: 0.35em;
padding: 0.6em 0.8em;
border-bottom: 1px solid rgb(255 255 255 / 0.07);
}
.aia-agent-terminal-bar i {
width: 0.55em;
height: 0.55em;
border-radius: 50%;
background: rgb(255 255 255 / 0.16);
}
.aia-agent-terminal-bar span {
margin-left: auto;
margin-right: auto;
padding-right: 2.2em;
color: rgb(255 255 255 / 0.45);
font: 500 0.72em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-agent-terminal-body {
box-sizing: border-box;
height: calc(var(--lh) * 7 + 1.3em);
padding: 0.6em 0.95em 0.7em;
font: 0.8em / 1 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
animation: aia-agent-terminal-fade var(--d) linear infinite;
}
.aia-agent-terminal-body p {
display: flex;
align-items: center;
height: var(--lh);
margin: 0;
white-space: pre;
}
.aia-agent-terminal-ps {
margin-right: 0.6em;
color: color-mix(in srgb, var(--c) 60%, #fff);
}
.aia-agent-terminal-typed {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
animation: aia-agent-terminal-type var(--d) infinite;
}
.aia-agent-terminal-caret {
display: inline-block;
width: 0.6em;
height: 1.15em;
background: color-mix(in srgb, var(--c) 45%, #fff);
animation:
aia-agent-terminal-blink 1s steps(1) infinite,
aia-agent-terminal-caret var(--d) steps(1) infinite;
}
.aia-agent-terminal-caret-end {
animation: aia-agent-terminal-blink 1s steps(1) infinite;
}
.aia-agent-terminal-out {
overflow: hidden;
color: rgb(255 255 255 / 0.62);
animation: aia-agent-terminal-print var(--d) steps(1, end) infinite;
}
.aia-agent-terminal-out b {
color: #4ade80;
font-weight: 600;
}
.aia-agent-terminal-out span:not([class]) {
width: 15em;
color: #e4e4e7;
}
.aia-agent-terminal-out em {
font-style: normal;
color: rgb(255 255 255 / 0.45);
}
@keyframes aia-agent-terminal-type {
0%, 4% { width: 0; animation-timing-function: steps(10, end); }
16%, 99% { width: 10ch; }
100% { width: 0; }
}
@keyframes aia-agent-terminal-caret {
0%, 17% { visibility: visible; }
18%, 100% { visibility: hidden; }
}
@keyframes aia-agent-terminal-blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
@keyframes aia-agent-terminal-print {
0%, 18% { height: 0; }
19% { height: var(--lh); }
33% { height: calc(var(--lh) * 2); }
37% { height: calc(var(--lh) * 3); }
39% { height: calc(var(--lh) * 4); }
45% { height: calc(var(--lh) * 5); }
48%, 99% { height: calc(var(--lh) * 6); }
100% { height: 0; }
}
@keyframes aia-agent-terminal-fade {
0%, 93% { opacity: 1; }
97%, 99% { opacity: 0; }
100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.aia-agent-terminal-body,
.aia-agent-terminal-typed,
.aia-agent-terminal-caret,
.aia-agent-terminal-out {
animation-play-state: paused;
animation-delay: calc(var(--d) * -0.7);
}
}
@media (prefers-reduced-motion: reduce) {
.aia-agent-terminal, .aia-agent-terminal *, .aia-agent-terminal::before, .aia-agent-terminal::after, .aia-agent-terminal *::before, .aia-agent-terminal *::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.