← All videos

1280×720 · 16:9 landscape HyperFrames HyperFrames + GSAP
Run log
ModelClaude (agent build)
Renderer / stackHyperFrames + GSAP
Iterations to final2
Render time23.1s (final render)
Format1280×720 · 16:9 landscape
Published2026-11-02
What broke (and the fix)
  • The VERIFIED stamp's first landing spot sat on the headline clipping: the checker flagged it twice — occluding the standfirst's last words and failing contrast at 1.5:1 (orange over cream paper through a translucent backing). Moved to the board's empty corner on a solid dark backing; re-check reports 0 errors.
  • Accepted check warnings: the dateline, caption and stat label are set at print sizes (13-17px) as collage furniture; the closing caption's hold is in the family's usual ~1.5s class.
Original prompt Tested

Newspaper collage explainer — HyperFrames prompt (clippings, stamp, one story)

by MotionPrompts (own run)
Explainernews

Prompt

Banned list —Beat grid —Build method —Self-review —
<direction> Build a 1280x720, 11-second newspaper collage explainer in HyperFrames + GSAP: one fictional news story told entirely through paper clippings pinned to a dark board — a masthead, a headline clipping with an orange highlighter hit on the key phrase, a grayscale photo clipping with a staff-photo caption, a body clipping, and a big-number stat clipping — landing one by one with small rotations and tape strips, until an orange VERIFIED stamp slams down in the board's empty corner. House style: background #0a0a0a, white UI type, ONE orange accent #ff5c1a, headlines in a serif stack, NO webfonts, no gradients, no glows. The story is invented and the footer says so: "FICTIONAL SAMPLE STORY — SWAP IN YOUR OWN HEADLINES, PHOTO + STATS". Paper headline: City opens new RIVERSIDE MARKET after two years of works Stat clipping (number — label): 12,400 — opening-week visitors Banned: stock collage templates, lorem ipsum (unwritten body copy is drawn as grey text bars, never fake words), extra accent colours, a stamp or highlight that covers readable text. </direction> <structure> 0.0-0.7s: orange kicker "NEWSPAPER COLLAGE EXPLAINER — SAMPLE RUN" and the story title settle at top-left; footer fades in. 0.9-1.4s: the masthead clipping drops in (paper #f2ede3, slight rotation, tape strip, hard offset shadow) — paper name and dateline. 1.7-2.3s: the headline clipping slides in from the right; the key phrase carries the orange highlight; a real standfirst line sits under it. 2.9-5.0s: the photo clipping rises (grayscale photo, caption line), then the body clipping — section head, grey text bars for unwritten copy, one real closing sentence. 5.7-6.9s: the stat clipping pops in with the big number; the orange VERIFIED stamp slams from 2.3x scale into the board's empty dark corner — on the board, never over text. 7.0-11.0s: the three stat chips land under the board, the closing caption "ONE STORY · FIVE CLIPPINGS · NO STOCK TEMPLATES" appears, and the whole board breathes at 1.015 scale to the end. </structure> <build> Every clipping is one absolutely-positioned paper div (flat #f2ede3, hard 7px offset shadow, rotation baked into its transform — GSAP entrance tweens animate x/y/opacity/scale only, so the baked rotation survives). Tape strips are small translucent beige rectangles positioned over clipping tops. The stamp must land on EMPTY board: lay the clippings out first, find the dead corner, and put the stamp there with a solid dark backing — over paper it fails contrast and occludes the standfirst (both happened in draft one; the checker caught them). Grey bars stand in for body copy instead of lorem ipsum. One paused GSAP timeline registered as window.__timelines["main"]. </build>

Use this prompt

Lay the board out before you animate it: the collage lives or dies on its dead space. The stamp, the highlight and the stat number are the three loudest elements — each needs its own empty territory, and the stamp in particular must land on board, not on paper, or it eats a line of text and fails contrast at the same time.

Related videos

Remotion explainer prompt — document to vertical video
Remotion explainer prompt — document to vertical video
Remotion·Vertical Tested
Claude Motion explainer prompt — all-hands update style
Claude Motion explainer prompt — all-hands update style
HyperFrames·Landscape Tested
Claude Motion alternative — explainer without Motion (Remotion)
Claude Motion alternative — explainer without Motion (Remotion)
Remotion·Landscape Tested
Single-file HTML explainer prompt — seek(t) method
Single-file HTML explainer prompt — seek(t) method
HTML·Landscape Tested