remotion_skill

This skill generates Remotion walkthrough videos from Stitch screens, applying smooth transitions, zoom effects, and contextual text overlays for engaging

TypeScript

2k

GitHub Stars

2

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill google-labs-code/stitch-skills --skill remotion

README.md3.4 KB
SKILL.md12.7 KB

Overview

This skill generates professional walkthrough videos from Stitch projects using Remotion. It orchestrates downloaded Stitch screenshots into a Remotion composition with smooth transitions, zoom effects, and contextual text overlays. The output is a configurable, high-quality MP4 or WebM suitable for demos and product tours.

How this skill works

The skill discovers Stitch and Remotion MCP endpoints, lists projects and screens, and downloads full-resolution screenshots into a staging assets folder. It produces a screens manifest and generates modular Remotion components (ScreenSlide, WalkthroughComposition) that sequence screens, apply transitions (fade, slide, zoom), and render text overlays and optional voiceover. Finally, it renders the composition via the Remotion CLI or Remotion MCP.

When to use it

Create product demos or onboarding walkthroughs from existing Stitch designs
Produce marketing videos highlighting app features and user flows
Generate accessible narrated walkthroughs with synced voiceover
Rapidly prototype video presentations for stakeholder reviews
Automate batch rendering of walkthroughs across multiple projects

Best practices

Preserve aspect ratio: match Remotion composition dimensions to Stitch screen sizes or scale proportionally
Use a manifest (screens.json) to control order, durations and metadata for reproducible renders
Start with simple fades and consistent durations, then add spring-based zoom for emphasis
Keep text overlays readable: high contrast, adequate font size, and short descriptions
Preview in Remotion Studio frequently and adjust spring/easing for natural motion
Compress and organize assets in public/assets/screens to optimize build and render times

Example use cases

Turn a Stitch project called “Calculator App” into a 60–90s walkthrough with titles and progress indicator
Highlight a new feature by zooming into a specific UI region and adding animated hotspots
Create a narrated onboarding video by generating a voiceover from screen descriptions and syncing audio to screen timing
Batch-render walkthroughs for a product release by iterating over multiple Stitch projects and exporting MP4s

FAQ

Project ID or project title to list screens, plus access to each screen’s screenshot.downloadUrl and optional htmlCode.downloadUrl for text extraction.

How do I control timing and transitions?

Define per-screen duration in the manifest. Use Remotion spring and @remotion/transitions (fade, slide) and adjust spring config values for damping and stiffness.

Can I add voiceover or captions?

Yes. Import audio into Remotion with the <Audio> component and sync durations. Add captions as timed text overlays for accessibility.