Remotion Best Practices

When the user wants to create videos programmatically with React using Remotion. Also use when the user mentions 'create video,' 'Remotion,' 'React video,' '...

Security Scan

The skill is an instruction-only Remotion best-practices guide whose commands and file reads are consistent with its stated purpose, with minor notes about optional AWS creds and runtime package installation.

Purpose & Capability

Name/description match the content: the SKILL.md and references exclusively cover scaffolding, composition patterns, animation, rendering, and optional Lambda rendering for Remotion v4. Required items (none declared) are proportionate to the stated purpose.

Instruction Scope

The instructions are focused on Remotion workflows (scaffold, add compositions, preview, render, optional Lambda). They also instruct the agent to read a workspace file (.agents/product-marketing-context.md or .claude/product-marketing-context.md) if present — this is reasonable to reuse existing user-provided context, but it is an undeclared file read (the skill metadata did not list required config paths).

Install Mechanism

This is instruction-only (no install spec or code). It recommends running npx and npm install commands (e.g., npx create-video@latest, npm install @remotion/lambda). Downloading packages via npm/npx is expected for this tooling but does involve fetching third-party code at runtime — normal for Remotion but something the user should be aware of.

Credentials

The skill declares no required environment variables, which is appropriate for local development. The Lambda reference documents AWS environment variables (AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, REMOTION_AWS_REGION) as required for optional serverless rendering; these are appropriate but are not required by default. Users must provide AWS credentials only if they follow the Lambda workflow.

Persistence & Privilege

No elevated privileges requested: always:false, user-invocable:true, and the skill doesn't request persistent presence or modify other skills or system-wide settings.

Assessment

This skill is an authoritatitive Remotion how-to and appears coherent. Before using it: (1) be aware the agent may read a local product-marketing-context file in your workspace if present — only keep files there you’re comfortable sharing with the agent; (2) commands like `npx create-video@latest` and `npm install` will fetch and run third-party packages from the npm registry — verify you trust the packages and pin versions in your project if needed; (3) AWS credentials are only necessary if you follow the optional Lambda rendering path — never provide AWS keys unless you intend to deploy to your AWS account and understand the IAM permissions required; (4) when in doubt, run the recommended commands manually in a controlled environment rather than allowing autonomous execution.

You help users create videos programmatically using React and Remotion. Your goal is to scaffold projects, write compositions, build animated scene components, and render final video output -- all following Remotion v4 conventions and best practices.

Before Starting

Check for product marketing context first: If .agents/product-marketing-context.md exists (or .claude/product-marketing-context.md in older setups), read it before asking questions. Use that context and only ask for information not already covered or specific to this task.

Understand what the user needs (ask if not provided):

1. What video to create -- subject, purpose, and visual style
2. Target duration and dimensions -- e.g., 15 seconds at 1920x1080
3. New or existing project -- whether to scaffold fresh or add to an existing Remotion project

Workflow

Step 1: Set Up Project

Check if a Remotion project already exists:

• Look for package.json with @remotion/core in dependencies or devDependencies
• If found: skip scaffolding and add a new composition to the existing src/Root.tsx
• If not found: scaffold a new project:

npx create-video@latest my-video

After scaffolding, verify all @remotion/* packages are on the same version:

npm ls | grep remotion

For detailed setup configuration, read references/setup.md.

Step 2: Define Composition in Root.tsx

Register your video as a Composition in src/Root.tsx:

import { Composition } from "remotion";
import { MyScene } from "./MyScene";

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="MyVideo"
      component={MyScene}
      durationInFrames={900}  // 15s at 60fps
      fps={60}
      width={1920}
      height={1080}
      defaultProps={{ title: "My Video" }}
    />
  );
};

Key points:

• Use fps={60} as the project default (60fps for smooth animation)
• Use PascalCase for composition IDs (e.g., MyVideo, ProductDemo)
• Calculate durationInFrames as seconds * fps (15s at 60fps = 900 frames)

Step 3: Build Scene Components

Use AbsoluteFill as the root layout container. Use useCurrentFrame() and useVideoConfig() for animation state. Use <Sequence> for timeline positioning.

Minimal animated component:

import { useCurrentFrame, useVideoConfig, interpolate, AbsoluteFill } from "remotion";

export const MyScene: React.FC<{ title: string }> = ({ title }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
      <h1 style={{ opacity, fontSize: 80, color: "white" }}>{title}</h1>
    </AbsoluteFill>
  );
};

For physics-based animation, use spring():

import { spring } from "remotion";

const scale = spring({
  frame,
  fps,
  config: { damping: 12, stiffness: 100 },
});

For detailed animation patterns including spring() configuration, multi-step interpolation, and easing functions, read references/animations.md.

Step 4: Add Multi-Scene Timeline

Use <Sequence> to compose multiple scenes on a timeline:

import { Sequence, AbsoluteFill } from "remotion";

export const MyVideo: React.FC = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: "black" }}>
      <Sequence durationInFrames={180}>
        <IntroScene />
      </Sequence>
      <Sequence from={180} durationInFrames={600}>
        <MainContent />
      </Sequence>
      <Sequence from={780} durationInFrames={120}>
        <OutroScene />
      </Sequence>
    </AbsoluteFill>
  );
};

Each <Sequence> resets useCurrentFrame() to 0 for its children, so each scene animates independently. The from prop sets when the scene starts on the parent timeline.

Step 5: Render Video

Preview in browser:

npx remotion preview src/index.ts

Render locally:

npx remotion render src/index.ts MyVideo out/video.mp4

Render with custom props:

npx remotion render src/index.ts MyVideo out/video.mp4 --props='{"title":"Hello"}'

For output formats, quality settings, and advanced render options, read references/rendering.md.

For AWS Lambda rendering at scale, read references/lambda.md.

See tools/integrations/remotion.md for the full CLI command reference.

Key Rules

1. Version pinning -- All @remotion/* packages must be the same version. Never update one independently. See tools/integrations/remotion.md for details.
2. Deterministic rendering -- Never use Math.random(). Use random('seed') from the remotion package for deterministic random values.
3. FPS from config -- Always get fps from useVideoConfig(). Never hardcode fps values in animation calculations.
4. Clamp interpolation -- Use interpolate() with extrapolateRight: "clamp" to prevent values exceeding the target range.
5. Default 60fps -- All compositions use fps={60} unless the user specifies otherwise.

Output Format

Deliver a working Remotion project with:

1. src/Root.tsx -- Composition registration with correct dimensions, fps, and duration
2. Scene components -- One .tsx file per scene with animations
3. Render command -- The exact npx remotion render command to produce the final video
4. Preview command -- npx remotion preview src/index.ts for browser preview

If adding to an existing project, deliver the new composition entry for Root.tsx and the new scene component files.

Related Skills

• video-ad-creation: Standard ad format compositions (15s/30s/60s) with product showcase templates
• social-video-content: Social platform video formats (9:16 vertical, 1:1 square, 16:9 landscape)