# How to Generate Walkthrough Videos Using the Remotion Skill: A Complete Guide > Learn how to generate walkthrough videos with the Remotion skill. This guide explains how Remotion transforms Stitch designs into polished videos. - Repository: [Google Labs Code/stitch-skills](https://github.com/google-labs-code/stitch-skills) - Tags: how-to-guide - Published: 2026-07-12 --- **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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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/`: ```python # 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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/src/ScreenSlide.tsx) — Reusable component for individual screen animations - [`src/WalkthroughComposition.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/src/WalkthroughComposition.tsx) — Orchestration component that sequences all slides - [`remotion.config.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/remotion/resources/screen-slide-template.tsx), renders a single screenshot with spring-based animations for zoom and fade effects. ```tsx 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 (

{title}

{description &&

{description}

}
); }; ``` ### Sequencing with WalkthroughComposition The `WalkthroughComposition` component, demonstrated in [`plugins/stitch-build/skills/remotion/examples/WalkthroughComposition.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/remotion/examples/WalkthroughComposition.tsx), imports the manifest and wraps each screen in a Remotion `Sequence` to establish timing. ```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 ( {screens.screens.map((s, i) => { const frames = s.duration * fps; const comp = ( ); offset += frames; return comp; })} ); }; ``` This composition calculates frame offsets based on the duration specified in [`screens.json`](https://github.com/google-labs-code/stitch-skills/blob/main/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: ```bash # 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`](https://github.com/google-labs-code/stitch-skills/blob/main/SKILL.md)** — Complete workflow specification and required tool definitions - **[`resources/screen-slide-template.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/screen-slide-template.tsx)** — Boilerplate `ScreenSlide` component with zoom/fade animations - **[`resources/composition-checklist.md`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/composition-checklist.md)** — Quality assurance checklist for complete walkthrough videos - **[`examples/WalkthroughComposition.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/screens.json) manifest before building the composition. For more granular control, adjust the `spring` configuration parameters in [`src/ScreenSlide.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/remotion.config.ts) file supports dynamic dimensions based on the `width` and `height` values stored in [`screens.json`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/remotion.config.ts).