Analytics card with big metric, 7-day sparkline and anomaly callout.
<!doctype html>
<!-- Example: live-bar-chart — analytics card · big metric · 7-day sparkline · anomaly callout -->
<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: #0e1118; color: #e8e3d6; height: 100vh; overflow: hidden;
font-family: ui-sans-serif, system-ui; padding: 64px 80px;
display: grid; grid-template-rows: auto 1fr auto; position: relative; }
.glow { position: absolute; right: -12vw; top: -12vh; width: 60vw; height: 60vh;
background: radial-gradient(circle, rgba(255,59,31,.16), transparent 60%);
pointer-events: none; will-change: transform; }
.grid { position: absolute; left: 80px; right: 80px; top: 200px; bottom: 140px;
background-image:
linear-gradient(180deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 100% 25%; pointer-events: none; }
.hd { display: flex; justify-content: space-between; align-items: flex-start;
position: relative; z-index: 2; }
.brand { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .28em;
text-transform: uppercase; color: rgba(255,255,255,.5);
display: flex; align-items: center; gap: 9px; }
.brand::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--signal); box-shadow: 0 0 12px var(--signal); }
.win { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .26em;
text-transform: uppercase; color: rgba(255,255,255,.45); }
.win .seg { display: inline-block; padding: 4px 9px; border: 1px solid rgba(255,255,255,.14);
border-radius: 6px; margin-left: 6px; }
.win .seg.on { background: rgba(255,255,255,.08); color: white; }
.body { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px;
align-items: end; }
.metric { padding-top: 18px; }
.metric .lbl { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .26em;
text-transform: uppercase; color: rgba(255,255,255,.55); }
.metric .row { display: flex; align-items: baseline; gap: 14px; margin-top: 6px; }
.metric .v { font-size: 152px; font-weight: 700; letter-spacing: -0.035em; line-height: 1;
font-variant-numeric: tabular-nums; }
.metric .unit { font-size: 28px; color: rgba(255,255,255,.5); letter-spacing: -0.01em; }
.metric .delta { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px; border-radius: 999px;
background: rgba(31,138,91,.18); color: #6bdca5;
font-family: ui-monospace, monospace; font-size: 13px; letter-spacing: .12em; }
.metric .delta i { font-style: normal; }
.metric .note { margin-top: 22px; max-width: 340px;
font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.65); }
.spark { position: relative; height: 240px; }
.spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.spark .axis { position: absolute; left: 0; right: 0; bottom: -28px;
display: flex; justify-content: space-between;
font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .22em;
color: rgba(255,255,255,.35); text-transform: uppercase; }
.callout { position: absolute; transform: translate(-50%, -100%); margin-top: -12px;
background: rgba(255,59,31,.95); color: white; padding: 6px 11px; border-radius: 6px;
font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .12em;
white-space: nowrap; opacity: 0; }
.callout::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
border-top: 5px solid rgba(255,59,31,.95); }
.foot { position: relative; z-index: 2; display: flex; justify-content: space-between;
font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .22em;
text-transform: uppercase; color: rgba(255,255,255,.4); }
.cursor-line { stroke: rgba(255,255,255,.4); stroke-width: 1; stroke-dasharray: 2 4; }
</style></head><body>
<div class="glow" id="gl"></div>
<div class="grid"></div>
<div class="hd">
<div class="brand">HF · Analytics</div>
<div class="win">
Window
<span class="seg">24h</span>
<span class="seg on">7d</span>
<span class="seg">30d</span>
</div>
</div>
<div class="body">
<div class="metric">
<div class="lbl">Active renders · 7-day average</div>
<div class="row">
<span class="v" id="kv">0</span>
<span class="unit">/min</span>
</div>
<div class="delta"><i id="dArrow">▲</i> <span id="dPct">0.0</span>% vs last week</div>
<div class="note">Spike at midweek correlates with the
v1.0 release — three customers backfilled overnight queues.</div>
</div>
<div class="spark">
<svg id="svg" viewBox="0 0 600 240" preserveAspectRatio="none">
<defs>
<linearGradient id="afill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ff3b1f" stop-opacity=".35"/>
<stop offset="100%" stop-color="#ff3b1f" stop-opacity="0"/>
</linearGradient>
</defs>
<path id="area" fill="url(#afill)" d=""/>
<path id="line" fill="none" stroke="#ff3b1f" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round"
filter="drop-shadow(0 0 12px rgba(255,59,31,.5))" d=""/>
<line id="cur" class="cursor-line" x1="0" y1="0" x2="0" y2="240"/>
<circle id="dotA" cx="0" cy="0" r="4" fill="#ffb800"
style="filter: drop-shadow(0 0 8px rgba(255,184,0,.8))"/>
<circle id="dot" cx="0" cy="0" r="5" fill="#ff3b1f"
stroke="#0e1118" stroke-width="2.5"/>
</svg>
<div class="callout" id="cal">Anomaly · +186% spike</div>
<div class="axis">
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span>
<span>Fri</span><span>Sat</span><span>Sun</span>
</div>
</div>
</div>
<div class="foot">
<span>Live · updated each frame</span>
<span>p95 latency 218 ms</span>
<span>err 0.02 %</span>
</div>
<script>
// Fixed 7-day daily-average series (one point per day). Wednesday is the anomaly.
var SERIES = [62, 71, 68, 74, 198, 96, 88];
var DAYS = SERIES.length;
var W = 600, H = 240;
var MAX = 220, PAD = 18;
function pt(i, v) {
var x = (i / (DAYS - 1)) * W;
var y = H - PAD - (v / MAX) * (H - PAD * 2);
return [x, y];
}
var line = document.getElementById('line');
var area = document.getElementById('area');
var dot = document.getElementById('dot');
var dotA = document.getElementById('dotA');
var cur = document.getElementById('cur');
var cal = document.getElementById('cal');
var gl = document.getElementById('gl');
var kv = document.getElementById('kv');
var dPct = document.getElementById('dPct');
var dArrow = document.getElementById('dArrow');
var t = 0;
var reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
function ease(x){ return 1 - Math.pow(1 - x, 3); }
function render() {
var tt = reduced ? 6 : t;
// Line draws left → right between t=0.4 and t=4.0.
var u = ease(Math.max(0, Math.min(1, (tt - 0.4) / 3.6)));
var progressX = u * (DAYS - 1);
var nFull = Math.floor(progressX);
var frac = progressX - nFull;
var d = '';
for (var i = 0; i <= nFull && i < DAYS; i++) {
var p = pt(i, SERIES[i]);
d += (i === 0 ? 'M' : 'L') + p[0].toFixed(1) + ',' + p[1].toFixed(1) + ' ';
}
if (nFull + 1 < DAYS && frac > 0) {
var a = pt(nFull, SERIES[nFull]);
var b = pt(nFull + 1, SERIES[nFull + 1]);
var x = a[0] + (b[0] - a[0]) * frac;
var y = a[1] + (b[1] - a[1]) * frac;
d += 'L' + x.toFixed(1) + ',' + y.toFixed(1);
}
line.setAttribute('d', d);
// Area fill: same path, closed to the baseline.
var endX = nFull + 1 < DAYS ? pt(nFull, SERIES[nFull])[0] + (pt(nFull + 1, SERIES[nFull + 1])[0] - pt(nFull, SERIES[nFull])[0]) * frac : pt(nFull, SERIES[nFull])[0];
area.setAttribute('d', d + ' L' + endX.toFixed(1) + ',' + H + ' L0,' + H + ' Z');
// Head dot rides the line.
var headIdx = Math.min(DAYS - 1, nFull);
var tip = nFull + 1 < DAYS && frac > 0
? [ pt(nFull, SERIES[nFull])[0] + (pt(nFull + 1, SERIES[nFull + 1])[0] - pt(nFull, SERIES[nFull])[0]) * frac,
pt(nFull, SERIES[nFull])[1] + (pt(nFull + 1, SERIES[nFull + 1])[1] - pt(nFull, SERIES[nFull])[1]) * frac ]
: pt(headIdx, SERIES[headIdx]);
dot.setAttribute('cx', tip[0]); dot.setAttribute('cy', tip[1]);
cur.setAttribute('x1', tip[0]); cur.setAttribute('x2', tip[0]);
// Anomaly callout appears once the line passes Wednesday (index 4).
var anomP = pt(4, SERIES[4]);
var pastAnom = progressX >= 4;
var cu = pastAnom ? Math.max(0, Math.min(1, (tt - 2.6) / 0.55)) : 0;
dotA.setAttribute('cx', anomP[0]); dotA.setAttribute('cy', anomP[1]);
dotA.setAttribute('r', pastAnom ? (3.5 + Math.sin(tt * 3) * 1.2).toFixed(2) : '0');
var sparkRect = { left: 0, top: 0 };
// The callout is positioned inside .spark (svg shares same coord box visually). The SVG is 600px wide and 240 tall but stretches to container — we approximate with percentages.
cal.style.left = ((anomP[0] / W) * 100).toFixed(1) + '%';
cal.style.top = ((anomP[1] / H) * 100).toFixed(1) + '%';
cal.style.opacity = cu.toFixed(2);
cal.style.transform = 'translate(-50%, -100%) translateY(' + ((1 - cu) * 6).toFixed(1) + 'px)';
// Headline value counts toward the 7-day mean.
var mean = SERIES.reduce(function(a,b){ return a + b; }, 0) / DAYS;
var shown = mean * u;
kv.textContent = Math.round(shown);
// Delta vs prior 7-day (synthetic baseline = 78).
var pct = ((mean - 78) / 78) * 100 * u;
dPct.textContent = Math.abs(pct).toFixed(1);
dArrow.textContent = pct >= 0 ? '▲' : '▼';
// Ambient glow breathes.
var br = 0.92 + 0.08 * Math.sin(tt * 0.55);
gl.style.transform = 'scale(' + br.toFixed(3) + ')';
}
addEventListener('hf-seek', function(e) { t = e.detail.time; render(); });
render();
</script>
</body></html>