Record product demos and walkthroughs for marketing assets. Two modes: quick screenshot-stitch demos via ply + ffmpeg, or polished Remotion compositions. Use when the user mentions product demo, demo video, walkthrough video, feature showcase, screen recording, GIF demo, product tour, onboarding video, visual tutorial, feature walkthrough, landing page video, hero video, product video, app preview video, or wants to show their product in action. Even if they just say 'show what it does', 'make a video of the app', 'I need a demo for my landing page', or 'record the app' — this is the skill. If someone has a working product and needs marketing assets that show it off, start here. Owns screen-recorded product demos and walkthroughs. For an AI-generated marketing or brand video with no real product footage, see /higgsfield-generate; for Remotion code and `remotion render` issues, see /remotion-best-practices; for stitching existing slides into an MP4, see /video-content.
Record product demos and walkthroughs for marketing assets. Two modes: quick screenshot-stitch demos via ply + ffmpeg, or polished Remotion compositions. Use when the user mentions product demo, demo video, walkthrough video, feature showcase, screen recording, GIF demo, product tour, onboarding video, visual tutorial, feature walkthrough, landing page video, hero video, product video, app preview video, or wants to show their product in action. Even if they just say 'show what it does', 'make a video of the app', 'I need a demo for my landing page', or 'record the app' — this is the skill. If someone has a working product and needs marketing assets that show it off, start here. Owns screen-recorded product demos and walkthroughs. For an AI-generated marketing or brand video with no real product footage, see /higgsfield-generate; for Remotion code and `remotion render` issues, see /remotion-best-practices; for stitching existing slides into an MP4, see /video-content.
If ply or ffmpeg missing, warn and suggest install.
Shot Duration Rules
Demo Type
Duration per Shot
Notes
Quick overview
0.5-1s
Fast cuts, build excitement
Feature demo
2-3s
Time to read + comprehend
Walkthrough
4-5s
Instructional pacing
Social clip
1-2s
Attention-grabbing, fast
Demo Storytelling Principles
Demos fail when they show the product mechanically instead of telling a story. The viewer needs a reason to keep watching. These principles come from what actually gets engagement on landing pages and social:
Open with the outcome, not the setup. The first 2 seconds decide if someone watches the rest. Show the "after" state — the dashboard with data, the completed design, the result. Setup (login, loading, navigation) earns zero attention.
One feature = one demo. Trying to cram 5 features into 30 seconds makes all of them forgettable. A focused demo of one feature is worth more than a rushed tour.
Show the magic moment. Every product has one interaction where users go "oh wow." Find that moment and build the demo around it — it's why people click "try it."
Add context with text overlays. Social videos autoplay muted. Without text callouts, viewers see UI changing with no idea what's happening or why it matters. Every shot needs a 3-6 word overlay explaining the value.
Pacing: 2-3 seconds per concept. This feels fast, but viewer attention is brutal. If a shot doesn't earn its screen time with new information, cut it.
Step 1: Determine Demo Type
Type
Duration
Resolution
Format
Use Case
Hero demo
15-30s
1280x800
MP4
Landing page above-fold
Feature highlight
5-15s
1280x800
GIF/MP4
Feature section, docs
Full walkthrough
60-180s
1280x800
MP4
YouTube, sales deck
Social clip
5-15s
1080x1080
MP4
Instagram, Twitter/X
Email GIF
3-8s
600x400
GIF
Email campaigns
How-to
30-90s
1280x800
MP4
Help docs, onboarding
Ask the user which type, or infer from context.
Step 2: Plan Shot List
Before recording, plan each shot:
## Shot List1. [Action: Navigate to landing page]
- URL: https://example.com
- Wait: 1s for load
- Highlight: Hero section
2. [Action: Click "Get Started" button]
- Wait: transition animation
- Highlight: Signup form
3. [Action: Fill demo data]
- Type: demo@example.com
- Highlight: Success state
Each shot = one ply screenshot or interaction sequence.
Step 3: Choose Production Mode
Mode A: Quick Demo (ply + ffmpeg)
Fast, rough demos from screenshots stitched into video.
Use <Img> for screenshots, <AbsoluteFill> for layout
useCurrentFrame() + interpolate() for animations
Pull brand colors from brand/creative-kit.md
30fps for smooth playback, 1280x720 or 1920x1080
Add text overlays calling out features with <Sequence>
Intro scene (2-3s): Logo centered, tagline fades in. Brand colors as background gradient. Keep it short — the product is the star.
Demo scene (per shot): Screenshot fills 80% of frame. Text overlay at top or bottom with 1-line feature callout. Use interpolate() for a subtle zoom-in (1.0 → 1.05 over the scene duration) to add life.
Transition between scenes: Fade + slight slide (200ms). Never use fancy wipes — they distract from the product.
Outro scene (3-4s): CTA text ("Try it free at [url]"), logo, and optional social proof line. This is the only slide that sells — keep all other slides focused on showing.
Error Recovery
ply failures (page doesn't load, element not found, timeout): Skip to shot N+1 and document the failure in the shot list. After all shots complete, review skipped shots and retry once. If still failing, use manual screenshots as fallback.
ffmpeg failures (codec not found, format error): Check ffmpeg -codecs for available codecs. If libx264 is missing, try -c:v h264 or install via brew install ffmpeg. For GIF palette issues, simplify the filter chain — drop split/palettegen/paletteuse and use basic -vf "fps=10,scale=640:-1".
Remotion failures (render crashes, composition errors): Check node version (node -v, needs 18+). If npx remotion render fails, try npx remotion render --gl=angle or --gl=swangle for GPU issues. For composition errors, verify all <Img> src paths are correct and images exist.
