Back to the library
Number ticker — blur swap
Variant: Blur swap
For a value that changes several times a second, where an odometer would be a machine running without pause. The digits cross-fade through 3px of blur in 126ms with 2px of lift — direction rather than travel, because nothing you can follow belongs on a number seen this often. Two deliberate omissions: no carry stagger, which at this rate reads as the number vibrating, and no clay highlight on the digit that changed, which would simply never go out.
datacounterstatusloop
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 — blur swap</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 — 3.6s carrying four swaps of 126ms, spaced unevenly on purpose:
a live gauge is sampled by traffic, not by a metronome, and evenly
spaced updates read as an animation rather than as data. */
--cycle: 3.6s;
--t: calc(var(--cycle) / var(--speed));
--ease-out: cubic-bezier(0.23, 1, 0.32, 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;
font-variant-numeric: tabular-nums;
}
.d {
position: relative;
width: 1.16ch;
height: 1.18em;
}
/* Both glyphs occupy the same grid cell, so nothing reflows when they
trade places and neither digit can arrive a frame before the other. */
.d i {
position: absolute;
inset: 0;
line-height: 1.18em;
font-style: normal;
text-align: center;
animation: out var(--t) infinite;
}
.d i + i {
animation-name: in;
}
/* All three digits swap on the same frame. The odometer sibling staggers
its wheels by 48ms to read as a carry; at this rate that same stagger
reads as the number vibrating, so the cascade is deliberately dropped. */
/* 3px at 46px type is roughly a sixth of a stroke width — enough that the
eye reads one glyph becoming another instead of two glyphs briefly
stacked, and not enough to smear the digit into a grey lozenge. The
2px lift is direction, not travel: a value that changes this often
cannot afford anything the eye can follow. */
@keyframes out {
0%,
14% {
opacity: 1;
filter: blur(0);
transform: translateY(0);
animation-timing-function: var(--ease-out);
}
17.5%,
35% {
opacity: 0;
filter: blur(3px);
transform: translateY(-2px);
animation-timing-function: var(--ease-out);
}
38.5%,
53% {
opacity: 1;
filter: blur(0);
transform: translateY(0);
animation-timing-function: var(--ease-out);
}
56.5%,
78% {
opacity: 0;
filter: blur(3px);
transform: translateY(-2px);
animation-timing-function: var(--ease-out);
}
81.5%,
100% {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
}
@keyframes in {
0%,
14% {
opacity: 0;
filter: blur(3px);
transform: translateY(2px);
animation-timing-function: var(--ease-out);
}
17.5%,
35% {
opacity: 1;
filter: blur(0);
transform: translateY(0);
animation-timing-function: var(--ease-out);
}
38.5%,
53% {
opacity: 0;
filter: blur(3px);
transform: translateY(2px);
animation-timing-function: var(--ease-out);
}
56.5%,
78% {
opacity: 1;
filter: blur(0);
transform: translateY(0);
animation-timing-function: var(--ease-out);
}
81.5%,
100% {
opacity: 0;
filter: blur(3px);
transform: translateY(2px);
}
}
@media (prefers-reduced-motion: reduce) {
/* The blur stays — it is what makes the swap legible as one value
replacing another — and the 2px lift goes, because it is the only
part of this that is movement. The cycle stretches to 5.8s so the
four updates land as a pulse rather than a flicker. */
.d i {
animation-duration: calc(var(--t) * 1.6);
transform: none;
animation-name: out-still;
}
.d i + i {
animation-name: in-still;
}
@keyframes out-still {
0%,
14% {
opacity: 1;
filter: blur(0);
}
17.5%,
35% {
opacity: 0;
filter: blur(3px);
}
38.5%,
53% {
opacity: 1;
filter: blur(0);
}
56.5%,
78% {
opacity: 0;
filter: blur(3px);
}
81.5%,
100% {
opacity: 1;
filter: blur(0);
}
}
@keyframes in-still {
0%,
14% {
opacity: 0;
filter: blur(3px);
}
17.5%,
35% {
opacity: 1;
filter: blur(0);
}
38.5%,
53% {
opacity: 0;
filter: blur(3px);
}
56.5%,
78% {
opacity: 1;
filter: blur(0);
}
81.5%,
100% {
opacity: 0;
filter: blur(3px);
}
}
}
</style>
</head>
<body>
<div
class="tile"
role="img"
aria-label="A live metric tile whose value swaps between 299 and 300 four times, each digit dissolving under a blur"
>
<span class="label">Active sessions</span>
<span class="value">
<span class="d"><i>2</i><i>3</i></span>
<span class="d"><i>9</i><i>0</i></span>
<span class="d"><i>9</i><i>0</i></span>
</span>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.