# How to Generate Walkthrough Videos from Stitch Projects Using Remotion
> Effortlessly generate walkthrough videos from Stitch projects with Remotion. Extract screen assets, add animations, and create polished video guides. Learn how today.
- Repository: [Google Labs Code/stitch-skills](https://github.com/google-labs-code/stitch-skills)
- Tags: how-to-guide
- Published: 2026-07-18
---
**Stitch + Remotion enables you to convert Stitch design screens into polished video walkthroughs by extracting screen assets and orchestrating them through Remotion compositions with transitions and animations.**
The `google-labs-code/stitch-skills` repository provides a comprehensive workflow for transforming static Stitch design screens into dynamic video content. By combining the Stitch MCP server with Remotion's programmable video capabilities, you can automate the creation of professional walkthrough videos complete with animations, text overlays, and smooth transitions. This integration allows you to generate `output.mp4` files directly from your design prototypes without manual screen recording.
## Discovering MCP Servers and Tool Prefixes
Before extracting assets, you must locate the available MCP servers and their prefixes. Use the `list_tools` command to identify the **Stitch MCP prefix** (typically `stitch:`) and the **Remotion MCP prefix** (typically `remotion:`) within your environment.
These prefixes determine how you invoke specific tools throughout the workflow. For example, you will call `[stitch_prefix]:list_projects` to enumerate available designs and `[remotion_prefix]:render` to generate the final video file.
## Retrieving Screen Assets from Stitch
The asset extraction phase involves three sequential MCP calls to gather all necessary visual data from your Stitch project.
First, invoke `[stitch_prefix]:list_projects` to enumerate available designs, then filter to your target project. Next, call `[stitch_prefix]:list_screens` to retrieve all screen identifiers within that project. Finally, iterate through each screen ID and execute `[stitch_prefix]:get_screen` to obtain the screenshot URL, optional HTML source code, and precise dimensions (width and height) for each frame.
Store these assets locally by downloading screenshots into an `assets/screens/` directory using `web_fetch` or a `curl` Bash script. Maintain a metadata mapping that associates each downloaded image with its corresponding title, description, and dimensions for later reference in the Remotion composition.
## Configuring the Remotion Project Environment
Setting up the video project requires detecting existing Remotion installations or initializing a new TypeScript project.
If your workspace already contains a [`remotion.config.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/remotion.config.ts) file or a [`package.json`](https://github.com/google-labs-code/stitch-skills/blob/main/package.json) with Remotion dependencies, reuse that project structure. Otherwise, create a fresh project by running:
```bash
npm create video@latest -- --blank
```
Select the TypeScript template when prompted, then navigate into the project directory.
Install the required animation libraries to enable transitions between screens:
```bash
npm install @remotion/transitions @remotion/animated-emoji
```
Create a [`screens.json`](https://github.com/google-labs-code/stitch-skills/blob/main/screens.json) manifest file in your project root that lists each screen's metadata, including the local image path, title, description, display duration in seconds, and original dimensions. This manifest serves as the data source for your Remotion composition.
## Building the Video Composition
The video construction process involves creating two primary React components: an individual slide renderer and a sequencing wrapper that orchestrates the full walkthrough.
### Creating the ScreenSlide Component
The [`ScreenSlide.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/ScreenSlide.tsx) component handles the animation and rendering of individual screens. Located typically in [`src/ScreenSlide.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/src/ScreenSlide.tsx), this component accepts `imageSrc`, `title`, `description`, `width`, `height`, and optional `duration` props.
Import `useCurrentFrame` from `remotion` to track animation progress, and `spring`, `fade`, and `slide` from `@remotion/transitions` to create smooth visual effects:
```tsx
// src/ScreenSlide.tsx
import {spring, useCurrentFrame} from 'remotion';
import {fade, slide} from '@remotion/transitions/fade';
import {Img, Text, AbsoluteFill} from 'remotion';
export const ScreenSlide = ({
imageSrc,
title,
description,
width,
height,
duration = 150,
}) => {
const frame = useCurrentFrame();
const zoom = spring({frame, fps: 30, config: {damping: 12, stiffness: 120}});
const opacity = fade({frame, fps: 30, start: 0, end: duration});
return (
{title}
{description}
);
};
```
### Orchestrating the WalkthroughComposition
The [`WalkthroughComposition.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/WalkthroughComposition.tsx) file imports your [`screens.json`](https://github.com/google-labs-code/stitch-skills/blob/main/screens.json) manifest and sequences multiple `ScreenSlide` components using Remotion's `` elements. This component calculates frame offsets to ensure each screen appears sequentially without overlap:
```tsx
// src/WalkthroughComposition.tsx
import {Composition, Sequence} from 'remotion';
import {ScreenSlide} from './ScreenSlide';
import screens from '../../screens.json';
export const WalkthroughComposition = () => {
const fps = 30;
let offset = 0;
return (
{screens.screens.map((s) => (
))}
);
};
```
### Configuring remotion.config.ts
Update [`remotion.config.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/remotion.config.ts) to register your composition with the correct video dimensions matching your Stitch screen sizes, typically 1200x800 pixels, a frame rate of 30 fps, and the total calculated duration. Define the composition ID as `"Walkthrough"` to match the ID used in your React component.
## Rendering and Exporting the Final Video
Preview your walkthrough locally using Remotion Studio to verify timing and transitions:
```bash
npm run dev
```
Once satisfied with the preview, render the production MP4 file using the Remotion CLI:
```bash
npx remotion render WalkthroughComposition output.mp4 --quality 80 --codec h264
```
Alternatively, invoke the rendering process through the Remotion MCP server using `[remotion_prefix]:render` with the composition ID and output path parameters.
## Advanced Customization Options
Beyond basic screen sequencing, the workflow supports enhanced production features. Add **interactive hotspots** using animated pointer components from `@remotion/animated-emoji` to highlight specific UI elements during the walkthrough. Incorporate **voice-over tracks** by importing audio files and synchronizing them with screen transitions using Remotion's audio sequencing capabilities. Extract automatic text annotations by parsing the optional HTML returned from `[stitch_prefix]:get_screen` to dynamically generate captions or descriptions based on the actual content of each design screen.
## Summary
- **MCP Discovery**: Use `list_tools` to identify `stitch:` and `remotion:` prefixes before starting the workflow.
- **Asset Extraction**: Retrieve screens via `[stitch_prefix]:list_screens` and `[stitch_prefix]:get_screen`, then download images to `assets/screens/`.
- **Project Setup**: Initialize with `npm create video@latest` or reuse existing [`remotion.config.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/remotion.config.ts), then install `@remotion/transitions` and `@remotion/animated-emoji`.
- **Component Architecture**: Build [`ScreenSlide.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/ScreenSlide.tsx) for individual screen animations and [`WalkthroughComposition.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/WalkthroughComposition.tsx) for sequencing using the [`screens.json`](https://github.com/google-labs-code/stitch-skills/blob/main/screens.json) manifest.
- **Rendering**: Preview with `npm run dev` and export final videos via `npx remotion render` or the Remotion MCP render command.
## Frequently Asked Questions
### What video format and quality settings does the Remotion integration support?
The workflow renders standard MP4 files using H264 encoding. You can specify quality settings via CLI flags such as `--quality 80` and `--codec h264` when running `npx remotion render`, or adjust these parameters in the [`remotion.config.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/remotion.config.ts) file according to your distribution requirements.
### How do I modify the display duration for individual screens in the walkthrough?
Adjust the `duration` property (measured in seconds) for each entry in your [`screens.json`](https://github.com/google-labs-code/stitch-skills/blob/main/screens.json) manifest file. The [`WalkthroughComposition.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/WalkthroughComposition.tsx) component multiplies this value by the frames-per-second rate (default 30) to calculate the exact frame count for each `` element.
### Can I add background music or narration to the generated walkthrough videos?
Yes, Remotion supports audio sequencing through standard React audio elements or dedicated Remotion audio components. Add audio tracks to your project assets and include them in your composition alongside the screen sequences, synchronizing start times with your screen transitions for professional voice-overs or background music.
### Where can I find starter templates for the ScreenSlide component?
The `google-labs-code/stitch-skills` repository includes starter templates at [`plugins/stitch-build/skills/remotion/resources/screen-slide-template.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/remotion/resources/screen-slide-template.tsx). Additional examples demonstrating complete walkthrough workflows are available in the `plugins/stitch-build/skills/remotion/examples/` directory, providing reference implementations for common animation patterns and transition effects.