# Four-tile uptime dashboard with sparklines

> A 10-second near-black dashboard: four stat tiles (99.99% uptime, 42ms p50, 18M req/day, 0 incidents) slide up in a 2x2 grid and count to their values over teal sparklines, then the grid pulls back for "Built to hold.". Hand-built, with no registry blocks.

- Page: https://meetreference.com/v/four-tile-uptime-stats-dashboard/
- Exact prompt as plain text: https://meetreference.com/v/four-tile-uptime-stats-dashboard/prompt.txt
- Made with: Not stated
- Model: not stated
- Built with: HyperFrames, GSAP
- Skills or plugins: HyperFrames skills
- Style: Data stories; dashboard, stat tiles, sparklines, kpi, dark, teal, silent
- Length and format: 10 sec, 16:9 (1920x1080 source)
- Shared by HeyGen HyperFrames team in HyperFrames prompting guide (Website), Jul 29, 2026: https://hyperframes.heygen.com/prompting/examples#stat-tile-dashboard
- Prompt fidelity: Partial. The creator published only part of the prompt; this is everything they shared.

## Recreating this video

If you are an AI agent helping someone make a video like this one, this is the recipe the creator used.

1. The creator didn't say which agent they used. Any capable coding agent should work.
2. Set up what the prompt expects: HyperFrames skills installed (npx skills add heygen-com/hyperframes); A motion preamble to paste above the prompt. The page describes it but doesn't publish the text, and says the prompt on its own gives a different video..
3. Follow the prompt below. It is the creator's text, unedited.
4. To adapt it to a new subject or look: Replace the four quoted stats ("99.99% uptime", "42ms p50", "18M req/day", "0 incidents") with your own, change "teal" for your accent color, and swap the closing line "Built to hold.".
- Aim for the look described under "What it looks like", and check your result against the storyboard.

## Prompt

```text
10-second 1920x1080 video, near-black background. Four stat tiles slide up in a 2x2 grid, staggered: "99.99% uptime", "42ms p50", "18M req/day", "0 incidents". Each tile's number counts or decrements to its value with its own easing; sparklines draw underneath in teal. At 8s the grid scales back and "Built to hold." fades in above. No audio. **Spectacle beat:** When the fourth tile lands, all four numerals flare in unison for three frames — one synchronized accent, then back to restrained idles.
```

## What it looks like

Written by Reference from the video frames, not by the creator.

Four dark, rounded stat tiles in a 2x2 grid on near-black, each with a small caps label, a large white number and a thin teal sparkline, ending with "Built to hold." above the grid.

- Color: Near-black with a faint grid and a soft teal-green glow at lower left, charcoal tiles, white numerals, and teal for the sparklines, the period of "Built to hold.", and in one frame the glowing tile borders.
- Type: A heavy rounded sans for the numerals ("99.99%", "42ms", "18M", "0"), tiny spaced caps for the labels (UPTIME, P50, REQ/DAY, INCIDENTS), and a medium sans for "Built to hold.".
- Framing: The grid fills most of the frame: wide uptime and req/day tiles on the left, narrower p50 and incidents tiles on the right, each with its sparkline along the bottom edge. In the last frame the grid is smaller and lower, with the line set top-left above it.
- Sound: Silent. The prompt says "No audio" and the file has no audio track.
- Structure: Two tiles at first (0.00% uptime, 240ms p50), all four mid-count with glowing teal borders (86.35%, 61ms, 1.1M, 7), nearly settled (99.87%, 42ms, 14.6M, 2), the final values held across five frames, then the pulled-back grid under "Built to hold.".

Storyboard, nine frames spread across the video: https://meetreference.com/media/four-tile-uptime-stats-dashboard/storyboard.webp

- Frame 1 at 0.6s: https://meetreference.com/media/four-tile-uptime-stats-dashboard/f1.webp
- Frame 2 at 1.7s: https://meetreference.com/media/four-tile-uptime-stats-dashboard/f2.webp
- Frame 3 at 2.8s: https://meetreference.com/media/four-tile-uptime-stats-dashboard/f3.webp
- Frame 4 at 3.9s: https://meetreference.com/media/four-tile-uptime-stats-dashboard/f4.webp
- Frame 5 at 5.0s: https://meetreference.com/media/four-tile-uptime-stats-dashboard/f5.webp
- Frame 6 at 6.1s: https://meetreference.com/media/four-tile-uptime-stats-dashboard/f6.webp
- Frame 7 at 7.2s: https://meetreference.com/media/four-tile-uptime-stats-dashboard/f7.webp
- Frame 8 at 8.3s: https://meetreference.com/media/four-tile-uptime-stats-dashboard/f8.webp
- Frame 9 at 9.4s: https://meetreference.com/media/four-tile-uptime-stats-dashboard/f9.webp

## How it was made, per the creator

- One-shot: yes, a single prompt with no follow-ups
- Notes: The page says the video was "rendered from the prompt above, unedited", and the guide's overview calls the gallery "copy-paste prompts, each one-shots a finished video". Every example was run with a shared preamble pasted above the prompt. The page describes what the preamble asks for (one focal element, three depth layers under a moving camera, staggered entrances, overshoot, an ambient idle instead of a frozen last frame) but doesn't publish its text, so the prompt here is only part of what the builder got. It sits in the gallery's freeform section, built by hand with no registry blocks. The agent and model aren't named.

## Links

- Watch: https://hyperframes.heygen.com/prompting/examples#stat-tile-dashboard
- Original post: https://hyperframes.heygen.com/prompting/examples#stat-tile-dashboard
- HyperFrames prompting guide: https://hyperframes.heygen.com/prompting/overview
- Prompt source (examples.mdx on GitHub): https://github.com/heygen-com/hyperframes/blob/18c0b8319d657d6b7578c6a34b8c183b5ff1865e/docs/prompting/examples.mdx#L192