product-launch-motion

Directs and renders product launch videos as HTML, CSS, and GSAP compositions rendered to MP4.

60|2|Updated Jul 27, 2026
One-click install
npx skills add https://github.com/AbubakrChan/product-launch-motion --skill product-launch-motion-abubakrchan
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: product-launch-motion
Source: https://github.com/AbubakrChan/product-launch-motion
Command: npx skills add https://github.com/AbubakrChan/product-launch-motion --skill product-launch-motion-abubakrchan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, ffmpeg, hyperframes, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Programmatic video tools handle rendering but not direction, so code-generated videos often look like slideshows: reveals miss the voiceover, cursors are invisible, sound effects are inaudible, and every output looks the same. This Skill encodes the motion-design craft — ten laws, a fourteen-step pipeline, fourteen shot constructions, and thirty-four measured traps — so an agent can direct and render a deterministic launch film from code. ## Core Features & Use Cases - Word-locked sync: every reveal is cued to the measured start time of the word it illustrates, using a word-level transcript of the actual voiceover file. - Deterministic rendering pipeline: scripts assemble the film index, inject transitions, wire audio and film grade, master to broadcast loudness (−14 LUFS), and verify cues in the delivered MP4. - Creative direction discipline: forces three competing visual directions before building, with an approved-figures list so no invented metric ever appears on screen. - Use Case: Ask for a 45-second launch video for your product; the Skill writes the brief, script, and voiceover, derives frame timings from the audio, builds one HTML frame per shot with a camera rig and cursor, then renders and masters the final MP4. ## Quick Start Ask the agent to make a 45-second launch video for your product at your website URL, and it will take it from there.

Frequently Asked Questions about product-launch-motion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a product launch video with code?

Install the skill and ask for a launch video for your product URL. It writes a brief, script, and voiceover, derives frame timings from the audio, builds one HTML file per shot with GSAP timelines, then renders and masters the MP4 with FFmpeg.

How do I sync animation reveals to voiceover words?

Transcribe the voiceover with word-level timestamps (e.g., Whisper), convert it to a cue table with the word-timings script, and position each GSAP tween at the measured start time of the word it illustrates rather than estimating.

Does this work with Remotion instead of HyperFrames?

Yes. The laws — word-locked sync, determinism, the two-node camera, sound arithmetic, mastering — are renderer-neutral, and the renderer-contract reference includes the Remotion equivalents such as Sequence, spring(), and useCurrentFrame.

Why does my rendered video look different from the preview?

The renderer seeks a paused timeline rather than playing it, so anything non-deterministic — Math.random, Date.now, CSS transitions, repeat/yoyo — breaks between preview and render. Replace them with index-derived values and playhead-seeded drivers.

Why is my sound effect inaudible in the final video?

Raising a cue's volume cannot rescue a quiet source file; if the asset sits 20 dB under the narration, volume changes move the mix by tenths of a dB. Level the asset itself with the level-sfx script, then verify the cue in the delivered MP4 with verify-cue.

When should I not use this skill for video?

Skip it for talking-head editing, screen recordings with captions, or anything whose deliverable is a live web page rather than a video file. It targets directed launch films, teasers, sizzles, and animated explainers rendered to MP4.