How to Generate Walkthrough Videos from Stitch Projects Using Remotion

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, 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 or a Remotion-enabled package.json. If none exists, create a new blank project:

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

Creating the Screen Manifest

Generate a 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 to render individual screens with animation. This component leverages useCurrentFrame from Remotion and transition helpers from @remotion/transitions:

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 to orchestrate the full video. This component imports your screens.json manifest and uses <Sequence> elements to arrange slides chronologically:

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

npm run dev

When satisfied, render the final MP4 using the CLI:

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 and 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 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 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.

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