Back to HyperFrames Templates
Metric Grid
Three glass KPI tiles: numbers count up while sparklines draw in
Description
A dashboard moment: three frosted tiles rise on a stagger, each headline number counting up while a sparkline draws across the bottom and a delta chip fades in. Hairline glass, tabular figures and restrained glow keep it looking like a real product, not a poster. Counting is vanilla JS; the sparklines are inline SVG paths drawn with SMIL — no libraries.
Edit each tile's label, `data-target`, prefix/suffix, delta and sparkline `d` in the markup. Perfect for a metrics summary, launch recap or KPI board.
How to use it
- Copy the block's HTML from the Source Code tab.
- Paste it into your HyperFrames composition (or any HTML page).
- Edit the text, colours, and timing to match your brand, then render it to video with HyperFrames.
Category
Data
Building with Remotion?
Get the same effects as ready-to-copy Remotion (React) components — 80+ free video templates.