← All videos

1280×720 · 16:9 landscape Remotion Remotion + React

Run log

ModelClaude (agent build)
Renderer / stackRemotion + React
Iterations to final2
Render time27s (final render)
Format1280×720 · 16:9 landscape
Published2026-10-25

What broke (and the fix)

  • Iteration 1 still: the document's fake text lines spilled past the card's bottom edge (14 lines in a card that fits 10) — line array trimmed; iteration 2 verified clean.
  • The kicker misspelled the product name on the first still ('NOTESHIRNK') — caught on the still review and corrected before rendering.
Original prompt Tested

AI summariser explainer — Remotion prompt (long doc in, summary out)

by MotionPrompts (own run)
ExplainerProduct UI

Prompt

Banned list —Beat grid —Build method —Self-review —
<direction> A 9-second AI tool explainer in Remotion (1280x720, 270 frames at 30fps). House style: near-black #0a0a0a background, panels #141414, borders #2a2a2a, text #ffffff/#c9c9c9, ONE accent #ff5c1a, Arial/Helvetica bold, no webfonts. The demo IS the explanation: a dense document on the left, one button, a three-bullet summary on the right. Fictional tool; the document, summary and timing are labelled samples/demo in the film. No gradients, no stock photos, no real brand logos, no lorem ipsum, no purple/blue tech gradient. </direction> <structure> Frames 0-96 — Kicker "AI TOOL EXPLAINER — NoteShrink". Headline: "Long doc in. Short answer out." Left: a document card ("Q3 FIELD REPORT.PDF", "2,400 words · 12-minute read") filled with grey text lines. Centre: a SUMMARISE pill. Frames 96-140 — The pill pulses once; the document dims and shrinks slightly — the machine is "reading". Frames 140-196 — The summary card lands right (accent border): three bullets, each a complete, specific sentence (a result, a problem, a decision) — never "the document discusses various topics". Frames 196-270 — The savings chip lands bottom-left: "12 MIN READ → 40 SEC (DEMO)", beside the fictional fine print. </structure> <build> One component; all motion from useCurrentFrame with clamped interpolate. The document's lines are a fixed array of widths mapped to divs — count them against the card height BEFORE writing the rest (see gotchas). Bullets are real sentences in the JSX, not lorem bars: the summary's specificity is the product demo. </build> <gotchas> - Iteration 1: fourteen text lines overflowed the document card's bottom border — the card is 430px; header + 14 lines + padding is ~514px. Count line height × lines + header + padding first; ten lines fit. Fixed in iteration 2. - Summary bullets must contain information, not meta-language — if a bullet could describe any document, rewrite it. - The (DEMO) tag on the timing chip is mandatory in adaptations until the timing is measured on the real tool. </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

Tested after the line-count fix (iteration 2). Also fixed during production: the tool name was misspelled in the kicker on the first still (NOTESHIRNK) — proofread proper nouns on the still, not in the code.

Related videos

Service explainer — HyperFrames prompt (four-tap booking flow, drawn icons)
Service explainer — HyperFrames prompt (four-tap booking flow, drawn icons)
HyperFrames·16:9 landscape Tested
Product UI morph — one shape, many states
Product UI morph — one shape, many states
HyperFrames·Square Tested
Remotion explainer prompt — document to vertical video
Remotion explainer prompt — document to vertical video
Remotion·Vertical Tested
Remotion testimonial prompt — reviews carousel
Remotion testimonial prompt — reviews carousel
Remotion·Square Tested

Submit a video

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