Product Launch Motion — a Claude Code Skill
Make Dribbble-level product launch videos from code. Install the skill, point Claude Code at your product, and it directs and renders a launch film: one shape that morphs through every scene and never cuts, springs, a cursor that drives every change, camera zooms, real numbers on rolling odometers, music-synced SFX, real motion blur, 60 fps.
v2 is here. Use it with Claude Opus 5.5 to get results like the films below.
This skill has been rebuilt on a newer, simpler stack: plain HTML and closed-form springs
instead of GSAP and HyperFrames, music-first timing instead of voiceover, and Playwright
subframes with ffmpeg motion blur. **Use it with Claude Opus 5.5 to get results like the
films below.** The original v1 (190 ⭐, thank you) is kept in legacy/.
🔊 Download it and turn the sound on. The preview above is silent. The real film is cut to the beat
of its music, and every click, whoosh and number roll lands on a drum hit.
Download the film (1080p, 60 fps, with sound)
to watch it as intended.
27 s, made for cheerful.ai. No After Effects, no stock templates, no AI video model: every frame is HTML computed from time. Bonus: the same film with a WebGL glass pass (refractive 3D shapes floating through every scene).
 |
▶ One shape, never cut (14 s seamless loop, 1440×1440, with sound) The idea the whole skill is built on. One element morphs through eleven UI states: button → loader → check → dynamic island → video reel → slider → toggle → tabs → chart → ⌘K palette → toast → button. Its content swaps with a short blur, the cursor does every click and drag, and the last frame is the first frame. |
npx skills add AbubakrChan/product-launch-motionThen ask for it:
Make a launch video for my product at example.com. You're the director.
What makes it look expensive
These are the rules the skill enforces. Each one came from a review note on a real film
(references/prompts.md has the prompts and notes, verbatim).
- One shape, never cut. Every state is the same element morphing size, radius and
- Blur content swaps. Text inside a morphing container exits short and early, then the
- Springs, a tiny overshoot at most. Closed-form damped springs, never bouncy easing.
- A cursor drives everything. Real clicks with press-scale and ripple, real drags that
- The camera frames every state. An empty frame is a bug. Pull-backs reveal scale: one
- Music first. The beat grid is measured with numpy, the drop lands on the big moment,
- Real data, original scenes. Real numbers on odometers, customer logos slammed one per
- You get a director. It makes the creative calls itself and logs each one as a
DECISION: line you can overturn in one reply.
What's in the box
| Path | What it is |
|---|---|
| SKILL.md | The creative direction and the process Claude follows |
| references/prompts.md | The original prompts and every review note, verbatim. Swap the product and reuse them |
| references/technique.md | Springs, camera, cursor, odometer, audio and render code patterns |
| legacy/ | The v1 skill: voiceover-led films with GSAP + HyperFrames, 34 traps |
Requirements
| Need | For | |---|---| | Claude Code with Opus 5.5 | Directing and building the film. Smaller models follow the rules but miss the detail | | Node ≥ 20 + Playwright | Rendering | | FFmpeg | Motion blur, encoding, loudness checks | | Python 3 + numpy | Beat grid and synthesized SFX | | A ~120 BPM royalty-free song | Optional. Check each track's licence; some free libraries mix in restricted items |
Everything runs locally and nothing costs money.
How it works
brief ──► state list on the beat grid ──► one HTML film, every pixel = f(t) in seek(t)
──► one frame per beat, contact sheet, fix ──► Playwright: 4 subframes per frame
──► ffmpeg tmix (motion blur) ──► 60 fps H.264 + mix ──► storyboard + seam scanBecause every frame is a pure function of time, renders are deterministic: seek to any moment and you get the same pixels, which is what makes per-beat QA and parallel rendering possible.
v1 → v2
| | v1 (legacy) | v2 |
|---|---|---|
| Timing | Locked to voiceover words | Locked to the music's measured beat grid |
| Motion | GSAP timelines | Closed-form springs, pure seek(t) |
| Renderer | HyperFrames | Playwright subframes + ffmpeg tmix motion blur |
| Structure | Shots and transitions | One shape that never cuts |
| Sound | Library SFX, levelled | Synthesized SFX placed by measured peak |
| Depth | CSS camera rig | Camera springs + optional WebGL glass |
v1 is still the better choice for a narrated explainer. It lives on in legacy/.
License
MIT for the skill and references — see LICENSE.
The sample films do not travel. They were made for Cheerful and are theirs; see
NOTICE for that and for third-party credits (music, footage, fonts).