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

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.

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 or a Remotion-enabled package.json in your working directory. If these files exist, reuse the current project structure. Otherwise, scaffold a new TypeScript project by running:

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:

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

Create the Screen Manifest

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

{
  "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 to render individual screens with zoom and fade effects. This component uses useCurrentFrame from Remotion and transition utilities from @remotion/transitions:

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 for additional configuration options.

Create the WalkthroughComposition Component

Create src/WalkthroughComposition.tsx to sequence multiple screens using Remotion's <Sequence> element. This component imports your screens.json manifest and calculates frame offsets for each slide:

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

npm run dev

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

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 for individual screen animations and 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 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 manifest. Pass these dimensions as props to the ScreenSlide component, and configure your Composition in 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 for the individual screen component and 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.

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