How to Generate Walkthrough Videos Using the Remotion Skill: A Complete Guide

The Remotion skill transforms Stitch design projects into polished walkthrough videos by fetching screen assets via the Stitch MCP, composing them in a React-based Remotion project, and rendering the final output via the Remotion CLI.

The Remotion skill in the google-labs-code/stitch-skills repository automates the creation of animated product walkthroughs from existing Stitch designs. This skill bridges the gap between static UI mockups and dynamic video content by leveraging the Remotion video framework. You will learn how to orchestrate the Stitch MCP, build reusable React components, and render professional videos using the exact implementation details found in the source code.

Prerequisites and Architecture Overview

The Remotion skill operates as a five-stage pipeline defined in plugins/stitch-build/skills/remotion/SKILL.md. First, the skill queries the Stitch MCP (stitch:) to list project screens and download screenshot assets. Second, it initializes a lightweight Remotion application using npm create video@latest -- --blank. Third, it constructs composable React components like ScreenSlide and WalkthroughComposition to sequence animations and text overlays. Fourth, it configures video metadata in remotion.config.ts to match Stitch screen dimensions. Finally, it renders the output using the Remotion CLI.

The architecture flows from the Stitch MCP through asset download, into a Remotion project structure, then to preview and render stages.

Fetching Screen Assets from Stitch

Before composition begins, the skill must extract visual assets from your Stitch project. The agent workflow utilizes the Stitch MCP to enumerate screens and retrieve download URLs for screenshots.

Implementing the Asset Download Script

The following Python pseudo-code illustrates the core logic for generating a screen manifest and downloading assets to public/assets/screens/:

# Pseudo-code illustrating the agent workflow (see SKILL.md)

project_id = stitch.list_projects(filter="view=owned")["Calculator App"]["name"]
screens = stitch.list_screens(project_id=project_id.split('/')[-1])

manifest = {"projectName": "Calculator App", "screens": []}
for s in screens:
    data = stitch.get_screen(projectId=project_id, screenId=s["name"].split('/')[-1])
    img_url = data["screenshot"]["downloadUrl"]
    # download via web_fetch or curl

    save_path = f"public/assets/screens/{s['title']}.png"
    web_fetch(url=img_url, dest=save_path)
    manifest["screens"].append({
        "id": s["id"],
        "title": s["title"],
        "description": s.get("description", ""),
        "imagePath": f"assets/screens/{s['title']}.png",
        "width": data["width"],
        "height": data["height"],
        "duration": 4   # default seconds per screen

    })

# write manifest

with open("screens.json", "w") as f:
    json.dump(manifest, f, indent=2)

This manifest (screens.json) drives the video composition by mapping each screen to its duration, dimensions, and local asset path.

Building the Remotion React Project

The Remotion skill generates a standard Remotion project structure within the video/ directory. This project hosts the composition logic and references the downloaded screenshots as static assets.

Project Structure

The generated project follows the standard Remotion layout:

• src/ScreenSlide.tsx — Reusable component for individual screen animations
• src/WalkthroughComposition.tsx — Orchestration component that sequences all slides
• remotion.config.ts — Configuration for frame rate, dimensions, and output settings
• public/assets/screens/ — Directory containing downloaded Stitch screenshots

Configuring Video Metadata

The remotion.config.ts file specifies the frame rate and canvas dimensions. These values typically match the Stitch screen dimensions or a scaled version to maintain aspect ratio. The total duration is dynamically calculated from the screens.json manifest rather than hardcoded.

Defining Composable Video Components

The animation logic resides in two primary React components provided in the skill resources. These components handle zoom transitions, text overlays, and slide sequencing.

Creating the ScreenSlide Component

The ScreenSlide component, based on plugins/stitch-build/skills/remotion/resources/screen-slide-template.tsx, renders a single screenshot with spring-based animations for zoom and fade effects.

import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig, Img} from 'remotion';

export const ScreenSlide = ({imageSrc, title, description, width, height}) => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();

  const zoom = spring({frame, fps, from: 0.95, to: 1, config: {damping: 12, stiffness: 80}});
  const opacity = spring({frame, fps, from: 0, to: 1, config: {damping: 10}});
  const textOpacity = spring({frame: frame - 15, fps, from: 0, to: 1, config: {damping: 10}});

  return (
    <AbsoluteFill style={{justifyContent: 'center', alignItems: 'center', backgroundColor: '#000'}}>
      <div style={{transform: `scale(${zoom})`, opacity, maxWidth: '90%', maxHeight: '80%'}}>
        <Img src={imageSrc} style={{width: '100%', height: 'auto', borderRadius: 8}} />
      </div>
      <div style={{position: 'absolute', bottom: '10%', left: '50%', transform: 'translateX(-50%)',
                  opacity: textOpacity, textAlign: 'center', width: '80%'}}>
        <h1 style={{fontSize: 48, color: '#fff'}}>{title}</h1>
        {description && <p style={{fontSize: 24, color: '#ddd'}}>{description}</p>}
      </div>
    </AbsoluteFill>
  );
};

