Launch Video

launch-video

Turn the project in front of you into a 15–25 second launch video: find the story in the project, storyboard it on a beat grid, score it, build it as one animated CoDesign page cut to the music, verify it frame by frame, and export an mp4 plus a poster and share copy.

Builds on, without restating: the handbook loop, the video recipe (../handbook/video.md — timing, tracks, transitions, video fills, audio), the intake contract (../handbook/intake.md), the brand skill (a project's colours, fonts and logo), the formats skill and the judge gate. Generating music, sound and voice: the models skill. Inspired by the MIT-licensed /brag skill (github.com/latent-spaces/brag); this one builds on CoDesign instead of HTML.

Video needs the native engine. If export format=mp4 refuses because the server runs on WASM, stop and tell the user the reason it gives — do not ship stills instead.

Input

The project is the current working directory unless the user names another. Options, from flags or plain language:

Generating sound needs a signed-in account (login); without one, use the user's file or ship silent — a silent video is a complete deliverable. If out already holds a previous run, use out-YYYYMMDD-HHMMSS/ instead of overwriting.

1 — Inspect the project

Read the project, not a pitch about it: README, package or app metadata, the landing page or docs copy, the changelog, and any logo, icon, screenshot or brand file in the repo. Answer, in your own notes:

1. What is it, in one plain sentence a stranger would repeat?
2. Who is it for?
3. What does it do that is surprising or specific — the one thing to lead with?
4. Two or three highlights, each in the project's own words (a real feature, number or claim).
5. What can be shown: real UI, output, screenshots, a logo, a key visual?
6. Brand: colours, fonts, logo (use the brand skill's lookup when the repo carries a kit).
7. Tone that fits — or the one the user asked for.
8. The call to action: product name plus how to get it — the real install step and the URL.

If 1, 3 or 8 cannot be answered from the project, ask once, per the intake contract.

2 — Plan the storyboard

Story before motion — read reference/story.md first. Decide the one line, the viewer's problem, the structure (outcome first, before/after, story spine or hook → reveal → proof) and the proof moment — the beat where the claim becomes undeniable on screen.

Then pick the tempo — 100–128 BPM suits most launches, so a beat is 0.47–0.6 s — and write <out>/plan.md: the one line, the structure, the proof moment, the BPM, then a beat table — start, end, what is on screen, the exact words, the motion, the transition out. Run the story checks at the end of story.md on it; a beat that only says a claim instead of showing it is rewritten or cut.

Make it catchy

• Hook in the first second. Open on full-bleed kinetic type or a smash-cut montage of results — never a logo on a blank screen, never a slow fade up.
• Cut on the grid. Every cut lands on a beat: 0.5, 1 or 2 bars' worth, at the track's BPM. Shots are 0.4–2 s long; vary them — a run of short cuts, then one longer hold.
• One big line per beat. No explanatory captions or HUD chrome. One line, set big — it fills the frame; product UI on screen is the exception, simplified so it reads at a glance.
• Fill the frame. Alternate dark beats with full-bleed accent-colour beats so every cut reads.
• Move between beats. A transition on every cut (../handbook/video.md, "Transitions between clips"), matched to the tone below; the biggest move on the musical accents.
• Keep the camera alive. A slow drift on every shot — ken_burns or crop_zoom on images; a clip-long zoom in-animation (its animation/zoom/fade off, Linear easing) settles type from large to rest.
• Show, never list. No run of slogans on colour fields: each beat shows the product doing something — its UI or output in action, the input visible before the result.

Every beat also stays:

• Readable. A short label stays at least 0.8 s after it settles; a sentence ~0.3 s per word. Keep the pace in motion and cuts, never in flashing text.
• Specific. It must be about this project; "streamline your workflow" and other generic SaaS lines are banned — use the project's own copy.
• Funny only if the project is. Humour comes from the project, not from trying.

End on the call to action and hold it: the product name, the real install step — for a Claude Code plugin that is the plugin commands, not a raw npx line — and the URL. For CoDesign itself:

Copy code
claude plugin marketplace add imgly/codesign
claude plugin install codesign@imgly-codesign
img.ly/codesign

Show the user the angle and the beat table and wait for a go before building, unless they asked you to just make it.

3 — Score

Sound comes before the build, because the cuts are timed to it. Per reference/sound.md:

1. Music — generate a track at the planned BPM and length, or asset_add the user's file.
2. Start the video in one edit: the page as step 4 describes it (size, Video mode, duration) with only the music bed on it, ending with readBeats at the planned BPM (an MP3 bed is rendered to WAV first, which takes an export and a second edit — see Beat-tight sync). Save its result as <out>/build/beats.json — the beat grid and the accents.
3. Snap the beat table to it: every cut, transition and loop pulse on a beat time; accents get the big moves. Update plan.md with the snapped times.
4. A short whoosh or hit per transition; a voiceover and word-timed captions only when voiceover=on.

4 — Build

One page is the whole video — the one step 3 started with the music: size it per format, set the scene's scene: { mode: 'Video' }, and set the page's playback.duration to the storyboard total. Plan the tracks before the first build edit: list the layers the storyboard uses (backgrounds, media, headline, subline, chip, …), bottom first, and write that track plan into plan.md. Each layer is ONE track that holds every beat's clip for that layer, one after another; nothing but audio goes on the page directly (../handbook/video.md, "Timeline: one track per layer"). Tracks also make transitions possible, since only track clips take them. Reuse each track across beats, and make items that enter together in one beat (a list, a row of chips) one group clip. Name every block by beat and layer (b3/bg, b3/line) so later edits find them. When an edit result says the clips "fit on M tracks", merge them onto that many tracks before going on.

Animate entrances, exits and loops on top of the transitions. Type, options, duration, easing and text writing style are all facade keys:

jsCopy code
await engine.design.setProps(title, {
  animations: {
    in: {
      type: 'slide',
      duration: 0.6,
      easing: 'EaseOutBack',
      slide: { direction: 4.71 }
    },
    out: { type: 'fade', duration: 0.3 }
  }
});
await engine.design.setProps(line, {
  animations: {
    in: { type: 'fade', writingStyle: 'Word', overlap: 0.3, duration: 0.8 }
  }
});

• Types: entrances and exits slide fade blur grow zoom pop wipe pan spin baseline crop_zoom; text typewriter_text block_swipe_text spread_text merge_text; loops *_loop (no easing); images ken_burns. Reference: ../handbook/animation.md.
• Word- or letter-wise text reveals: writingStyle (Line Word Character Block) plus overlap (0–1) — see ../handbook/animation.md.
• Keep entrances 0.3–0.8 s; a beat's exit must finish before its duration ends.
• Real visuals first: asset_add screenshots and the logo. Stock or generated imagery only fills what the project cannot show.
• Audio: the music bed spans the page with a 1 s fadeOut; each sound effect is its own audio block at its cut (the video recipe).

Save the code of every edit you run to <out>/build/NN-<step>.js, in order — with the plan and beats.json, that is what makes the video reproducible.

5 — Verify, export, deliver

• preview the page with time at the middle of every beat. Run the judge loop on those frames: every line readable at its hold time, nothing clipped at the canvas edge, the hierarchy clear at a glance. Fix in place and re-check.
• preview the middle of every transition too: the still shows it as the mp4 will. One clip whole there means the transition is missing or off its cut — fix it before exporting.
• export({ format: "mp4", blockId: page }) → <out>/launch.mp4.
• Poster: pick the strongest frame from the previews, export it as png → <out>/poster.png.
• export({ format: "imgly" }) → <out>/design.imgly, the editable source.
• Write <out>/share-copy.txt: a one-line post, a two-sentence post, and alt text.
• Report: the mp4 path, its length, and one sentence per beat.

6 — Editions

The exported design is the master. Derive every other edition from it rather than rebuilding: the resize skill for vertical and square cuts (re-check that each beat's line still fills the new frame and clears the edges), the localize skill for other languages (captions and the voiceover re-generated in that language, the cut times kept). Export each to <out>/launch-<format>-<lang>.mp4.

Tones

Presets set pacing, type personality and transitions; the user's own direction always refines them.