← All videos

1080×1080 · 1:1 square Remotion Remotion + React

Run log

ModelClaude (agent build)
Renderer / stackRemotion + React
Iterations to final1
Render time24s (final render)
Format1080×1080 · 1:1 square
Published2026-10-25

What broke (and the fix)

  • Nothing broke — stills at frames 100 and 205 were clean and the first render shipped.
Original prompt Tested

App launch video — Remotion prompt (phone mock, store buttons, square)

by MotionPrompts (own run)
Launch videoPhone

Prompt

Banned list —Beat grid —Build method —Self-review —
<direction> An 8-second app launch film in Remotion (React, 1080x1080 square, 240 frames at 30fps). House style: near-black #0a0a0a background, panels #141414, borders #2a2a2a, text #ffffff/#c9c9c9, ONE accent #ff5c1a, Arial/Helvetica bold, no webfonts. This run's accent: #ff5c1a. A phone mock built entirely from divs cycles three app screens while launch copy builds beside it. No device photos, no store badges, no real app. No gradients, no stock photos, no real brand logos, no lorem ipsum, no purple/blue tech gradient. </direction> <structure> Frames 0-30 — Kicker "APP LAUNCH FILM — PocketGarden" top-left. The phone (rounded rect, thin border, notch pill) slides up on the left. Frames 24-110 — Screen 1 crossfades in: app header, one highlighted task card ("FERN — WATER TODAY"), one calm card. Frames 104-178 — Screen 2: a stats ring draws to ~78% over the streak number "12 DAYS". Frames 172-240 — Screen 3: a "NEW" pill and a feature headline with a mini bar chart. On the right, copy lands in order: the app name, then "Your plants, on schedule.", then two download pills ("DOWNLOAD — iOS" / "DOWNLOAD — ANDROID") and a fictional-app fine print. </structure> <build> One component, useCurrentFrame + interpolate with clamped extrapolation for every motion (no CSS transitions, no springs that need runtime state). Screens are absolutely-positioned layers inside the phone with hand-tuned crossfade windows. Ring = SVG circle with strokeDasharray = circumference and dashoffset driven by the frame. </build> <gotchas> - On this machine Remotion needs the Playwright chromium headless shell passed via --browser-executable; its own browser download stalls. - Crossfade windows must overlap by ~14 frames or the phone flashes empty between screens. - Check a still at the FINAL frame before rendering: the fine print and both store pills must be fully in. </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

Runs as written. The phone is pure divs, so any app can be reskinned by editing the three screen layers; keep the fictional fine print until a real app replaces it.

Related videos

Photo app launch film — HyperFrames prompt (shape-built photo grid, square)
Photo app launch film — HyperFrames prompt (shape-built photo grid, square)
HyperFrames·1:1 square Tested
Remotion pricing promo prompt — plan cards
Remotion pricing promo prompt — plan cards
Remotion·Landscape Tested
Remotion app walkthrough prompt — screens + cursor
Remotion app walkthrough prompt — screens + cursor
Remotion·Square Tested
AI showreel prompt for a business — Opus 5.5 style, tested
AI showreel prompt for a business — Opus 5.5 style, tested
HyperFrames·Landscape Tested

Submit a video

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