Product Launch Motion – Claude Code Skill

What it is A Claude Code skill that turns a website URL into a short, high‑quality product‑launch video. Claude reads the site, writes a story, directs scenes, and renders a 60 fps MP4 with music, sound‑effects and motion blur – all from pure HTML/CSS/JS, no After Effects or AI video models.

How to use

# Install the skill (once)
npx skills add AbubakrChan/product-launch-motion
# Then, inside Claude Code, ask:
Make a launch video for https://your-website.com

Claude will output a series of DECISION: lines (the director’s choices) and the final video is produced locally.

Key ideas

• One shape, never cut – a single UI element morphs through all UI states (button → loader → check → … → toast → button) creating a seamless visual flow.
• Closed‑form springs – deterministic damped‑spring math drives every transition, giving a subtle overshoot without bouncy easing.
• Music‑first timing – a ~120 BPM royalty‑free track is analysed with NumPy; every UI sound lands on a beat peak.
• Cursor‑driven actions – clicks, drags and presses are animated by a virtual cursor, optionally replaced by a product‑specific “agent” cursor.
• Pure‑function rendering – each pixel is f(t), so any frame can be regenerated deterministically.
• Render pipeline: HTML → Playwright sub‑frames → FFmpeg tmix for motion blur → 60 fps H.264 MP4.

What’s in the repo

Path	Description
SKILL.md	The prompt and workflow Claude follows.
references/prompts.md	Original prompts and review notes (copy‑paste to reuse for other products).
references/technique.md	Technical notes on springs, camera rigs, odometer animation, audio synthesis, rendering.
legacy/	v1 skill (voice‑over driven, GSAP + HyperFrames).
examples/	Sample videos and preview images.

Requirements

• Claude Code (Opus 5.5) – the AI that runs the skill.
• Node ≥ 20 + Playwright – for headless HTML rendering.
• FFmpeg – motion‑blur compositing and encoding.
• Python 3 + NumPy – beat‑grid analysis and SFX synthesis.
• Optional royalty‑free music (~120 BPM) for the soundtrack.

Why it’s interesting

• Shows how a large‑language model can act as a director, turning a brief into a fully‑animated video without any external video‑generation model.
• Uses deterministic, mathematically‑driven animation (springs, seek(t)) to make rendering parallelizable and reproducible.
• Demonstrates a novel “one‑shape, never‑cut” visual metaphor that keeps production cheap while looking expensive.

License MIT for the skill code and reference materials. Sample films are owned by Cheerful.ai (see NOTICE).

---

If you build a launch video with this skill, tag @Muhamma77800831 on X for a shout‑out.