Agent Token Cost Counter
A session cost card where each agent turn raises a new bar and the dollar figure rolls up to $1.84 alongside the token total. Dollars, cents and tokens are @property integers fed to CSS counters.
Also known as: token counter animation, ai usage cost meter, llm cost tracker ui.
This session
claude-sonnet-5.5HTML
<div class="aia-agent-cost-counter" role="status" aria-label="Session cost">
<div class="aia-agent-cost-counter-head"><span>This session</span><code>claude-sonnet-5.5</code></div>
<div class="aia-agent-cost-counter-figures">
<span class="aia-agent-cost-counter-usd" aria-hidden="true"></span>
<span class="aia-agent-cost-counter-tok" aria-hidden="true"></span>
</div>
<div class="aia-agent-cost-counter-bars" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
</div>CSS
@property --aia-agent-cost-counter-t {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@property --aia-agent-cost-counter-cents {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
@property --aia-agent-cost-counter-dol {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
@property --aia-agent-cost-counter-rem {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
@property --aia-agent-cost-counter-h {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
@property --aia-agent-cost-counter-hk {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
@property --aia-agent-cost-counter-hd {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
.aia-agent-cost-counter {
--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-agent-cost-counter-t);
width: 17em;
animation: aia-agent-cost-counter-clock var(--d) cubic-bezier(0.3, 0, 0.2, 1) infinite;
}
.aia-agent-cost-counter-head {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.78em;
color: color-mix(in srgb, currentColor 55%, transparent);
font-weight: 600;
}
.aia-agent-cost-counter-head code {
padding: 0.15em 0.45em;
border-radius: 0.35em;
background: color-mix(in srgb, currentColor 7%, transparent);
font: 500 0.92em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-agent-cost-counter-figures {
display: flex;
align-items: baseline;
justify-content: space-between;
margin: 0.35em 0 0.6em;
animation: aia-agent-cost-counter-fade var(--d) linear infinite;
}
.aia-agent-cost-counter-usd {
font-size: 2.1em;
font-weight: 650;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
--aia-agent-cost-counter-cents: calc(var(--t) * 23);
--aia-agent-cost-counter-dol: calc(var(--aia-agent-cost-counter-cents) / 100 - 0.5);
--aia-agent-cost-counter-rem: calc(var(--aia-agent-cost-counter-cents) - var(--aia-agent-cost-counter-dol) * 100);
counter-reset: dol var(--aia-agent-cost-counter-dol) rem var(--aia-agent-cost-counter-rem);
}
.aia-agent-cost-counter-usd::before { content: "$" counter(dol) "." counter(rem, decimal-leading-zero); }
.aia-agent-cost-counter-tok {
color: color-mix(in srgb, currentColor 55%, transparent);
font: 500 0.8em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
--aia-agent-cost-counter-h: calc(var(--t) * 51.5);
--aia-agent-cost-counter-hk: calc(var(--aia-agent-cost-counter-h) / 10 - 0.5);
--aia-agent-cost-counter-hd: calc(var(--aia-agent-cost-counter-h) - var(--aia-agent-cost-counter-hk) * 10);
counter-reset: hk var(--aia-agent-cost-counter-hk) hd var(--aia-agent-cost-counter-hd);
}
.aia-agent-cost-counter-tok::before { content: counter(hk) "." counter(hd) "k tokens"; }
.aia-agent-cost-counter-bars {
display: flex;
align-items: flex-end;
gap: 0.3em;
height: 2.6em;
padding-top: 0.2em;
border-top: 1px dashed color-mix(in srgb, currentColor 14%, transparent);
animation: aia-agent-cost-counter-fade var(--d) linear infinite;
}
.aia-agent-cost-counter-bars i {
--i: 0;
--h: 60%;
--g: clamp(0, (var(--t) - var(--i)) * 1.6, 1);
--a: clamp(0, min(var(--t) - var(--i), var(--i) + 1.6 - var(--t)) * 3, 1);
position: relative;
flex: 1;
height: var(--h);
border-radius: 0.25em 0.25em 0.1em 0.1em;
background: color-mix(in srgb, var(--c) 30%, transparent);
transform: scaleY(var(--g));
transform-origin: bottom;
}
.aia-agent-cost-counter-bars i::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--c);
opacity: var(--a);
}
.aia-agent-cost-counter-bars i:nth-child(2) { --i: 1; --h: 35%; }
.aia-agent-cost-counter-bars i:nth-child(3) { --i: 2; --h: 80%; }
.aia-agent-cost-counter-bars i:nth-child(4) { --i: 3; --h: 50%; }
.aia-agent-cost-counter-bars i:nth-child(5) { --i: 4; --h: 95%; }
.aia-agent-cost-counter-bars i:nth-child(6) { --i: 5; --h: 42%; }
.aia-agent-cost-counter-bars i:nth-child(7) { --i: 6; --h: 66%; }
.aia-agent-cost-counter-bars i:nth-child(8) { --i: 7; --h: 74%; }
@keyframes aia-agent-cost-counter-clock {
0%, 2% { --aia-agent-cost-counter-t: 0; }
6%, 11% { --aia-agent-cost-counter-t: 1; }
15%, 20% { --aia-agent-cost-counter-t: 2; }
24%, 29% { --aia-agent-cost-counter-t: 3; }
33%, 38% { --aia-agent-cost-counter-t: 4; }
42%, 47% { --aia-agent-cost-counter-t: 5; }
51%, 56% { --aia-agent-cost-counter-t: 6; }
60%, 65% { --aia-agent-cost-counter-t: 7; }
69%, 96% { --aia-agent-cost-counter-t: 8; }
97%, 100% { --aia-agent-cost-counter-t: 0; }
}
@keyframes aia-agent-cost-counter-fade {
0%, 92% { opacity: 1; }
96%, 97% { opacity: 0; }
100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.aia-agent-cost-counter {
animation: none;
--aia-agent-cost-counter-t: 8;
}
.aia-agent-cost-counter-figures,
.aia-agent-cost-counter-bars { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.aia-agent-cost-counter, .aia-agent-cost-counter *, .aia-agent-cost-counter::before, .aia-agent-cost-counter::after, .aia-agent-cost-counter *::before, .aia-agent-cost-counter *::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.