← All videos

Original prompt — Tested

Single-file HTML kinetic type prompt

by MotionPrompts (own run)
Kinetic type

Prompt

Banned list ✓Beat grid ✓Build method ✓Self-review ✓
<direction> A 7-second square kinetic type film in ONE self-contained HTML file. A monospace "index.html" badge sits top-right throughout. Four words stack and slam one per beat — SINGLE FILE KINETIC TYPE. — the second word in the accent colour; an accent rule draws under the stack; the closer lands: "NO BUILD. NO BUNDLER. JUST HTML." Near-black background, white type, one orange accent. Banned: glows, gradients, rotations for their own sake, words smaller than the frame deserves. </direction> <structure> Beats at 0.3s / 1.15s / 2.0s / 2.85s: one word per beat, rising 84px with a power4 settle — a slam, not a float. Beat 5 (3.6s): rule draws left to right. Beat 6 (4.0s): closer fades up. Hold the stack to the end. </structure> <build> ONE self-contained HTML file, 1080x1080 square: inline CSS, inline script, paused GSAP timeline, every frame a pure function of time. Words are absolutely positioned blocks at fixed tops, so later words never push earlier ones. </build> <gotchas> Stacked words at 150px need their line-height and tops planned like a poster, not typed like a paragraph: measure the stack height before animating, or the last word lands on the rule. </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.

Four words, stacked and slammed, in one HTML file with a badge that says so. The square cut is the social version of the single-file argument.

Run log

What broke (and the fix)

  • Nothing broke. All four words landed inside the square frame at 150px in the first snapshot — the stack was measured before it was animated, per the rule the Remotion kinetic-type entry taught us earlier in this wave.

Related videos

ModelClaude (agent build)
Renderer / stackSingle-file HTML + GSAP (seek-driven)
Iterations to final1
Render time24s (final render)
Format1080×1080 · square
Published2026-10-25

Submit a video

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