Sequencing with WalkthroughComposition

The WalkthroughComposition component, demonstrated in plugins/stitch-build/skills/remotion/examples/WalkthroughComposition.tsx, imports the manifest and wraps each screen in a Remotion Sequence to establish timing.

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="WalkthroughComposition" width={1280} height={720} fps={fps} durationInFrames={10000}>
      {screens.screens.map((s, i) => {
        const frames = s.duration * fps;
        const comp = (
          <Sequence from={offset} durationInFrames={frames} key={i}>
            <ScreenSlide
              imageSrc={s.imagePath}
              title={s.title}
              description={s.description}
              width={s.width}
              height={s.height}
            />
          </Sequence>
        );
        offset += frames;
        return comp;
      })}
    </Composition>
  );
};

This composition calculates frame offsets based on the duration specified in screens.json, ensuring each slide displays for the correct interval before transitioning.

Previewing and Rendering the Final Video

The Remotion skill supports an iterative development workflow via the Remotion Studio, followed by command-line rendering for production.

Iterating with Remotion Studio

Run npm run dev from the Remotion project directory to launch the Remotion Studio. This browser-based interface allows real-time adjustment of timing, animation parameters, and text overlays without recompiling the entire video.

Rendering via CLI

Once the composition is finalized, generate the MP4 using the Remotion CLI with specific quality and codec settings:

# From the Remotion project root (e.g., ./video)

npx remotion render WalkthroughComposition output.mp4 \
  --quality 80 --codec h264 --concurrency 4

The --concurrency flag optimizes rendering performance by parallelizing frame processing, while --codec h264 ensures broad compatibility with standard video players.

Key Reference Files in the Repository

All implementation details and templates reside in the plugins/stitch-build/skills/remotion/ directory:

• SKILL.md — Complete workflow specification and required tool definitions
• resources/screen-slide-template.tsx — Boilerplate ScreenSlide component with zoom/fade animations
• resources/composition-checklist.md — Quality assurance checklist for complete walkthrough videos
• examples/WalkthroughComposition.tsx — End-to-end example tying the manifest to the final composition

Summary

• The Remotion skill converts Stitch projects into videos by fetching screenshots via the MCP, then composing them in a React/Remotion framework.
• Asset preparation involves generating a screens.json manifest and downloading images to public/assets/screens/.
• Video composition relies on the ScreenSlide component for individual animations and WalkthroughComposition for sequencing.
• Configuration in remotion.config.ts sets frame rates and dimensions to match source designs.
• Rendering uses npx remotion render with H.264 encoding for final output.

Frequently Asked Questions

What dependencies are required to run the Remotion skill?

You need Node.js installed locally to run npm create video@latest and the Remotion CLI. The skill itself depends on the Stitch MCP being available to fetch project data and screenshots. No additional Python dependencies are required for the Remotion rendering engine, though the asset fetch script may use Python or JavaScript depending on your implementation.

How do I customize the animation timing for individual screens?

Modify the duration property in the screens.json manifest before building the composition. For more granular control, adjust the spring configuration parameters in src/ScreenSlide.tsx—specifically the damping and stiffness values—or change the textOpacity delay by altering the frame - 15 offset.

Can I use the Remotion skill with projects that don't use standard screen sizes?

Yes. The remotion.config.ts file supports dynamic dimensions based on the width and height values stored in screens.json. Ensure the WalkthroughComposition component passes these dimensions to the Composition element, or scale the screenshots uniformly by setting fixed canvas dimensions and adjusting the ScreenSlide flexbox styles to maintain aspect ratio.

Where can I find troubleshooting guidance if the rendering fails?

Consult plugins/stitch-build/skills/remotion/resources/composition-checklist.md for common validation steps. Rendering failures typically stem from missing assets in public/assets/screens/ or malformed JSON in screens.json. Verify that all image paths in the manifest are relative to the public/ directory and that the Remotion CLI is executed from the project root containing remotion.config.ts.

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