# How to Generate Walkthrough Videos from Stitch Projects Using Remotion

> Learn to generate walkthrough videos from Stitch projects using Remotion. Extract screen assets, compose sequences, and add animated transitions for professional demos.

- Repository: [Google Labs Code/stitch-skills](https://github.com/google-labs-code/stitch-skills)
- Tags: how-to-guide
- Published: 2026-07-12

---

**You can generate walkthrough videos from Stitch projects by extracting screen assets via MCP servers and composing them into Remotion sequences with animated transitions.**

The `google-labs-code/stitch-skills` repository provides a complete integration workflow that bridges **Stitch** design screens and **Remotion** video compositions. This guide walks through the exact implementation found in [`plugins/stitch-build/skills/remotion/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/remotion/SKILL.md), covering MCP server discovery, asset extraction, and React-based video generation.

## Prerequisites and MCP Server Discovery

Before generating videos, you must locate the correct MCP server prefixes. Use the `list_tools` command to identify the **Stitch** and **Remotion** MCP prefixes, typically `stitch:` and `remotion:` respectively.

Once identified, these prefixes allow you to invoke specific tools for each platform. The Stitch MCP handles project and screen data retrieval, while the Remotion MCP manages video rendering operations.

## Extracting Screen Assets from Stitch

Retrieve your design assets by querying the Stitch project structure. First, call `[stitch_prefix]:list_projects` to locate your target project, then use `[stitch_prefix]:list_screens` to enumerate all available screens.

For each screen, invoke `[stitch_prefix]:get_screen` to obtain:
- Screenshot URL
- Optional HTML source code
- Dimensions (width and height)

Download these screenshots into an `assets/screens/` directory using standard HTTP requests or a Bash script with `curl`. This local asset collection serves as the image source for your Remotion composition.

## Setting Up Your Remotion Project

### Project Initialization and Dependencies

Check for an existing Remotion project by looking for [`remotion.config.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/remotion.config.ts) or a Remotion-enabled [`package.json`](https://github.com/google-labs-code/stitch-skills/blob/main/package.json). If none exists, create a new blank project:

```bash
npm create video@latest -- --blank
cd video
npm install @remotion/transitions @remotion/animated-emoji

```

### Creating the Screen Manifest

Generate a [`screens.json`](https://github.com/google-labs-code/stitch-skills/blob/main/screens.json) manifest file that maps each screen to its metadata. This JSON file should include:

- **title**: Display name for the screen
- **description**: Contextual information or narration text
- **imagePath**: Relative path to the downloaded screenshot (e.g., `assets/screens/home.png`)
- **width** and **height**: Original dimensions from Stitch
- **duration**: Time in seconds to display this screen

This manifest decouples your data from your React components, making it easier to update content without touching code.

## Building the Video Composition

### Creating the ScreenSlide Component

Create [`src/ScreenSlide.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/src/ScreenSlide.tsx) to render individual screens with animation. This component leverages `useCurrentFrame` from Remotion and transition helpers from `@remotion/transitions`:

```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 (
    <AbsoluteFill style={{backgroundColor: '#fff'}}>
      <Img
        src={imageSrc}
        width={width}
        height={height}
        style={{
          transform: `scale(${zoom})`,
          opacity,
        }}
      />
      <Text style={{position: 'absolute', bottom: 30, left: 20, fontSize: 36}}>
        {title}
      </Text>
      <Text style={{position: 'absolute', bottom: 10, left: 20, fontSize: 24}}>
        {description}
      </Text>
    </AbsoluteFill>
  );
};

```

### Sequencing Screens in WalkthroughComposition

Create [`src/WalkthroughComposition.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/src/WalkthroughComposition.tsx) to orchestrate the full video. This component imports your [`screens.json`](https://github.com/google-labs-code/stitch-skills/blob/main/screens.json) manifest and uses `<Sequence>` elements to arrange slides chronologically:

```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 (
    <Composition id="Walkthrough" width={1200} height={800} fps={fps} durationInFrames={2000}>
      {screens.screens.map((s) => (
        <Sequence
          from={offset}
          durationInFrames={s.duration * fps}
          key={s.id}
        >
          <ScreenSlide
            imageSrc={s.imagePath}
            title={s.title}
            description={s.description}
            width={s.width}
            height={s.height}
          />
        </Sequence>
      ))}
    </Composition>
  );
};

```

### Configuring remotion.config.ts

Update [`remotion.config.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/remotion.config.ts) to match your Stitch screen dimensions. Set the `width` and `height` to match your captured screenshots, configure the `fps` (typically 30), and ensure the `durationInFrames` accommodates the total sequence length calculated from your manifest durations.

## Rendering and Previewing Your Video

Preview your composition in Remotion Studio to fine-tune timing and transitions:

```bash
npm run dev

```

When satisfied, render the final MP4 using the CLI:

```bash
npx remotion render WalkthroughComposition output.mp4 --quality 80 --codec h264

```

Alternatively, invoke the Remotion MCP server directly using `[remotion_prefix]:render` to automate rendering within your MCP workflow.

## Advanced Customization Options

Beyond basic screen capture, the Stitch-Remotion integration supports several enhancements:

- **Interactive Hotspots**: Add animated pointers or highlights using `@remotion/animated-emoji` to simulate user clicks
- **Voice-over Tracks**: Synchronize audio narration with specific screen sequences
- **Text Extraction**: Parse the optional HTML returned by `[stitch_prefix]:get_screen` to automatically generate descriptions or labels

These features are documented in the [`screen-slide-template.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/screen-slide-template.tsx) and [`composition-checklist.md`](https://github.com/google-labs-code/stitch-skills/blob/main/composition-checklist.md) resources within the `plugins/stitch-build/skills/remotion/` directory.

## Summary

- **Discover MCP servers** using `list_tools` to locate `stitch:` and `remotion:` prefixes before beginning data extraction.
- **Retrieve assets** by calling `list_projects`, `list_screens`, and `get_screen`, then download images to `assets/screens/`.
- **Initialize Remotion** with `npm create video@latest` and install `@remotion/transitions` for smooth animations.
- **Build compositions** using `ScreenSlide` components for individual screens and `WalkthroughComposition` to sequence them with `<Sequence>` elements.
- **Render output** via CLI (`npx remotion render`) or the Remotion MCP server for automated pipeline integration.

## Frequently Asked Questions

### How do I handle different screen sizes between Stitch and Remotion?

Match the **width** and **height** parameters in your [`remotion.config.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/remotion.config.ts) to the dimensions returned by `[stitch_prefix]:get_screen`. The `ScreenSlide` component accepts these as props and passes them to the `Img` component, ensuring the video resolution matches your original Stitch assets exactly.

### Can I automate the entire video generation process without manual CLI steps?

Yes. Once you have built your React components, use the `[remotion_prefix]:render` MCP tool instead of the CLI command. This allows you to trigger video generation programmatically from your Stitch workflow, returning the MP4 path directly through the MCP server interface.

### What is the purpose of the screens.json manifest?

The [`screens.json`](https://github.com/google-labs-code/stitch-skills/blob/main/screens.json) file acts as a configuration layer between your Stitch data and Remotion code. It stores metadata like titles, descriptions, and durations separately from your React components, enabling non-developers to update video content or reorder screens by editing a single JSON file rather than TypeScript code.

### How do I add transitions between screens?

Import transition functions from `@remotion/transitions` (such as `fade` and `slide`) and apply them within your `ScreenSlide` component using `useCurrentFrame`. Calculate frame-based opacity and transform values to create smooth fade-ins or sliding effects between consecutive screens in your `WalkthroughComposition`.