Generate walkthrough videos

The remotion skill turns your Stitch project screens into polished walkthrough videos — complete with cross-fade transitions, spring-animated zoom effects, and text overlays. Useful for demos, stakeholder reviews, or documentation.

Prerequisites

• A Stitch project with at least 2 designed screens
• Node.js and npm installed
• Access to the Stitch MCP server

Retrieve screens

The skill fetches screen metadata via MCP, downloads full-resolution screenshots to assets/screens/, and creates a screens.json manifest with titles, dimensions, and per-screen durations.

Set up and generate

If no Remotion project exists, the skill creates one. Then configure your transitions:

Fade (default)

Smooth cross-fades between screens. Best for calm, professional presentations.

Slide

Directional slides for sequential user flows:

Zoom

Spring-animated zoom effects for emphasizing specific features:

Mix and match — use fades for most screens and a zoom to highlight a key moment.

Add text overlays

Screen titles

Feature callouts

Progress indicator

Render the video

Preview first in the browser-based Remotion Studio:

Then render to file:

Quality options

Flag	Effect
--quality 100	Maximum quality (larger file)
--codec h264	Best compatibility
--codec h265	Better compression, less compatibility
--concurrency 4	Parallel rendering for speed

Adjusting pacing

• Too fast? Increase per-screen duration in screens.json (default is 3–5 seconds)
• Too slow? Reduce duration or add more dynamic transitions
• Uneven? Set longer durations for complex screens, shorter for simple ones

Troubleshooting

Issue	Fix
Blurry screenshots	Append =w{width} to download URLs for full resolution
Choppy animations	Increase frame rate to 60fps
Misaligned text overlays	Match composition dimensions to screen dimensions
Remotion build fails	Check Node version compatibility; run npm install