Remotion by @stitch

Remotion by @stitch · Skillet

Check for existing Remotion project:
- Look for remotion.config.ts or package.json with Remotion dependencies
- If exists, use the existing project structure
Create new Remotion project (if needed):
```
npm create video@latest -- --blank
```
- Choose TypeScript template
- Set up in a dedicated video/ directory

Install dependencies:

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

Fade: Smooth cross-fade between screens

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

Slide: Directional slide transitions

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

Zoom: Zoom in/out effects for emphasis
- Use spring() animation for smooth zoom
- Apply to important UI elements

{
  "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
    }
  ]
}

Start Remotion Studio:
```
npm run dev
```
- Opens browser-based preview
- Allows real-time editing and refinement
Adjust timing:
- Ensure each screen has appropriate display duration
- Verify transitions are smooth
- Check text overlay timing
Fine-tune animations:
- Adjust spring configurations for zoom effects
- Modify easing functions for transitions
- Ensure text is readable at all times

Render using Remotion CLI:

npx remotion render WalkthroughComposition output.mp4

Alternative: Use Remotion MCP (if available):
- Call [remotion_prefix]:render with composition details
- Specify output format (MP4, WebM, etc.)
Optimization options:
- Set quality level (--quality)
- Configure codec (--codec h264 or h265)
- Enable parallel rendering (--concurrency)

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>
  );
};

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

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

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

Remotion

Stitch to Remotion Walkthrough Videos

Overview

Prerequisites

Retrieval and Networking

Step 1: Discover Available MCP Servers

Step 2: Retrieve Stitch Project Information

Step 3: Set Up Remotion Project

Video Composition Strategy

Architecture

Transition Effects

Text Overlays

Execution Steps

Step 1: Gather Screen Assets

Step 2: Generate Remotion Components

Step 3: Preview and Refine

Step 4: Render Video

Advanced Features

Interactive Hotspots

Voiceover Integration

Dynamic Text Extraction

File Structure

Integration with Remotion Skills

Common Patterns

Pattern 1: Simple Slide Show

Pattern 2: Feature Highlight

Pattern 3: User Flow

Troubleshooting

Best Practices

Example Usage

Tips for Success

References