Yassiinee/product-launch-motion-design-skill

Launch film

Turn a product or a feature into a launch video that looks made by a motion studio: generated entirely in code, cut to its own beat, in the product's own colours and type. No footage, no stock, no After Effects.

How it is built. A film is a HyperFrames project (HTML rendered to MP4). Its whole story lives in one data file, film.js: chapters on a beat grid, each one a blueprint (a tested scene: lit 3D, rebuilt UI, kinetic type, a counter, an end card) with its own params, words and transition. The LF engine in ${CLAUDE_SKILL_DIR}/engine turns that file into frames. You spend your effort on the story, the words and the product's screens; the engine handles timing, transitions, colour, light and sound placement.

Skill folder: ${CLAUDE_SKILL_DIR} (scripts in scripts/, guides in reference/, ten worked examples in examples/).

Hard rules

• Real facts only. Prices, dates, metrics, quotes, customer and partner logos come from the user, word for word, with permission. Never invent a number to make a slam land. Numbers that are illustrative are labelled as such on screen.
• Fictional data inside the product. Rebuilt screens use invented names and content. Real customer data never appears.
• The brand wins on look; the film wins on motion. Colours, fonts, logo, voice and claims come from the product and never bend. Pace, light, depth, camera and transitions are the film's.
• Sound-off first. The story reads from picture and words alone. Hook in the first 2 seconds. At most 6 words a card, under ~2.5 words per second overall.
• Every frame is a pure function of time. No CSS transitions, no timers, no Math.random() (use LF.rng), no network at render time. Rebuilt screens change state only through actions.
• Ask before committing, pushing, publishing, or downloading anything the user did not ask for. Every render is kept (out/<name>/v1, v2, ...).

Workflow

Steps marked GATE wait for the user. Use AskUserQuestion for every question (at most 4 per call, 2-4 options each, "You choose for me" always available, the best option first and marked "(Recommended)").

0. Check the machine

node ${CLAUDE_SKILL_DIR}/scripts/doctor.mjs. It reports Node 22+, FFmpeg, Python + numpy and HyperFrames, with the exact install command for the user's OS. Fix what fails before building (ask before installing anything).

1. Learn the product, then interview (GATE)

Read what you were given first, so the questions are informed: the site (npx hyperframes capture <url> -o <dir>/_capture --json, or WebFetch), the codebase (design tokens, fonts, logo, the screens that matter), or the files. Then ask only what you could not find. Question bank and defaults: reference/intake.md.

1. The product and the feature: what is new, who it is for, what pain it removes.
2. The launch size: major launch, big feature, small feature / changelog, teaser, integration, milestone, roundup.
3. The one message (offer 2-3 drafted from what you read).
4. Real proof (numbers, quotes, logos) and the CTA, availability, date, URL.
5. Where it plays: website / LinkedIn 16:9, feed 1:1, Reels / TikTok / Shorts 9:16 (reference/craft.md § Platforms).
6. Music: a generated royalty-free bed (drive, trap or pulse) or their licensed track.

2. Recommend the film type (GATE)

reference/film-types.md has the eleven types, their chapter recipes and a decision matrix. Recommend 2-3, best first, each with why it fits, its length and format, the assets it needs, and the matching example (examples/<type>/). The user picks.

3. Scaffold and brand

node ${CLAUDE_SKILL_DIR}/scripts/new-film.mjs <dir> --size 1920x1080 --fonts "<Display font>,<Body font>"

It runs hyperframes init, copies the engine, vendors GSAP and Three.js, and pulls Google fonts from @fontsource (licences included). For a brand's own fonts, copy the files into assets/fonts/ and declare them in the lf:fonts block of index.html. Fill film.js → brand from the product: colours (dark, primary, accent, light, plus any others), fonts, radius. The accent is the one highlight.

4. Story on the grid (GATE)

Write the chapters in film.js from the type's recipe (start from the matching example). Every chapter: blueprint, from / to on the grid, bg, enter transition, words, hud, params. Blueprint params and timings: reference/blueprints.md. Rebuild the screens the story needs in screens.js (reference/screens.md): fictional data, the brand's tokens, ids on everything an action touches. Then node ${CLAUDE_SKILL_DIR}/scripts/sync.mjs <dir> (writes BEATSHEET.md, flags bars where nothing happens) and show the user the beat sheet plus three style frames (the opening, one product moment, the strongest moment) from stills.mjs. Wait for OK.

5. Music and sound

python ${CLAUDE_SKILL_DIR}/scripts/music.py bed --out <dir>/assets/audio/bed.wav --bpm 128 --bars 12 --style drive --energy 122233333320 --hits "2 5" --risers "5" --gaps "5"
python ${CLAUDE_SKILL_DIR}/scripts/music.py sfx --out <dir>/assets/audio/sfx
node ${CLAUDE_SKILL_DIR}/scripts/sync.mjs <dir>

Write the energy curve from the story; put the hits where the picture changes hardest and the drop on the strongest moment. Effects go on events (sfx, volume). Details and a licensed-track path: reference/audio.md.

6. Review loop

reference/review.md. Stills are cheap; renders are not.

1. node ${CLAUDE_SKILL_DIR}/scripts/stills.mjs <dir> --chapters and --handoffs: look at every frame. Words on clean colour, nothing cut off, the highlight where it should be, every transition clean.
2. cd <dir> && npx hyperframes check: lint, layout, contrast. Fix every error.
3. node ${CLAUDE_SKILL_DIR}/scripts/render.mjs <dir> --draft, watch it once with sound. Fix, repeat. Show the user frames as you go; turn every note into a rule.

7. Final render, verify, deliver

node ${CLAUDE_SKILL_DIR}/scripts/render.mjs <dir> --gif --poster <bar.beat>      # 240 fps master, motion blur, -14 LUFS
node ${CLAUDE_SKILL_DIR}/scripts/verify.mjs <dir>/out/<name>/v1 --probe <t>:<x>,<y>=<r>,<g>,<b>

3D renders take minutes: run the final in the background. Verify checks duration, colour tags, loudness and true peak, brand colours at probe points, and scans for one-frame glitches. Send the MP4 (and GIF, poster), list what was assumed, ask for notes. Save the brand and the owner's standing choices in <dir>/../BRAND.md so the next film starts from them.

Files

• engine/: the LF engine (core clock and grid, 3D stage, effects, UI motion, director) and the blueprints. Reference: reference/engine.md.
• templates/: index.html (composition shell), film.js, screens.js, the project's CLAUDE.md.
• scripts/: doctor, new-film, fonts, sync, stills, render, verify (Node, no dependencies), music.py (numpy), example.mjs (rebuild any example).
• reference/: intake, film-types, blueprints, screens, craft, audio, review, engine.
• examples/<type>/: film.js, screens.js, recipe.json and a README for each of the ten example films.