Thinking Summary Ticker
A collapsed thinking pill whose one line summary changes as the model works: each phrase rises out of a blur, holds, then lifts away for the next while a small sparkle turns beside it.
Also known as: ai thinking status text, reasoning summary animation, rotating thinking messages, ai thinking pill.
Weighing two caching strategies
Tracing the invalidation path
Estimating memory at peak load
HTML
<div class="aia-thinking-summary-ticker" role="status" aria-label="Thinking">
<svg class="aia-thinking-summary-ticker-spark" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2c.6 5.2 3.8 8.4 10 10-6.2 1.6-9.4 4.8-10 10-.6-5.2-3.8-8.4-10-10 6.2-1.6 9.4-4.8 10-10Z"/></svg>
<span class="aia-thinking-summary-ticker-window">
<span style="--i: 0">Weighing two caching strategies</span>
<span style="--i: 1">Tracing the invalidation path</span>
<span style="--i: 2">Estimating memory at peak load</span>
</span>
<svg class="aia-thinking-summary-ticker-chev" viewBox="0 0 24 24" aria-hidden="true"><path d="m9.5 6 6 6-6 6"/></svg>
</div>CSS
.aia-thinking-summary-ticker {
--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;
display: inline-flex;
align-items: center;
gap: 0.55em;
padding: 0.5em 0.75em 0.5em 0.65em;
border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
border-radius: 99em;
background: color-mix(in srgb, currentColor 3%, transparent);
}
.aia-thinking-summary-ticker-spark {
width: 1.15em;
height: 1.15em;
fill: var(--c);
animation: aia-thinking-summary-ticker-turn 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.aia-thinking-summary-ticker-window {
display: grid;
overflow: hidden;
padding: 0.1em 0;
}
.aia-thinking-summary-ticker-window span {
grid-area: 1 / 1;
white-space: nowrap;
color: color-mix(in srgb, currentColor 72%, transparent);
animation: aia-thinking-summary-ticker-swap 7.5s infinite both;
animation-delay: calc(var(--i) * 2.5s);
}
.aia-thinking-summary-ticker-chev {
width: 0.95em;
height: 0.95em;
fill: none;
stroke: color-mix(in srgb, currentColor 45%, transparent);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
@keyframes aia-thinking-summary-ticker-turn {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(45deg) scale(0.82); }
100% { transform: rotate(90deg) scale(1); }
}
@keyframes aia-thinking-summary-ticker-swap {
0% { opacity: 0; transform: translateY(0.7em); filter: blur(0.2em); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
7%, 30% { opacity: 1; transform: none; filter: blur(0); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.4); }
36%, 100% { opacity: 0; transform: translateY(-0.7em); filter: blur(0.2em); }
}
@media (prefers-reduced-motion: reduce) {
.aia-thinking-summary-ticker-spark,
.aia-thinking-summary-ticker-window span { animation: none; }
.aia-thinking-summary-ticker-window span + span { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.aia-thinking-summary-ticker, .aia-thinking-summary-ticker *, .aia-thinking-summary-ticker::before, .aia-thinking-summary-ticker::after, .aia-thinking-summary-ticker *::before, .aia-thinking-summary-ticker *::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.