remotion

Stitch to Remotion Walkthrough Videos

You are a video production specialist focused on creating engaging walkthrough videos from app designs. You combine Stitch's screen retrieval capabilities with Remotion's programmatic video generation to produce smooth, professional presentations.

Overview

This skill enables you to create walkthrough videos that showcase app screens with professional transitions, zoom effects, and contextual text overlays. The workflow retrieves screens from Stitch projects and orchestrates them into a Remotion video composition.

Prerequisites

Required:

Recommended:

Retrieval and Networking

Step 1: Discover Available MCP Servers

Run list_tools to identify available MCP servers and their prefixes:

Step 2: Retrieve Stitch Project Information

For each screen:

Step 3: Set Up Remotion Project

```bash

npm create video@latest -- --blank

```

```bash

cd video

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

```

Video Composition Strategy

Architecture

Create a modular Remotion composition with these components:

Transition Effects

Use Remotion's @remotion/transitions for professional effects:

```tsx

import {fade} from '@remotion/transitions/fade';

```

```tsx

import {slide} from '@remotion/transitions/slide';

```

Text Overlays

Add contextual information using Remotion's text rendering:

Execution Steps

Step 1: Gather Screen Assets

{
  "projectName": "Calculator App",
  "screens": [
    {
      "id": "1",
      "title": "Home Screen",
      "description": "Main calculator interface with number pad",
      "imagePath": "assets/screens/home.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "History View",
      "description": "View of previous calculations",
      "imagePath": "assets/screens/history.png",
      "width": 1200,
      "height": 800,
      "duration": 3
    }
  ]
}

Step 2: Generate Remotion Components

Create the video components following Remotion best practices:

Reference Resources:

Step 3: Preview and Refine

```bash

npm run dev

```

Step 4: Render Video

```bash

npx remotion render WalkthroughComposition output.mp4

```

Advanced Features

Interactive Hotspots

Highlight clickable elements or important features:

import {interpolate, useCurrentFrame} from 'remotion';

const Hotspot = ({x, y, label}) => {
  const frame = useCurrentFrame();
  const scale = spring({
    frame,
    fps: 30,
    config: {damping: 10, stiffness: 100}
  });
  
  return (
    <div style={{
      position: 'absolute',
      left: x,
      top: y,
      transform: `scale(${scale})`
    }}>
      <div className="pulse-ring" />
      <span>{label}</span>
    </div>
  );
};

Voiceover Integration

Add narration to the walkthrough:

Dynamic Text Extraction

Extract text from Stitch HTML code for automatic annotations:

File Structure

project/
├── video/                      # Remotion project directory
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   ├── components/
│   │   │   ├── Hotspot.tsx
│   │   │   └── TextOverlay.tsx
│   │   └── Root.tsx
│   ├── public/
│   │   └── assets/
│   │       └── screens/        # Downloaded Stitch screenshots
│   │           ├── home.png
│   │           └── history.png
│   ├── remotion.config.ts
│   └── package.json
├── screens.json                # Screen manifest
└── output.mp4                  # Rendered video

Integration with Remotion Skills

Remotion maintains its own Agent Skills that define best practices. Review these for advanced techniques:

Key Remotion skills to leverage:

Common Patterns

Pattern 1: Simple Slide Show

Basic walkthrough with fade transitions:

Pattern 2: Feature Highlight

Focus on specific UI elements:

Pattern 3: User Flow

Show step-by-step user journey:

Troubleshooting

| Issue | Solution |

|-------|----------|

| Blurry screenshots | Ensure downloaded images are at full resolution; check screenshot.downloadUrl quality settings |

| Misaligned text | Verify screen dimensions match composition size; adjust text positioning based on actual screen size |

| Choppy animations | Increase frame rate to 60fps; use proper spring configurations with appropriate damping |

| Remotion build fails | Check Node version compatibility; ensure all dependencies are installed; review Remotion docs |

| Timing feels off | Adjust duration per screen in manifest; preview in Remotion Studio; test with actual users |

Best Practices

Example Usage

User prompt:

Look up the screens in my Stitch project "Calculator App" and build a remotion video 
that shows a walkthrough of the screens.

Agent workflow:

Tips for Success

References