Original prompt — Tested HyperFrames dashboard showcase prompt — SaaS UI film
by MotionPrompts (own run)
Prompt
Banned list ✓Beat grid ✓Build method ✓Self-review ✓
<direction>
A 9-second dashboard showcase film for PULSEBOARD, 1280x720 landscape. Top row: three KPI cards — ACTIVE USERS 12,408 / REVENUE $86.2K / CHURN 1.9% — count up in visible steps. Centre: a line chart draws itself left to right with end dots. Bottom: a sources bar splits into ORGANIC 62 / SOCIAL 24 / DIRECT 14 segments that widen in order, labels under each.
Banned: smooth number rolls, glows, gradients, 3D chart extrusions, claims presented as real results (it is a mock — the film says so in small print), pie charts.
</direction>
<structure>
Beat 1 (0.4s): window frame + KPI cards rise. Beats 2–4 (1.2–3.4s): counters step. Beat 5 (3.8s): chart line draws. Beat 6 (5.4s): sources segments widen staggered, labels fade. Hold to 9s.
</structure>
<build>
One HyperFrames composition, seek-driven GSAP. Chart = SVG polyline via getTotalLength dash draw. Counters = stepped onUpdate tweens. Small print at the bottom states the data is illustrative.
</build>
<gotchas>
Nothing broke — clean first pass. The stepped counters and the dash-drawn chart were verified frame by frame in snapshots; the sources segments sum to exactly 100.
</gotchas>
Before you finish: step through the timeline at five points and fix anything that overlaps, clips the frame, or drifts off the beat grid.
A SaaS dashboard showcase: KPI cards count up in steps, the main chart draws its own line, and a sources bar splits 62/24/14. Numbers step like real dashboards refreshing — no slot-machine rolls, no invented growth claims beyond the mock.
Run log
| Model | Claude (agent build) |
| Renderer / stack | HyperFrames + GSAP |
| Iterations to final | 1 |
| Render time | 25s (final render) |
| Format | 1280×720 · landscape |
| Published | 2026-10-25 |
What broke (and the fix)
- Nothing broke. Check passed on the first build and the snapshot pass verified the KPI step-counts land on their final values, the line finishes clear of the card edge, and the source bars match their printed percentages (62/24/14) before the end line lands.
Related videos