Remotion Best Practices
Best practices and domain knowledge for building videos programmatically with Remotion...
Install
npx skills add guanyang/open-agent-hub --skill remotion-best-practices -g -a claude-code -y- Repository
- guanyang/open-agent-hub985
- Category
- Writing
- Updated
- 5d ago
- License
- MIT
- Context cost
- Mediumabout 2,902 tokens
- Runs scripts
- No, instructions only
What it does
Best practices and domain knowledge for building videos programmatically with Remotion (videos in React/TypeScript, rendered to MP4). Use whenever writing or editing Remotion code, scaffolding a video project, animating with interpolate/spring over useCurrentFrame(), sequencing scenes and transitions, captions/subtitles, audio, GIFs/Lottie/3D, charts, visual effects, dynamic duration via calculateMetadata, or rendering. Consult before reaching for a Remotion API, since its components and props evolve (e.g. @remotion/media).
When to use
Use this skill whenever you are dealing with Remotion code to obtain the domain-specific knowledge.
New project setup
When in an empty folder or workspace with no existing Remotion project, scaffold one using:
npx create-video@latest --yes --blank --no-tailwind my-video
Replace my-video with a suitable project name.
Designing a video
Before designing visual scenes, layouts, promos, motion graphics, or text-heavy videos, load rules/video-layout.md for video-first layout and text sizing guidance.
Animate properties using useCurrentFrame() and interpolate(). Prefer interpolate() over spring() unless physics-based motion is explicitly needed. Use Easing.bezier() to customize timing, including jumpy or overshooting motion.
For animations that should be editable in Remotion Studio, keep the interpolate() call inline in the style prop and use individual CSS transform properties (scale, translate, rotate) instead of composing a transform string.
import { useCurrentFrame, Easing, interpolate, useVideoConfig } from "remotion";
export const FadeIn = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
extrapolateRight: "clamp",
extrapolateLeft: "clamp",
easing: Easing.bezier(0.16, 1, 0.3, 1),
});
return <div style={{ opacity }}>Hello World!</div>;
};
Prefer:
style={{
scale: interpolate(frame, [0, 100], [0, 1]),
translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"]),
rotate: interpolate(frame, [0, 100], ["20deg", "90deg"]),
}}
Over:
const scale = interpolate(frame, [0, 100], [0, 1]);
style={{
transform: `scale(${scale})`,
}}
CSS transitions or animations are FORBIDDEN - they will not render correctly.
Tailwind animation class names are FORBIDDEN - they will not render correctly.
