Per-row personalized KPI card driven by template variables.
Edit these placeholders inline or pass --var NAME=value to hyperframes render.
| Variable | Type | Default | Range |
|---|---|---|---|
{{$NAME}}Recipient name | text | Jordan | — |
{{$METRIC}}Metric label | text | MRR | — |
{{$DELTA}}Delta % | number | 24.6 | 0 → 999 step 0.1 |
<!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: var(--cream); height: 100vh; margin: 0; overflow: hidden;
display: grid; place-items: center; font-family: ui-sans-serif, system-ui;
color: var(--ink); }
.card { width: 70%; padding: 72px; border-radius: 24px; background: white;
border: 1px solid var(--line); box-shadow: 0 40px 100px -40px rgba(0,0,0,.18); }
.hi { font-size: 28px; letter-spacing: .25em; text-transform: uppercase; color: var(--mute); }
.name { font-size: 88px; font-weight: 800; margin: 12px 0 32px; letter-spacing: -.03em; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 32px; }
.metric { font-size: 30px; color: var(--mute); }
.delta { font-size: 96px; font-weight: 800; color: var(--signal); letter-spacing: -.04em;
font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(20px); }
</style></head><body>
<div class="card">
<div class="hi">Personalized for</div>
<div class="name">Hi {{$NAME}}.</div>
<div class="row">
<div class="metric">Your <strong>{{$METRIC}}</strong> is up</div>
<div class="delta" id="d">0%</div>
</div>
</div>
<script>
var TARGET = parseFloat("{{$DELTA}}") || 24;
var d = document.getElementById('d');
function ease(t){ return 1 - Math.pow(1-t,3); }
function render(t){
var u = ease(Math.max(0, Math.min(1, (t - 0.4) / 1.6)));
d.style.opacity = u;
d.style.transform = 'translateY(' + ((1-u)*20) + 'px)';
d.textContent = '+' + (TARGET * u).toFixed(1) + '%';
}
addEventListener('hf-seek', function(e){ render(e.detail.time); });
render(0);
</script>
</body></html>