DD:HH:MM:SS countdown with tabular-num cells.
Edit these placeholders inline or pass --var NAME=value to hyperframes render.
| Variable | Type | Default | Range |
|---|---|---|---|
{{$TITLE}}Title | text | Launching in | — |
{{$SECONDS}}Target seconds | number | 604800 | 60 → 3000000 step 60 |
{{$ACCENT}}Digit color | color | #ff3b1f | — |
{{$BG}}Background | color | #0a0a0a | — |
<!doctype html>
<html data-duration="8" 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: white; height: 100vh; overflow: hidden;
display: grid; place-items: center; font-family: ui-sans-serif, system-ui; }
.cd { display: flex; gap: 22px; align-items: stretch; }
.cell { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
border-radius: 18px; padding: 28px 26px 18px; min-width: 150px; text-align: center;
backdrop-filter: blur(6px); }
.num { font-size: 96px; font-weight: 800; letter-spacing: -.04em; line-height: 1;
font-variant-numeric: tabular-nums; color: {{$ACCENT}}; }
.lbl { margin-top: 14px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; opacity: .65; }
.title { position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
font-size: 14px; letter-spacing: .35em; text-transform: uppercase; opacity: .55; }
</style></head><body>
<div class="title">{{$TITLE}}</div>
<div class="cd" id="cd"></div>
<script>
var TARGET = {{$SECONDS}};
var labels = ['days','hours','minutes','seconds'];
var cd = document.getElementById('cd');
var cells = labels.map(function(l){
var c = document.createElement('div'); c.className = 'cell';
var n = document.createElement('div'); n.className = 'num'; n.textContent = '00';
var lb = document.createElement('div'); lb.className = 'lbl'; lb.textContent = l;
c.appendChild(n); c.appendChild(lb); cd.appendChild(c);
return n;
});
function pad(n){ return String(Math.max(0, Math.floor(n))).padStart(2,'0'); }
function render(t){
var remaining = Math.max(0, TARGET - t * (TARGET / 8));
var d = remaining / 86400;
var h = (remaining / 3600) % 24;
var m = (remaining / 60) % 60;
var s = remaining % 60;
cells[0].textContent = pad(d); cells[1].textContent = pad(h);
cells[2].textContent = pad(m); cells[3].textContent = pad(s);
}
addEventListener('hf-seek', function(e){ render(e.detail.time); });
render(0);
</script>
</body></html>