# How to Generate Remotion Walkthrough Videos from Stitch Projects: A Complete Workflow

> Learn the Stitch + Remotion workflow to transform Stitch design screens into engaging video walkthroughs. Master asset retrieval, project setup, and animation composition.

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

---

**The Stitch + Remotion workflow converts Stitch design screens into polished video walkthroughs by retrieving screen assets via MCP tools, setting up a Remotion TypeScript project, and composing animated sequences with transitions.**

The `google-labs-code/stitch-skills` repository provides a structured automation pipeline for transforming static Stitch designs into dynamic, programmatic video content. By leveraging Model Context Protocol (MCP) servers to bridge Stitch's design exports with Remotion's React-based rendering engine, you can generate professional walkthrough videos that showcase every screen in your application with smooth animations and text overlays.

## Discover MCP Servers

Begin by locating the available MCP tools using the `list_tools` command. Identify the specific prefixes for the Stitch and Remotion servers—typically `stitch:` and `remotion:`—which expose the necessary functions for asset extraction and video rendering according to the definitions 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).

## Retrieve Screen Assets

Extracting your design assets from Stitch requires three sequential API calls to map your project structure and download the visual elements.

### List Projects and Screens

First, enumerate your available projects using `[stitch_prefix]:list_projects`. Once you identify the target project, call `[stitch_prefix]:list_screens` to retrieve a catalog of all screens within that project, including their unique identifiers and metadata.

### Download Screen Data

For each screen, invoke `[stitch_prefix]:get_screen` to obtain the **screenshot URL**, optional HTML content, and precise **dimensions** (width and height). Download these screenshot files into a local `assets/screens/` directory using standard HTTP requests or a `curl` Bash script to ensure offline availability during rendering.

## Set Up a Remotion Project

With your assets stored locally, initialize the video generation environment.

### Initialize or Reuse Existing Project

Check for an existing Remotion configuration by locating [`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) in your working directory. If these files exist, reuse the current project structure. Otherwise, scaffold a new TypeScript project by running:

```bash
npm create video@latest -- --blank

```

Select the TypeScript template when prompted, then navigate into the project directory.

### Install Transition Dependencies

Enhance your compositions with professional animations by installing the transition helpers:

```bash
npm install @remotion/transitions @remotion/animated-emoji

```

### Create the Screen Manifest

Generate a [`screens.json`](https://github.com/google-labs-code/stitch-skills/blob/main/screens.json) file in your project root that catalogs each screen's properties. This manifest maps the downloaded assets to Remotion components and specifies timing metadata:

```json
{
  "screens": [
    {
      "id": "screen-1",
      "title": "Dashboard Overview",
      "description": "Main analytics view",
      "imagePath": "assets/screens/dashboard.png",
      "width": 1200,
      "height": 800,
      "duration": 150
    }
  ]
}

```

## Build the Video Composition

Construct the React components that define your video's visual structure and animation behavior.

### Create 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 zoom and fade effects. This component uses `useCurrentFrame` from Remotion and transition utilities from `@remotion/transitions`:

```tsx
import {spring, useCurrentFrame, AbsoluteFill, Img, Text} from 'remotion';
import {fade} from '@remotion/transitions/fade';

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>
  );
};

```

Reference the starter template in [`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) for additional configuration options.

### Create the WalkthroughComposition Component

Create [`src/WalkthroughComposition.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/src/WalkthroughComposition.tsx) to sequence multiple screens using Remotion's `<Sequence>` element. This component imports your [`screens.json`](https://github.com/google-labs-code/stitch-skills/blob/main/screens.json) manifest and calculates frame offsets for each slide:

```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>
  );
};

```

**Advanced options** include adding interactive hotspots using animated pointers, extracting text content from screen HTML for automatic narration, and inserting progress indicators between sequences.

### Configure Remotion Settings

Update [`remotion.config.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/remotion.config.ts) to match your Stitch project's dimensions, ensuring the video resolution aligns with your screen assets. Configure the frame rate (typically 30fps) and total duration based on the sum of your sequence lengths.

## Preview and Render

Validate your composition before final export.

**Preview in Remotion Studio:**
Launch the development server to tweak timing and transitions interactively:

```bash
npm run dev

```

**Render the Final Video:**
Generate the MP4 file using the CLI command or the Remotion MCP tool:

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

```

Alternatively, invoke `[remotion_prefix]:render` via MCP for automated pipeline integration.

## Summary

- **Discover MCP servers** using `list_tools` to locate `stitch:` and `remotion:` tool prefixes.
- **Retrieve assets** by calling `list_projects`, `list_screens`, and `get_screen` to download screenshots and metadata into `assets/screens/`.
- **Initialize Remotion** with `npm create video@latest` and install `@remotion/transitions` for professional animations.
- **Build components** using [`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) to sequence them.
- **Render output** via `npx remotion render` or the Remotion MCP tool after previewing in Remotion Studio.

## Frequently Asked Questions

### What file format does the screen manifest use?

The workflow uses a JSON file named [`screens.json`](https://github.com/google-labs-code/stitch-skills/blob/main/screens.json) that contains an array of screen objects with properties including `id`, `title`, `description`, `imagePath`, `width`, `height`, and `duration`. This manifest bridges the Stitch asset extraction phase with the Remotion composition phase.

### How do I handle different screen sizes in the video?

Store the original **width** and **height** values returned by `[stitch_prefix]:get_screen` in your [`screens.json`](https://github.com/google-labs-code/stitch-skills/blob/main/screens.json) manifest. Pass these dimensions as props to the `ScreenSlide` component, and configure your `Composition` in [`WalkthroughComposition.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/WalkthroughComposition.tsx) to use consistent dimensions that match your primary design resolution, or scale assets using CSS transforms within the component.

### Can I add voiceover tracks to the walkthrough?

Yes. The workflow supports **voice-over tracks** as an advanced option. You can extract text content from the HTML fields returned by the Stitch MCP tools to generate narration scripts, then import audio files into your Remotion composition using the `<Audio>` component from the Remotion library, synchronizing them with your sequence timings.

### Where can I find the starter templates for the components?

The repository provides reference implementations in `plugins/stitch-build/skills/remotion/resources/`, including [`screen-slide-template.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/screen-slide-template.tsx) for the individual screen component and [`composition-checklist.md`](https://github.com/google-labs-code/stitch-skills/blob/main/composition-checklist.md) for validation. Complete working examples are available in the `plugins/stitch-build/skills/remotion/examples/` directory, demonstrating various walkthrough configurations and transition styles.