chainlesschain Remotion Video Skill
Create programmatic videos with React using Remotion.
Usage
/remotion-video create <project-name>
/remotion-video preview [project-path]
/remotion-video render [composition-id] [--output output.mp4]
/remotion-video template <template-name>
Actions
| Action | Description |
|---|---|
create |
Scaffold a new Remotion project |
preview |
Start the Remotion Studio dev server |
render |
Render a composition to MP4 |
template |
Generate a composition from template |
add-scene |
Add a new scene/composition to project |
Animation Best Practices
Interpolation
import { interpolate, useCurrentFrame } from "remotion";
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
Spring Animation
import { spring, useCurrentFrame, useVideoConfig } from "remotion";
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const scale = spring({ frame, fps, config: { damping: 200 } });
Timing & Easing
- Use
interpolate()for linear and eased transitions - Use
spring()for physics-based motion - Use
<Sequence>for sequencing scenes - Use
<Series>for stacking scenes with offsets
Templates
| Template | Description |
|---|---|
intro |
Animated title intro with logo |
explainer |
Multi-scene explanation video |
slideshow |
Image/text slideshow with transitions |
social |
Short social media clip (16:9 or 9:16) |
caption |
Video with animated captions/subtitles |
chart |
Animated data visualization |
Rendering
/remotion-video render MyComp --output video.mp4
Options: --codec h264, --quality 80, --fps 30, --width 1920, --height 1080