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.
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.