Website Launch Video

You built it; now show it off. You turn the owner's website or app into a short, specific, postable launch video: under 25 seconds, readable at phone size, made from the product's real copy, colours and screens, with music and sound that are licensed and recorded. The test of quality: a stranger can tell what the product does after one watch, and the video could not belong to any other product.

When to use

• "Make a launch video for the new site." / "Turn this into a video I can post."
• "Let's show off what we built", "make an announcement clip for the release".
• "Make it feel like a ridiculous startup launch" / "an overproduced mobile game ad" / "a museum exhibit" (freeform tone direction).
• "Same video but vertical for TikTok", "a 15-second version", "with a voiceover".

What you need

• Access to the product: the site's source code (cloned with the owner's connected git account, or a zip they send) or the live URL. Screens behind a sign-in come from the owner as screenshots or a demo account; ask with clarify.
• Node 22+, FFmpeg and HyperFrames on your computer: run the check in references/setup.md first, every time, because installs outside /home/user are lost when the computer is rebuilt.
• The sound-effect library in ~/media-library/sfx/ (built once, references/audio.md).
• The owner's preferences, if any: tone, format (landscape 1920x1080, vertical 1080x1920, square 1080x1080; default landscape), length (default 15 to 25 s, chosen by the content), music on or off, sound effects on or off, title, voiceover (off unless asked). Read memory for confirmed defaults; do not ask about what you can infer.
• The HyperFrames skills, loaded with skill_view when you build: hyperframes-core, hyperframes-animation, hyperframes-creative, hyperframes-keyframes, hyperframes-cli. And hyperframes-audio for the carve when there is a voice. Music, sound and voice sourcing is in this skill (references/music.md, references/sfx.md, references/voice.md, references/sources-and-licences.md).

Output folder. Work in ~/Desktop/<your name> - Work space/launch-video-<YYYY-MM-DD-HHMMSS>/ (the <output-dir>). Take the timestamp once at the start and use it for every file of the run, so a new run never overwrites an earlier one.

Method

1. Inspect the product (references/step-1-inspect.md).
   • Get the material onto your computer: source code first, the live site second, the owner's files third.
   • Read the copy, palette and fonts, and above all the user flow: entry, key action, result.
   • Gate: the nine-question rubric is answered in writing.
2. Plan and storyboard (references/step-2-plan.md).
   • Write <output-dir>/launch-plan.md: angle, hook, two or three sharp highlights, punchline, the user flow worth showing, tone, format, duration, visual identity, share-copy draft, audio direction.
   • Storyboard scene by scene: what is on screen, the text, timing, transition mood, audio intent, and any sequential reveal or simulated interaction.
   • Tone presets (references/tones.md): default (playful, clean, postable), polished (serious, elegant), yc-parody (deadpan startup seriousness), chaotic (fast, loud), deadpan (calm, dry), cinematic (trailer scale), app-store (smooth feature cards). A freeform direction maps to the nearest preset for pacing and keeps its own words in the plan.
   • Choose the music now: license a bed (references/music.md) and get its cues (references/audio.md).
   • Gate: the file exists and scene durations sum to 15 to 25 s.
3. Build the composition (references/step-3-compose.md).
   • Write composition-brief.md, then build <output-dir>/composition/ with the HyperFrames skills.
   • Copy only the audio you use into composition/assets/ and record every file in composition/MEDIA-CREDITS.md.
   • Choose sound effects after the motion exists (references/sfx-analysis.md); beat-lock 1 to 3 major moments; add a subtle audio-reactive touch when there is music.
   • Voiceover only when the owner asked: text_to_speech, the voice sets the pace, the music is carved under it.
   • Gate: npx hyperframes check passes with zero errors.
4. Validate, render and deliver (references/step-4-deliver.md).
   • Snapshot and look at key frames with vision_analyze; when the brief was open-ended, show the owner key frames before the final render.
   • Render, pick the best settled frame as launch.jpg, bake it in as frame 0, write share-copy.txt.
   • Gate: launch.mp4 exists with the chosen poster as frame 0, and the share copy is written.

Creative laws (every video, every tone)

• Short. 15 to 25 seconds. Not one second more without a reason.
• Readable. Keep the pace high with motion and cuts, never by flashing text. A short label holds about 0.8 s settled; a sentence about 0.3 s per word, at least 1.2 s. Fast in, then hold; never fast in, then gone.
• Specific. It must feel made for this product, not any product.
• Show the thing. At least one scene shows real UI, copy or a key visual from the product. The product doing its thing beats the product describing itself. No abstract filler.
• No generic SaaS language. "Streamline your workflow" is banned. Use the product's own copy and claims.
• The hook is everything. The first 2 seconds decide whether anyone keeps watching. Plan the hook first.
• Funny earns its place. Humour comes from the product's own absurdity, not from trying to be funny.
• Pattern, not template: hook (2 to 3 s), reveal (2 to 4 s), two or three sharp highlights (5 to 12 s), punchline or outro (2 to 4 s). Adapt it.

Output

<output-dir>/
  launch.mp4            the video, poster baked in as frame 0
  launch.jpg            the poster: the strongest settled frame
  launch-plan.md        plan and storyboard
  composition-brief.md  the build brief
  share-copy.txt        one to three sentences, plus any required credit line
  composition/          the HyperFrames project, with MEDIA-CREDITS.md

Hand over in this order:

• show_card (type media) with launch.mp4, so the owner can watch it.
• One sentence on the creative idea.
• The share copy, and any credit line that must be published with it.
• An offer to re-roll a scene, change the tone or try another angle.

Do not publish it yourself unless the owner asks and the account is connected.

Checks before you finish

• Duration is 15 to 25 s (ffprobe), and matches the composition.
• Every text line is readable for its full hold in the rendered frames you looked at (phone size: look at a frame scaled to 360 px wide).
• At least one real product element is on screen; the palette and fonts match the site (or the fallback is stated).
• npx hyperframes check passed; the poster frame is settled and postable; frame 0 is the poster.
• Audio: music and sound licensed and recorded, loudness measured (about -14 LUFS integrated, true peak at or under -1 dBTP for social, checked against current platform guidance), no voice track unless asked.
• The share copy is specific, in tone, and carries any required credit.

Pitfalls

• Describing the product instead of showing it. Stat cards and diagrams from the landing page are at most a frame around the working flow.
• Text too dense for the scene. A 4 s scene carries two or three short reads. Cut copy or split the scene; never speed it up.
• Sequential text on every fast beat. Snap readable lines to every other beat or reveal and hold.
• Bouncy, generic motion and abstract colour washes. They make it look like any video. Use the product's own elements.
• Unlicensed or unrecorded music. Every file has a MEDIA-CREDITS.md row; CC BY credit goes in the post.
• Adding narration nobody asked for. Voice is opt-in.
• Arbitrary poster frames. Pick the strongest settled beat and bake it in.
• Showing a localhost preview link. The owner cannot open it; send frames, drafts and the final file.