remotion

Generate walkthrough videos from Stitch project screens using Remotion compositions.

1|Updated Jun 27, 2026
One-click install
npx skills add https://github.com/tranhoainam298/qr-parking-booking-system --skill remotion-tranhoainam298
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion
Source: https://github.com/tranhoainam298/qr-parking-booking-system/tree/main/.claude/plugins/stitch-build/skills/remotion
Command: npx skills add https://github.com/tranhoainam298/qr-parking-booking-system --skill remotion-tranhoainam298

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @remotion/transitions, @remotion/animated-emoji, and includes scripts (resource) and references (resource) components.

What problem does it solve? Turning static app design screens into polished walkthrough videos normally requires manual video editing, animation work, and asset wrangling. This Skill automates the pipeline from Stitch screen retrieval to a rendered MP4 with transitions and text overlays. ## Core Features & Use Cases - Automated screen retrieval: Lists Stitch projects and screens via the Stitch MCP server, downloads screenshots, and builds a screens.json manifest. - Programmatic video composition: Generates Remotion React components (ScreenSlide, WalkthroughComposition) with fade, slide, and zoom transitions plus timed text overlays. - Preview and render workflow: Supports Remotion Studio preview for refinement and CLI or MCP-based rendering to MP4. - Use Case: Ask the agent to look up the screens in your Stitch project "Calculator App" and produce a walkthrough video; it downloads the screenshots, builds the composition, and renders the final video. ## Quick Start Ask the agent to look up the screens in your Stitch project and build a Remotion walkthrough video of them.

Frequently Asked Questions about remotion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a walkthrough video from Stitch designs?▼

Provide the Stitch project name and ask for a Remotion walkthrough video. The agent lists the project screens, downloads each screenshot, builds a screens.json manifest, generates Remotion components, and renders the final MP4.

How do I add transitions between screens in Remotion?▼

Use the @remotion/transitions package with TransitionSeries, applying fade, slide, or zoom presentations between Sequence components. Each transition typically spans about 20 frames for smooth results.

What do I need to run Remotion video generation?▼

You need Node.js, a Remotion project (created with npm create video), and access to the Stitch MCP server for screen retrieval. Rendering works through the Remotion CLI or a Remotion MCP server.

Why are my Remotion video screenshots blurry?▼

Blurry screenshots usually mean the downloaded images are not at full resolution. Verify the screenshot downloadUrl quality from Stitch and confirm the composition dimensions match the actual screen dimensions.

Can I add text overlays and voiceover to a Remotion walkthrough?▼

Yes. Text overlays are added with timed spring animations in the ScreenSlide component, and narration can be synced using Remotion's Audio component with a generated or recorded voiceover track.