Plan Checklist Forming
A plan card where each step forms in turn: its checkbox springs in, a skeleton bar grows to the width of the step, then the words resolve over it. The header settles to Plan · 4 steps.
Also known as: ai planning animation, ai plan checklist, agent plan ui, todo list forming animation.
Drafting a planPlan · 4 steps
- Add a rate_limits table
- Write the sliding window check
- Return 429 with Retry-After
- Cover it with three tests
HTML
<div class="aia-plan-forming" role="status" aria-label="Drafting a plan">
<div class="aia-plan-forming-head">
<span class="aia-plan-forming-dot" aria-hidden="true"></span>
<span class="aia-plan-forming-labels"><span>Drafting a plan</span><span>Plan · 4 steps</span></span>
</div>
<ol class="aia-plan-forming-list">
<li style="--i: 0"><span>Add a rate_limits table</span></li>
<li style="--i: 1"><span>Write the sliding window check</span></li>
<li style="--i: 2"><span>Return 429 with Retry-After</span></li>
<li style="--i: 3"><span>Cover it with three tests</span></li>
</ol>
</div>CSS
@property --aia-plan-forming-t {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
.aia-plan-forming {
--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-plan-forming-t);
--all: clamp(0, calc((var(--t) - 3.9) * 10), 1);
width: 21em;
max-width: 100%;
padding: 0.85em 1em 0.95em;
border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
border-radius: 0.9em;
background: color-mix(in srgb, currentColor 3%, transparent);
box-shadow: 0 1px 1px rgb(0 0 0 / 0.04), 0 0.6em 1.6em -0.6em rgb(0 0 0 / 0.14);
animation: aia-plan-forming-run 8s linear infinite;
}
.aia-plan-forming-head {
display: flex;
align-items: center;
gap: 0.55em;
font-size: 0.85em;
font-weight: 600;
color: color-mix(in srgb, currentColor 60%, transparent);
}
.aia-plan-forming-dot {
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background: var(--c);
box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--c) 18%, transparent);
animation: aia-plan-forming-dot 1.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.aia-plan-forming-labels {
display: grid;
animation: aia-plan-forming-fade 8s linear infinite;
}
.aia-plan-forming-labels span {
grid-area: 1 / 1;
}
.aia-plan-forming-labels span:first-child {
opacity: calc(1 - var(--all));
}
.aia-plan-forming-labels span:last-child {
opacity: var(--all);
}
.aia-plan-forming-list {
display: grid;
gap: 0.5em;
margin: 0.75em 0 0;
padding: 0;
list-style: none;
animation: aia-plan-forming-fade 8s linear infinite;
}
.aia-plan-forming-list li {
/* b: checkbox and bar grow in; w: the words resolve */
--b: clamp(0, calc((var(--t) - var(--i)) * 2), 1);
--w: clamp(0, calc((var(--t) - var(--i) - 0.45) * 2), 1);
display: flex;
align-items: center;
gap: 0.6em;
}
.aia-plan-forming-list li::before {
content: "";
flex: none;
width: 0.95em;
height: 0.95em;
border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
border-radius: 0.28em;
opacity: var(--b);
transform: scale(calc(0.4 + 0.6 * var(--b) + 1.3 * var(--b) * (1 - var(--b))));
}
.aia-plan-forming-list span {
position: relative;
white-space: nowrap;
}
.aia-plan-forming-list span::before {
content: "";
position: absolute;
inset: 0.32em 0;
border-radius: 0.4em;
background: color-mix(in srgb, currentColor 12%, transparent);
transform-origin: left;
transform: scaleX(var(--b));
opacity: calc(1 - var(--w));
}
.aia-plan-forming-list span {
color: color-mix(in srgb, currentColor calc(var(--w) * 88%), transparent);
filter: blur(calc((1 - var(--w)) * 0.2em));
}
@keyframes aia-plan-forming-run {
0% { --aia-plan-forming-t: 0; }
5% { --aia-plan-forming-t: 0; }
62% { --aia-plan-forming-t: 4; }
100% { --aia-plan-forming-t: 4; }
}
@keyframes aia-plan-forming-fade {
0% { opacity: 0; }
3%, 91% { opacity: 1; }
98%, 100% { opacity: 0; }
}
@keyframes aia-plan-forming-dot {
0%, 100% { box-shadow: 0 0 0 0.12em color-mix(in srgb, var(--c) 22%, transparent); }
50% { box-shadow: 0 0 0 0.32em color-mix(in srgb, var(--c) 6%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
.aia-plan-forming { animation: none; --aia-plan-forming-t: 4; }
.aia-plan-forming-dot,
.aia-plan-forming-labels,
.aia-plan-forming-list { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.aia-plan-forming, .aia-plan-forming *, .aia-plan-forming::before, .aia-plan-forming::after, .aia-plan-forming *::before, .aia-plan-forming *::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.