Motion Reel

Stop relying on generic stock video or basic screen recordings that fail to capture your product's brand identity. This skill transforms your product URL and assets into a high-fidelity motion graphics reel, rendered frame-exactly from code. It eliminates the need for manual video editing by synthesizing a complete film, including beat-locked music, SFX, and multi-format delivery.

What it does

• Asset gathering extracts screenshots, logos, brand colors, and font files directly from a product URL.
• Beat-locked synthesis generates a musical score or analyzes a provided track to create a precise timing grid for animation.
• Code-driven motion builds a canvas-based film using spring physics and pure functions of time for predictable, high-quality rendering.
• Automated sound design masters audio to -14 LUFS, including synthesized SFX hits and optional lip-synced voice-overs.
• Multi-format rendering produces 16:9, 9:16, and 1:1 MP4 files simultaneously, optimized for social media and web.

How it works

1. Scaffold and gather by running the scaffold.mjs and gather.mjs scripts to collect site assets and brand styles.
2. Define the rhythm using beats.py to synthesize a bed or measure a track, ensuring every animation hit lands on a beat.
3. Build the film by writing a film.js file that maps assets and motion to the beat grid using the provided motion library.
4. Execute critique loops by rendering contact sheets and scoring the hook, readability, and brand accuracy until quality bars are met.

Frameworks & tools

This skill uses Node.js, Playwright, Chromium, and ffmpeg for rendering and media processing. It utilizes Python with uv for audio synthesis and beat detection, and a custom JavaScript motion library for spring-based animation.

Why this beats prompting it yourself

Generic AI video tools often hallucinate UI or produce low-resolution, unpredictable results. This skill ensures every frame is a pure function of code, using real product screenshots and brand fonts to maintain 100% visual accuracy.

Use cases

• Generate a product launch video for social media directly from a landing page.
• Create a high-energy showreel for a software portfolio using actual code and UI.
• Produce animated explainer ads that perfectly match a brand's color palette and typography.
• Deliver frame-exact motion graphics for mobile and desktop displays without manual keyframing.

Known limitations

Requires Node 18, ffmpeg, and uv installed on the host system. It cannot bypass cookie walls or logins to gather assets, so manual screenshots may be required for private dashboards.