← All videos

1280×720 · 16:9 landscape HyperFrames HyperFrames + GSAP

Run log

ModelClaude (agent build)
Renderer / stackHyperFrames + GSAP
Iterations to final1
Render time20s (final render)
Format1280×720 · 16:9 landscape
Published2026-10-25

What broke (and the fix)

  • Nothing broke — the first render shipped. All four count-ups land exactly (18 / 99.9% / −32% / 61) and the 30%/70%/final stills are clean.
Original prompt Tested

KPI dashboard — HyperFrames prompt (metrics film for team updates)

by MotionPrompts (own run)
Charts

Prompt

Banned list —Beat grid —Build method —Self-review —
<direction> A 9-second KPI dashboard film for team updates (1280x720, 30fps): DESIGN TEAM, WEEK 12. House style: near-black #0a0a0a, panels #141414, white type, ONE orange accent #ff5c1a, Arial/Helvetica bold, no webfonts. Four KPI tiles count up in sequence (18 SHIPPED / 99.9% UPTIME / −32% TICKETS / 61 NPS), a small bar strip shows the week's shape, and the film closes on SHIP SMALL. SHIP OFTEN.. All figures are sample data, labelled SAMPLE on screen. Banned: real dashboards, screenshots, glows, gradients, more than four KPIs (unreadable at this size), decimal places the data does not have. </direction> <structure> 0.0-0.8s: header "DESIGN TEAM — WEEK 12 — SAMPLE DATA" in. 0.8-4.6s: four KPI tiles land left to right, each value counting up as it lands. 4.6-6.8s: bar strip grows under the tiles with the week's shape; the best day takes the accent. 6.8-9.0s: takeaway line "SHIP SMALL. SHIP OFTEN." + footer "SAMPLE DATA — REPLACE WITH YOUR REAL NUMBERS"; hold. </structure> <build> One HyperFrames composition, 1280x720, seek-driven GSAP timeline, paused. Tiles are absolutely positioned cards; count-ups are object tweens with onUpdate formatting; bars grow by scaleY from the baseline. Render at 30fps. </build> <gotchas> - Four tiles in one row at 1280px means tight cards: keep labels short and values at one size, or the row wraps. - Count-ups must finish before the takeaway lands, or the eye reads two stories at once. - The sample-data footer must survive to the final frame. </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.

Use this prompt

A team update that respects the meeting: four numbers, one week shape, one takeaway. Swap in your real numbers — the sample labels come off only then.

Related videos

Product UI morph — one shape, many states
Product UI morph — one shape, many states
HyperFrames·Square Tested
Remotion data prompt — CSV to animated bar chart
Remotion data prompt — CSV to animated bar chart
Remotion·Landscape Tested
Remotion bar race prompt — rankings over time
Remotion bar race prompt — rankings over time
Remotion·Landscape Tested
Remotion count-up stats prompt — number story
Remotion count-up stats prompt — number story
Remotion·Square Tested

Submit a video

Know a motion video made with an AI coding model? Send the post. Rules: