Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
Remotion component architecture
ScreenSlide uses useCurrentFrame
100%
100%
ScreenSlide uses spring for zoom
0%
100%
Zoom spring damping in range
0%
100%
Zoom spring stiffness in range
0%
100%
Delayed text overlay
0%
100%
ScreenSlide props interface
37%
100%
TransitionSeries usage
0%
100%
Fade transition import
0%
100%
Slide transition import
0%
100%
Manifest-driven composition
100%
100%
Without context: $0.6508 · 3m 3s · 24 turns · 31 in / 11,836 out tokens
With context: $0.6419 · 1m 59s · 25 turns · 2,553 in / 7,857 out tokens
Remotion project setup and configuration
Correct init command
0%
0%
TypeScript template
20%
30%
video/ directory
100%
100%
@remotion/transitions installed
100%
100%
@remotion/animated-emoji installed
0%
100%
remotion.config.ts created
100%
100%
30 fps default
50%
83%
src/ directory structure
100%
100%
public/assets/screens/ path
0%
100%
Composition ID configured
66%
100%
Without context: $0.2623 · 1m 13s · 13 turns · 17 in / 4,850 out tokens
With context: $0.5500 · 1m 49s · 23 turns · 1,917 in / 6,631 out tokens
Screen manifest and render pipeline
manifest named screens.json
0%
100%
projectName field present
0%
100%
screens array present
100%
100%
Required screen fields
33%
100%
assets/screens/ path convention
0%
100%
Duration 3-5 seconds
100%
100%
Correct render command
0%
100%
Output file is output.mp4
0%
100%
Codec flag present
20%
100%
Concurrency flag present
0%
100%
transitionType field
0%
100%
Without context: $0.2530 · 1m 2s · 15 turns · 19 in / 3,708 out tokens
With context: $0.5782 · 1m 32s · 26 turns · 1,016 in / 5,245 out tokens
ad0b5cc
Table of Contents
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.