Back to the library
Number ticker — odometer roll
Variant: Odometer roll
The default answer for a metric that updates on a poll: three digit wheels on 1ch tracks, each lagging the one to its right by 48ms so the carry propagates in the direction a carry actually goes. Every strip has a third cell repeating the first, which is what lets the wheel only ever turn forwards — the return to 299 is another roll, not a rewind. Tabular figures are load-bearing, not taste: with proportional digits a 1 is narrower than a 9 and the whole number breathes on every update.
datacounterloop
The source
A complete HTML document. Paste it into an empty .html file and it plays — no stylesheet, script, font, or image to fetch.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Number ticker — odometer roll</title>
<style>
:root {
/* Neutrals — fixed, never remixed. */
--ivory: #faf9f5;
--paper: #ffffff;
--oat: #e3dacc;
--slate: #141413;
/* Knobs — the remix API. A knob exists iff declared here and used below. */
--hue: 38.8;
--lift: 0;
--chroma: 1;
--round: 1;
--speed: 1;
/* Accents — derived from the knobs with the family's offsets baked in,
so one hue roll moves them together. Defaults reproduce the original hex. */
--clay: oklch(calc(0.6724 + var(--lift)) calc(0.1308 * var(--chroma)) var(--hue));
--clay-d: oklch(calc(0.5797 + var(--lift)) calc(0.127 * var(--chroma)) var(--hue));
--olive: oklch(
calc(0.6118 + var(--lift)) calc(0.0713 * var(--chroma)) calc(var(--hue) + 88.3)
);
--rust: oklch(
calc(0.5408 + var(--lift)) calc(0.1357 * var(--chroma)) calc(var(--hue) - 10.3)
);
--_muted: color-mix(in srgb, var(--slate) 45%, transparent);
/* Clock — 4.8s. Two rolls of 264ms with about 1.7s of rest either side,
which is the cadence a metric on a poll actually has. A ticker that
never rests is a different animation; see the blur-swap sibling. */
--cycle: 4.8s;
--t: calc(var(--cycle) / var(--speed));
/* Each digit lags the one to its right by this much. That lag is the
carry: units turns first and drags the wheel above it. */
--_lag: calc(48ms / var(--speed));
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-accent: cubic-bezier(0.32, 0.72, 0, 1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background: var(--ivory);
font-family:
system-ui,
-apple-system,
'Segoe UI',
Roboto,
sans-serif;
color: var(--slate);
}
.tile {
display: grid;
gap: 10px;
justify-items: start;
padding: 18px 22px 20px;
border: 1px solid var(--oat);
border-radius: calc(14px * var(--round));
background: var(--paper);
}
.label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--_muted);
}
.value {
display: flex;
font-size: clamp(36px, 11vw, 46px);
font-weight: 600;
/* Tabular figures are not optional here: with proportional digits a 1
is narrower than a 9, so every roll would also shift the digits
beside it and the whole number would breathe. */
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
/* 1ch is one tabular advance; the extra sixteenth is slack, because the
window clips horizontally as well as vertically and a synthesised bold
paints a hair wider than the advance it was measured from. */
.d {
width: 1.16ch;
height: 1.18em;
overflow: hidden;
animation: fresh var(--t) infinite;
}
.strip {
display: grid;
animation: roll var(--t) infinite;
}
.strip i {
display: block;
height: 1.18em;
line-height: 1.18em;
font-style: normal;
text-align: center;
}
/* Units leads, hundreds trails. Setting the order here rather than in the
markup keeps the delay chain readable as what it is — a cascade right
to left, the direction a carry actually propagates. */
.d:nth-child(1) {
--_i: 2;
}
.d:nth-child(2) {
--_i: 1;
}
.d:nth-child(3) {
--_i: 0;
}
.d,
.strip {
animation-delay: calc(var(--_i) * var(--_lag));
}
/* Three cells, not two, and the third repeats the first: the wheel only
ever turns one way, so the return to 299 is another forward roll rather
than a rewind, and the jump back to 0% lands on an identical glyph. */
@keyframes roll {
0%,
18% {
transform: translateY(0);
animation-timing-function: var(--ease-accent);
}
23.5%,
60% {
transform: translateY(-33.3333%);
animation-timing-function: var(--ease-accent);
}
65.5%,
100% {
transform: translateY(-66.6666%);
}
}
/* The digit that just turned is held in clay and released over 400ms.
Geometry says a change happened; colour says which digits it touched,
and it is still legible a beat after the motion has stopped. */
@keyframes fresh {
0%,
17.9% {
color: var(--slate);
animation-timing-function: steps(1, end);
}
18%,
23.5% {
color: var(--clay-d);
animation-timing-function: var(--ease-out);
}
31.8%,
59.9% {
color: var(--slate);
animation-timing-function: steps(1, end);
}
60%,
65.5% {
color: var(--clay-d);
animation-timing-function: var(--ease-out);
}
73.8%,
100% {
color: var(--slate);
}
}
@media (prefers-reduced-motion: reduce) {
/* No travel: the three cells collapse into the one grid track they
already share, so the glyphs cross-fade in place with no change of
containing block for the layout around them to notice. */
.strip {
animation: none;
transform: none;
}
.strip i {
grid-area: 1 / 1;
animation: cell-a calc(var(--t) * 1.6) var(--ease-out) infinite;
animation-delay: calc(var(--_i) * var(--_lag));
}
.strip i:nth-child(2) {
animation-name: cell-b;
}
.strip i:nth-child(3) {
opacity: 0;
animation: none;
}
.d {
animation-duration: calc(var(--t) * 1.6);
}
/* Cell three is the seam trick and nothing else — with the roll gone
there is no seam to hide, so cell one plays both ends. */
@keyframes cell-a {
0%,
18% {
opacity: 1;
}
23.5%,
60% {
opacity: 0;
}
65.5%,
100% {
opacity: 1;
}
}
@keyframes cell-b {
0%,
18% {
opacity: 0;
}
23.5%,
60% {
opacity: 1;
}
65.5%,
100% {
opacity: 0;
}
}
}
</style>
</head>
<body>
<div
class="tile"
role="img"
aria-label="A metric tile reading 299 active sessions, whose digit wheels roll to 300 and back, units first"
>
<span class="label">Active sessions</span>
<span class="value">
<span class="d"
><span class="strip"><i>2</i><i>3</i><i>2</i></span></span
>
<span class="d"
><span class="strip"><i>9</i><i>0</i><i>9</i></span></span
>
<span class="d"
><span class="strip"><i>9</i><i>0</i><i>9</i></span></span
>
</span>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.