AbubakrChan/product-launch-motion

Paste your website URL. Get a product launch video. That's it.
Already installed it? Get the latest version with npx skills update.
**No Claude Code? Get the film made for you: a polished launch video in 30 minutes, from $20 → launchvideos.app**
Then, in Claude Code:
> Make a launch video for https://your-website.com
Claude reads your site, writes the story, directs every scene and renders a 60 fps MP4 with
music, synced sound effects and real motion blur. No editing, no After Effects, no templates.
The film above started the same way: a URL, then a few rounds of notes.
v2 is here. Use it with Claude Opus 5.5 to get results like these films.
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 these
films.** 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.
30 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.
---
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
colour. Transitions are morphs, camera pushes, or zooms into an element that *becomes*
the next scene.
- **Blur content swaps.** Text inside a morphing container exits short and early, then the
new text springs in. Nothing overlaps.
- **Springs, a tiny overshoot at most.** Closed-form damped springs, never bouncy easing.
Toggle knobs and tab indicators stretch because their two edges ride different springs.
- **A cursor drives everything.** Real clicks with press-scale and ripple, real drags that
spring back on release. The product's own agent can take over as a second cursor.
- **The camera frames every state.** An empty frame is a bug. Pull-backs reveal scale: one
email becomes a wall of hundreds.
- **Music first.** The beat grid is measured with numpy, the drop lands on the big moment,
and every synthesized UI sound is placed by its own measured peak, so it hits the beat.
- **Real data, original scenes.** Real numbers on odometers, customer logos slammed one per
beat, and nothing copied from the product's website.