remotion

Files (45)

• SKILL.md
• openai.yaml · agents/
• usage-examples.md · examples/
• detailed-reference.md · references/
• troubleshooting.md · references/
• 3d.md · rules/
• charts-bar-chart.tsx · rules/assets/
• text-animations-typewriter.tsx · rules/assets/
• text-animations-word-highlight.tsx · rules/assets/
• audio-visualization.md · rules/
• audio.md · rules/
• calculate-metadata.md · rules/
• compositions.md · rules/
• display-captions.md · rules/
• effects.md · rules/
• ffmpeg.md · rules/
• get-audio-duration.md · rules/
• get-video-dimensions.md · rules/
• get-video-duration.md · rules/
• gifs.md · rules/
• google-fonts.md · rules/
• html-in-canvas.md · rules/
• images.md · rules/
• import-srt-captions.md · rules/
• light-leaks.md · rules/
• local-fonts.md · rules/
• lottie.md · rules/
• maplibre.md · rules/
• measuring-dom-nodes.md · rules/
• measuring-text.md · rules/
• parameters.md · rules/
• sequencing.md · rules/
• sfx.md · rules/
• silence-detection.md · rules/
• subtitles.md · rules/
• tailwind.md · rules/
• text-animations.md · rules/
• timing.md · rules/
• transcribe-captions.md · rules/
• transitions.md · rules/
• transparent-videos.md · rules/
• trimming.md · rules/
• video-layout.md · rules/
• videos.md · rules/
• voiceover.md · rules/

SKILL.md (first lines)

## 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:

```bash
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](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.

```tsx
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:

```tsx
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:

```tsx
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.

Place assets in the `public/` folder at your project root.

Use `staticFile()` to reference files from the `public/` folder.

Add images using the `<Img>` component:

```tsx
import { Img, staticFile } from "remotion";

export const MyComposition = () => {
  return <Img src={staticFile("logo.png")} style={{ width: 100, height: 100 }} />;
};
```

Add videos using the `<Video>` component from `@remotion/media`:

```tsx
import { Video } from "@remotion/media";
import { staticFile } from "remotion";

export const MyComposition = () => {
  return <Video src={staticFile("video.mp4")} style={{ opacity: 0.5 }} />;
};
```

Add audio using the `<Audio>` component from `@remotion/media`:

```tsx
import { Audio } from "@remotion/media";
import { staticFile } from "remotion";

export const MyComposition = () => {
  return <Audio src={staticFile("audio.mp3")} />;
};
```

Assets can be also referenced as remote URLs:

```tsx
import { Video } from "@remotion/media";

export const MyComposition = () => {
  return <Video src="https://remotion.media/video.mp4" />
};
```

To delay content wrap it in `<Sequence>` and use `from`.
To limit the duration of an element, use `durationInFrames` of `<Sequence>`.
`<Sequence>` by default is an absolute fill. For inline content, use `layout="none"`.

```tsx
import { Sequence } from "remotion";

export const Title = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

From full-stack-skills/design-skills, Apache-2.0.

More from full-stack-skills/design-skills