The prompt behind our launch video

How to use it

1. 1

   Open a coding agent

   Claude Code, Cursor or Codex, in an empty folder. It needs Python 3 with Pillow and ffmpeg installed; the agent will install them if they are missing.

2. 2

   Paste the prompt and fill in your product

   Name, tagline, the problem you replace, 4-6 features, and a folder with real screenshots or short clips. The agent asks for anything that is missing before it starts.

3. 3

   Review the contact sheet, ask for changes

   The agent renders, checks one frame per scene and fixes what overlaps. Then it is a conversation: “slower background”, “show the real screen here”, “new headline for scene 2”.

You are a motion designer and a Python engineer. Build a launch video for my product, rendered frame by frame with Python (Pillow) and ffmpeg. No After Effects, no paid tools, no headless browser.

## About my product (fill this in before you start)
- Product name:
- One-line tagline (4-8 words):
- The problem it replaces, in one sentence:
- 4 to 6 features to show. For each: a short headline, one line of explanation, and what the viewer should SEE (screenshot, screen recording, or "mock it"):
- Brand colors, logo file (SVG or PNG), website URL for the final call to action:
- Assets folder with real screenshots / short clips of the product:

If anything above is empty, ask me for it in ONE message before writing code.

## Format
- 1920x1080, 30 fps, H.264, yuv420p, -movflags +faststart. 40 to 55 seconds. No audio track unless I give you music.
- Also export a 1280x720 web copy under 5 MB (crf ~27).

## Look: live mesh gradients behind white text
Every scene sits on a slowly moving gradient. Build the background with ffmpeg's own gradients source, two layers blended:

  gradients=s=240x135:r=30:d=<scene seconds>:n=5:c0=0x..:c1=0x..:c2=0x..:c3=0x..:c4=0x..:type=linear:speed=0.02:seed=<n>
  gradients=s=240x135:r=30:d=<scene seconds>:n=4:c0=0x..:c1=0x..:c2=0x..:c3=0x..:type=radial:speed=0.015:seed=<n+3>
  [a][b]blend=all_mode=overlay,gblur=sigma=10,scale=1920:1080:flags=bicubic,eq=saturation=1.3:contrast=1.08

Palettes (linear layer / radial layer), one per scene, never the same palette twice in a row:
- lilac: 9b6bff ff9fe0 3b1f7a f2d9ff 6d7bff / 1f0f40 fff0fb b58cff ff7ac8
- warm: ff3b5c ffb03a 8e1f3f ffe27a ff6a2b / 5a1030 fff1c9 ff4d6d e0891c
- peach: ff7a45 ffc15e d9432f ffd9a0 f25c54 / 7a2418 ffe8c2 ff8a5c e8a33a
- rose: ff4f8b ff9e6d 7e1d4f ffc9a8 e8457a / 3f0f2e ffe1ea ff6f91 d9774b
- mint: 2fd39a b8f25a 0f6b5c e9ff9a 3fbf7f / 0c3b33 effff0 5fe0b0 8fd43a
- sky: 3d7bff 8fd3ff 1b2f8a c8e8ff 5a5cff / 0c1640 f0f6ff 6ea8ff 7a6cff

Render one segment per scene, each 0.7 s longer than the scene, and chain them with xfade=transition=fade:duration=0.7 so colors melt from scene to scene. Keep speed at 0.02 / 0.015: faster reads as dizzy. Put a dark scrim on top (alpha 0.14 at the top to 0.30 at the bottom) so white text always reads.

## Pipeline
1. Render the background to bg.mp4 with ffmpeg.
2. In Python, read bg.mp4 frame by frame from an ffmpeg rawvideo pipe, draw each scene on top with Pillow (RGBA alpha_composite), and write raw frames into a second ffmpeg process. Never hold all frames in memory.
3. Cache sprites (text, cards, pills) with lru_cache; only re-render what animates.
4. Decode product clips once into a list of frames at 30 fps and loop them inside their scene.

## Motion rules
- Easing: ease-out cubic for entrances, ease-in-out for moves, a back-ease (overshoot ~1.9) for things that "pop" (cards, chips, logo).
- Every element enters: fade + rise 30-80 px, staggered 0.1-0.2 s. Every scene exits in its last 0.45 s: fade + rise 50-60 px. Nothing just appears or vanishes.
- Something must be moving in every frame, but only one thing should be the focus at a time.
- Show the product WORKING, not a static screenshot. Screens scroll, bubbles arrive one by one, a cursor drags a block into place, a counter counts up, a switch slides to On, a progress step turns into a checkmark.

## Scene structure
1. Intro (3.5 s): logo pops in, the name rises letter by letter, the tagline fades in under it.
2. The problem (4.5 s): 10-12 translucent pills naming the tools people juggle float around the edges, a short line in the middle names the mess, then the pills fly into the center and collapse into the logo, and the answer line appears. Keep the pills OUT of the text band in the middle.
3-7. One scene per feature (6-8 s each): headline + one-line explanation, and on the other side the feature in motion. Alternate text left / visual right, then visual left / text right, then centered, so it does not feel like a template.
8. Finale (5 s): logo, the tagline word by word, a white pill button "Start free at <your site>", and one line listing everything the product does.

## Real UI, not fake mockups
- When the product has a screen worth showing, capture the REAL interface: a full-page screenshot of the screen, then animate it (scroll it inside a rounded window with its header pinned, zoom into one area, reveal it top to bottom).
- Capture at a NARROW viewport (about 760 px wide) at 2x scale, so the text is still readable when the window is shown at ~900 px on screen.
- Hide noise before capturing (repeated per-item buttons, debug labels) and force English dates if the machine's locale is different.
- Never put real customer names, emails or conversations in a frame. Fill the product with an invented company and invented people before capturing.

## Type
- One sans family, bold for headlines, regular for explanations. Headlines 72-96 px, explanations 30-34 px, UI text inside mockups no smaller than 20 px. X plays the video small; anything under 20 px is noise.
- Check every glyph you use exists in the font. Arrows and emoji often do not: write "Comment-to-DM", not "Comment → DM", or draw the arrow as a shape.
- Never leave a single word alone on the last line of a headline.

## Checking your work (do this, do not skip it)
After every render, extract one frame from the middle of each scene and one from each transition, tile them into a contact sheet, and look at it. Fix and re-render until:
- no text overlaps another element,
- nothing is cut off at the frame edge or inside its card,
- every headline is readable at 640 px wide,
- the background moves smoothly and never flashes.

Deliver: the 1080p file, the web copy, the contact sheet, and the Python script so I can change a line and re-render.