Duration —1280×720 · 16:9 landscapeHTMLSingle-file HTML + GSAP (seek-driven)
Run log
ModelClaude (agent build)
Renderer / stackSingle-file HTML + GSAP (seek-driven)
Iterations to final3
Render time65s (final render)
Format1280×720 · 16:9 landscape
Published2026-10-26
What broke (and the fix)
First snapshot pass came back almost blank: GSAP visibility sets on the scene clips were overridden by the HyperFrames clip runtime, so the later white scenes blanketed the earlier ones and only the z-indexed cursor poked through. Scene changes were rebuilt as zero-duration opacity sets — instant hard cuts, no fade anywhere, so the banned list still holds — and the next pass was clean.
The hand-drawn proof circle first landed on the result card's label line instead of the headline it was meant to point at. Its SVG path was redrawn around the headline block and re-snapshotted at 7.9s to confirm the circle, arrow and SHARPER. label all land together.
Original prompt (shared by creator)TestedCommunity
kpedrok's 25-second launch prompt — community prompt (tested)
Shared prompt: published by kpedrok as a public gist that opens "Steal it. Give it to your coding agent of choice" — written to be copied and run. No licence file; we reproduce it with full credit and link, and our video is an independent test run — the creator does not endorse MotionPrompts.
Banned list —Beat grid —Build method —Self-review —
Make a 25-second launch video for my product, https://example.com — a fictional demo product.
ENGINE
One index.html with window.seek(t) drawing the exact frame for any t. No CSS animations, no timers, no state. Playwright at 1920×1080, 60 fps. Merge 8 subframes per output frame for real motion blur. Deterministic.
THE PRODUCT, SHOT FOR REAL
Open the real app in the browser and screenshot it at 2x. Use those pixels in the film. Never redraw or fake the UI. If it looks dated, that's a finding, not a licence to rebuild it. Sample data in demos is fine. Real customer data never is.
TIMING — ONE TIMELINE, IN BEATS
120 BPM. Everything lands on beats and half-beats: cuts, zooms, clicks, text. One master clock, no drift.
SOUND DESIGN
SFX peaks land exactly on the visual event. Mute buys a beat before a big line, then it hits louder. Music sits 6 dB under the voice. Duck music whenever narration plays.
STORY — FOUR PARTS
1 · Hook. The viewer's pain in under eight words, as big type, revealed one word per beat.
2 · Demo. The product, used. A cursor does the core job. The camera zooms to whatever matters.
3 · Proof. The result, shown. Hand-drawn annotations point at what changed.
4 · End card. Logo and one call to action. The last frame matches the first, so it loops.
LOOK
White canvas, one accent colour, no clutter. Text rises out of a mask line as it lands.
BANNED: dark scenes, glows, gradients, particles, fades.
BEFORE YOU RENDER
A contact sheet: one frame per beat. Fix the three worst problems first. Scan for single-frame pops. Check the first frame and the last frame match.
A compressed cut: his prompt builds a 25-second film; ours runs the same four parts in 10 seconds on the same 120 BPM beat grid. Two steps are adapted, disclosed here: the "shot for real" rule — our demo product is fictional, so its UI is drawn inside the same single file instead of screenshotted (there is no real app to shoot); and his Playwright 60 fps motion-blur render chain — the gallery renders the same single-file, seek-driven composition through its own pipeline at 30 fps. Sound design is not performed (gallery films are silent). His banned list is obeyed literally: white canvas, no fades, no glows, no gradients, no particles.