app promo video

Producing professional app demo videos often requires expensive licenses, manual editing, and constant re-rendering when the UI changes. This skill automates the entire motion design pipeline, using Playwright to capture real app interactions and ffmpeg to compose high-quality promos synced to music beats.

What it does

• Automated capture uses Playwright to record real web or mobile app interactions, including hovers, clicks, and typing.
• Beat synchronization analyzes audio tracks with librosa to snap scene transitions to the music rhythm.
• Multi-format rendering generates videos for App Store (886x1920), Reels/TikTok (9:16), LinkedIn (1:1), and landing pages (16:9) simultaneously.
• Dynamic overlays renders captions and end cards using HTML/CSS for perfect typography and brand alignment.
• Incremental updates re-renders only affected segments when you change copy, brand colors, or background tracks.

How it works

1. Initialize config by running the init command to generate a promo.config.json based on your app's routes and destinations.
2. Capture footage using the capture command to record scenes from a dev server or local clips.
3. Plan and sync by running the beats and plan commands to align shot durations with the audio pulse.
4. Render and export using the render command to build all requested aspect ratios with eased zooms and transitions.

Frameworks & tools

This skill utilizes ffmpeg for video composition, Playwright for UI capture, librosa for audio analysis, and Python 3.10+. It leverages HTML/CSS for text rendering and AAC/H.264 for broad platform compatibility.

Why this beats prompting it yourself

Writing ffmpeg filters by hand is error-prone and time-consuming. This skill handles complex math for beat-snapping, easing, and safe-zone enforcement that a standard LLM cannot calculate reliably. It ensures your App Store previews meet strict technical specifications without manual trial and error.

Use cases

• Generate App Store and Play Store preview videos that comply with platform guidelines.
• Create high-impact Product Hunt launch GIFs and landing page hero loops.
• Produce social media teasers for X, LinkedIn, and TikTok from a single codebase.
• Re-generate an entire demo suite instantly after a UI redesign or brand update.

Known limitations

Requires local installation of ffmpeg and Playwright. The ffmpeg compositor does not support advanced React-style spring animations or complex typewriter effects found in heavier video editors.