Document Artifact Building
A document artifact writes itself the way a person would: the outline lands first as headings over skeleton lines, then each section fills in turn while the header counts Writing 2 of 3 to Ready.
Also known as: ai document generation, artifact writing animation, ai writing outline first.
launch-plan.md
Goals
Ship self-serve billing to every team.
Cut checkout drop-off below 20%.
Timeline
Beta on Nov 12, general release Dec 3.
Freeze copy one week before launch.
Risks
VAT rules for EU and UK customers.
Webhook retries double-charging cards.
HTML
<div class="aia-document-artifact-building" role="status" aria-label="Writing launch-plan.md">
<div class="aia-document-artifact-building-head">
<svg class="aia-document-artifact-building-icon" 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>launch-plan.md</b>
<span class="aia-document-artifact-building-state" aria-hidden="true"><span>Outlining</span><span class="aia-document-artifact-building-n"></span><span class="aia-document-artifact-building-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>Ready</span></span>
</div>
<div class="aia-document-artifact-building-doc">
<div class="aia-document-artifact-building-sec"><p class="aia-document-artifact-building-h">Goals</p><p>Ship self-serve billing to every team.</p><p>Cut checkout drop-off below 20%.</p></div>
<div class="aia-document-artifact-building-sec"><p class="aia-document-artifact-building-h">Timeline</p><p>Beta on Nov 12, general release Dec 3.</p><p>Freeze copy one week before launch.</p></div>
<div class="aia-document-artifact-building-sec"><p class="aia-document-artifact-building-h">Risks</p><p>VAT rules for EU and UK customers.</p><p>Webhook retries double-charging cards.</p></div>
</div>
</div>CSS
@property --aia-document-artifact-building-t {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@property --aia-document-artifact-building-k {
syntax: "<integer>";
inherits: false;
initial-value: 1;
}
.aia-document-artifact-building {
--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-document-artifact-building-t);
--ok: color-mix(in srgb, #16a34a 78%, currentColor);
width: 20em;
padding: 0;
overflow: hidden;
animation: aia-document-artifact-building-clock var(--d) linear infinite;
}
.aia-document-artifact-building-head {
display: flex;
align-items: center;
gap: 0.5em;
padding: 0.6em 0.85em;
border-bottom: 1px solid color-mix(in srgb, currentColor 9%, transparent);
font-size: 0.8em;
}
.aia-document-artifact-building-icon {
width: 1.15em;
height: 1.15em;
color: var(--c);
}
.aia-document-artifact-building-head b {
font: 600 1em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-document-artifact-building-state {
display: grid;
justify-items: end;
margin-left: auto;
color: color-mix(in srgb, currentColor 55%, transparent);
font-size: 0.9em;
font-weight: 600;
}
.aia-document-artifact-building-state > * {
grid-area: 1 / 1;
white-space: nowrap;
}
.aia-document-artifact-building-state > :first-child { opacity: calc(1 - clamp(0, (var(--t) - 0.21) * 50, 1)); }
.aia-document-artifact-building-n {
--aia-document-artifact-building-k: calc(1 + clamp(0, (var(--t) - 0.4) * 100, 1) + clamp(0, (var(--t) - 0.58) * 100, 1));
counter-reset: k var(--aia-document-artifact-building-k);
color: var(--c);
opacity: calc(clamp(0, (var(--t) - 0.22) * 50, 1) * (1 - clamp(0, (var(--t) - 0.77) * 50, 1)));
}
.aia-document-artifact-building-n::before { content: "Writing " counter(k) " of 3"; }
.aia-document-artifact-building-ok {
display: inline-flex;
align-items: center;
gap: 0.25em;
color: var(--ok);
opacity: clamp(0, (var(--t) - 0.78) * 50, 1);
}
.aia-document-artifact-building-ok svg {
width: 1.1em;
height: 1.1em;
stroke-width: 3;
}
.aia-document-artifact-building-doc {
display: grid;
gap: 0.45em;
padding: 0.65em 0.95em 0.8em;
animation: aia-document-artifact-building-fade var(--d) linear infinite;
}
.aia-document-artifact-building-sec {
--i: 0;
--h: clamp(0, (var(--t) - 0.04 - var(--i) * 0.06) * 25, 1);
--a: clamp(0, (var(--t) - 0.24 - var(--i) * 0.18) * 7, 1);
--b: clamp(0, (var(--t) - 0.32 - var(--i) * 0.18) * 10, 1);
--on: calc(clamp(0, (var(--t) - 0.23 - var(--i) * 0.18) * 30, 1) * (1 - clamp(0, (var(--t) - 0.39 - var(--i) * 0.18) * 30, 1)));
position: relative;
padding-left: 0.6em;
opacity: var(--h);
transform: translateY(calc((1 - var(--h)) * 0.5em));
}
.aia-document-artifact-building-sec:nth-child(2) { --i: 1; }
.aia-document-artifact-building-sec:nth-child(3) { --i: 2; }
.aia-document-artifact-building-sec::before {
content: "";
position: absolute;
left: 0;
top: 0.15em;
bottom: 0.15em;
width: 0.14em;
border-radius: 1em;
background: color-mix(in srgb, var(--c) calc(var(--on) * 100%), color-mix(in srgb, currentColor 12%, transparent));
}
.aia-document-artifact-building-sec p {
position: relative;
margin: 0;
font-size: 0.68em;
line-height: 1.45;
white-space: nowrap;
color: color-mix(in srgb, currentColor 75%, transparent);
}
.aia-document-artifact-building-sec .aia-document-artifact-building-h {
font-size: 0.74em;
font-weight: 700;
color: currentColor;
}
.aia-document-artifact-building-sec p:nth-child(2) { --p: var(--a); }
.aia-document-artifact-building-sec p:nth-child(3) { --p: var(--b); }
.aia-document-artifact-building-sec p:not(.aia-document-artifact-building-h) {
width: fit-content;
background: linear-gradient(90deg, color-mix(in srgb, currentColor 75%, transparent) calc(var(--p) * 100%), transparent calc(var(--p) * 100%));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* skeleton under each line until its words arrive */
.aia-document-artifact-building-sec p:not(.aia-document-artifact-building-h)::before {
content: "";
position: absolute;
left: calc(var(--p) * 100%);
right: 0;
top: 0.4em;
bottom: 0.4em;
border-radius: 0.3em;
background: color-mix(in srgb, currentColor 10%, transparent);
}
@keyframes aia-document-artifact-building-clock {
from { --aia-document-artifact-building-t: 0; }
to { --aia-document-artifact-building-t: 1; }
}
@keyframes aia-document-artifact-building-fade {
0% { opacity: 0; }
3%, 93% { opacity: 1; }
97.5%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.aia-document-artifact-building,
.aia-document-artifact-building-doc {
animation: none;
--aia-document-artifact-building-t: 0.85;
}
}
@media (prefers-reduced-motion: reduce) {
.aia-document-artifact-building, .aia-document-artifact-building *, .aia-document-artifact-building::before, .aia-document-artifact-building::after, .aia-document-artifact-building *::before, .aia-document-artifact-building *::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.