← All videos

Original prompt — Tested

Single-file HTML showreel prompt — no renderer, no build step

by MotionPrompts (own run)
Kinetic typeShapes

Prompt

Banned list ✓Beat grid ✓Build method ✓Self-review ✓
<direction> An 8-second studio showreel in ONE self-contained HTML file. Four accent corner marks frame every scene like a camera's record overlay. Three scenes cut hard, one line each — WE MAKE / MOTION / THAT SELLS. — each numbered (SCENE 01/02/03), then the end card: STUDIO SHOWREEL, with an accent rule and the line "SHOT IN ONE HTML FILE — SCENE MARKS AND ALL". Near-black background, white type, one orange accent. Banned: glows, gradients, crossfades (this format cuts), external fonts or images — if it is not in the file, it does not exist. </direction> <structure> Scenes at 0s / 2s / 4s / 6s, hard cuts. Each scene line punches in with a short scale settle (1.08 → 1.0). Corner marks fade in first and never leave. The end card draws its accent rule after landing and holds. </structure> <build> ONE self-contained HTML file, 1280x720 landscape: inline CSS, inline script, a paused GSAP timeline where every frame is a pure function of time. Scene changes are set() calls at exact times — never opacity tweens, which crossfade at render. </build> <gotchas> The corner marks are their own layer above the scenes; nest them inside a scene and the first cut takes them away. And keep scene lines short enough to sit at 100px+ — a showreel line you have to shrink is a line you should rewrite. </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 studio showreel — WE MAKE / MOTION / THAT SELLS — shot entirely in one HTML file, corner scene-marks and all. The marks are not decoration: they tell the client exactly how this was made.

Run log

What broke (and the fix)

  • Nothing broke. Scenes cut hard on their marks, the corner frame survives every cut, and the end card's rule drew on its beat in the first snapshot.

Related videos

ModelClaude (agent build)
Renderer / stackSingle-file HTML + GSAP (seek-driven)
Iterations to final1
Render time13s (final render)
Format1280×720 · landscape
Published2026-10-25

Submit a video

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