Odometer-style count-up to a target value with progress bar.
Edit these placeholders inline or pass --var NAME=value to hyperframes render.
| Variable | Type | Default | Range |
|---|---|---|---|
{{$LABEL}}Label | text | TOTAL USERS | — |
{{$TARGET}}Target value | number | 124000 | 1 → 10000000 step 1 |
{{$SUFFIX}}Suffix | text | | — |
{{$ACCENT}}Number color | color | #ff3b1f | — |
{{$INK}}Ink color | color | #0a0a0a | — |
{{$BG}}Background | color | #f6f5f1 | — |
<!doctype html>
<html data-duration="6" data-aspect="16:9"><head><style>
:root {
--cream:#f6f5f1; --cream-2:#efece4; --ink:#0a0a0a; --mute:#6b6862;
--line:#e3dfd3; --signal:#ff3b1f; --signal-2:#ff6a4a; --frame:#ffb800;
--green:#1f8a5b; --blue:#2b66ff;
}
* { box-sizing: border-box; }
body { margin:0; }
body { background: {{$BG}}; color: {{$INK}}; height: 100vh; overflow: hidden;
display: grid; place-items: center; font-family: ui-sans-serif, system-ui; }
.wrap { text-align: center; }
.lbl { font-size: 18px; letter-spacing: .3em; text-transform: uppercase;
color: color-mix(in srgb, {{$INK}} 55%, transparent); margin-bottom: 24px; }
.n { font-size: 320px; font-weight: 900; letter-spacing: -.05em; line-height: 1;
font-variant-numeric: tabular-nums; color: {{$ACCENT}}; }
.suf { font-size: 80px; font-weight: 600; opacity: .55; margin-left: 8px; }
.bar { width: 360px; height: 4px; background: color-mix(in srgb, {{$INK}} 12%, transparent);
margin: 36px auto 0; border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0%; background: {{$ACCENT}}; }
</style></head><body>
<div class="wrap">
<div class="lbl">{{$LABEL}}</div>
<div><span class="n" id="n">0</span><span class="suf">{{$SUFFIX}}</span></div>
<div class="bar"><i id="b"></i></div>
</div>
<script>
var TARGET = {{$TARGET}};
var n = document.getElementById('n');
var b = document.getElementById('b');
function ease(t){ return 1 - Math.pow(1 - Math.min(1, Math.max(0, t)), 3); }
function render(t){
var u = ease(t / 5);
n.textContent = Math.round(TARGET * u).toLocaleString();
b.style.width = (u * 100).toFixed(1) + '%';
}
addEventListener('hf-seek', function(e){ render(e.detail.time); });
render(0);
</script>
</body></html>