How to Generate Walkthrough Videos from Stitch Projects Using Remotion

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 file or a package.json with Remotion dependencies, reuse that project structure. Otherwise, create a fresh project by running:

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:

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

Create a 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 component handles the animation and rendering of individual screens. Located typically in 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:

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

Orchestrating the WalkthroughComposition

The WalkthroughComposition.tsx file imports your screens.json manifest and sequences multiple ScreenSlide components using Remotion's <Sequence> elements. This component calculates frame offsets to ensure each screen appears sequentially without overlap:

// 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 (
    <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 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:

npm run dev

Once satisfied with the preview, render the production MP4 file using the Remotion CLI:

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, then install @remotion/transitions and @remotion/animated-emoji.
• Component Architecture: Build ScreenSlide.tsx for individual screen animations and WalkthroughComposition.tsx for sequencing using the 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 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 manifest file. The WalkthroughComposition.tsx component multiplies this value by the frames-per-second rate (default 30) to calculate the exact frame count for each <Sequence> 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. 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}