Repolode
Submit
AbubakrChan

AbubakrChan/product-launch-motion

A Claude Code skill that turns a website URL into a 60 fps product launch video built from HTML, with music-synced sound effects and motion blur.

View on GitHubWebsite
Stars
322
Forks
47
Open issues
0
Last commit
5 days ago

What is it?

Product Launch Motion is a Claude Code skill that takes a product website URL and directs, builds and renders a short launch video. Claude reads the site, writes the story, lays out each scene on a beat grid measured from a music track, and outputs a 60 fps MP4 with synced sound effects.

Every frame is HTML computed as a pure function of time, so renders are deterministic and can be checked beat by beat. Playwright captures subframes and ffmpeg applies motion blur. Animation uses closed-form damped springs, and a single on-screen element morphs through states instead of hard cuts. The skill requires Claude Opus 5.5 and needs Node 20+, Playwright, FFmpeg, and Python 3 with numpy.

The repository also keeps the earlier v1 skill, which builds voiceover-led films with GSAP and HyperFrames, in a legacy folder.

Key features

  • 01Builds a launch video from a website URL with no manual editing.
  • 02Places motion and sound effects on a beat grid measured from a music track.
  • 03Renders 60 fps output with ffmpeg motion blur.
  • 04Uses closed-form springs and a single morphing element instead of hard cuts.
  • 05Supports an optional WebGL glass pass for 3D shape effects.

Use cases

  • Creating a product launch video for a SaaS landing page without a video editor.
  • Producing short promotional films with synced sound from an existing website.
  • Prototyping motion-design ideas as deterministic HTML rendered to video.

Quick start

  1. 1

    Install the skill

    npx skills add AbubakrChan/product-launch-motion
  2. 2

    In Claude Code, ask for a video with your site URL

Things to know

  • Needs Claude Code, and the README recommends Opus 5.5, since smaller models miss much of the detail.
  • Rendering requires Node 20+ with Playwright, FFmpeg, and Python 3 with numpy, all installed locally.
  • The sample films were made for Cheerful and are not licensed for reuse, despite the MIT license on the skill.

Topics

#agent-skill#claude-code#motion-graphics#html-to-video#ffmpeg#playwright#video-generation#agent-skills#ai-agents#anthropic

FAQ

What is product-launch-motion?
A Claude Code skill that turns a website URL into a 60 fps product launch video built from HTML, with music-synced sound effects and motion blur. Product Launch Motion is a Claude Code skill that takes a product website URL and directs, builds and renders a short launch video. Claude reads the site, writes the story, lays out each scene on a beat grid measured from a music track, and outputs a 60 fps MP4 with synced sound effects.
Is product-launch-motion free to use? What license does it have?
product-launch-motion is open source under the MIT license. Check the license terms before using it in commercial products.
Is product-launch-motion still maintained?
Actively maintained. The last commit to product-launch-motion was on Oct 15, 2026.
What can I use product-launch-motion for?
Creating a product launch video for a SaaS landing page without a video editor. Producing short promotional films with synced sound from an existing website. Prototyping motion-design ideas as deterministic HTML rendered to video.
How do I install product-launch-motion?
Install the skill: npx skills add AbubakrChan/product-launch-motion In Claude Code, ask for a video with your site URL
Where can I get product-launch-motion?
The source code and installation instructions are on GitHub: https://github.com/AbubakrChan/product-launch-motion

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects