# Remotion Video

> Best practices for Remotion - Video creation in React. Use when working with programmatic video generation, animations, compositions, and motion graphics.

- Skill: `jack-taylor-gorman/remotion-video` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jack-taylor-gorman/remotion-video`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jack-taylor-gorman/remotion-video/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Jack-Taylor-Gorman (https://skillmd.com/u/jack-taylor-gorman)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/jack-taylor-gorman/remotion-video

---


## When to use

Use this skill whenever you are dealing with Remotion code to obtain domain-specific knowledge for programmatic video creation.

## Core Principles

Remotion allows you to create videos using React components. Key concepts:

1. **Compositions**: Define video compositions with duration, fps, width, and height
2. **Frame-based Animation**: Use `useCurrentFrame()` and `useVideoConfig()` for animations
3. **Interpolation**: Use `interpolate()` for smooth transitions and animations
4. **Sequencing**: Use `<Sequence>` to control timing of components

## Best Practices

### Animations
- Use `interpolate()` for smooth value transitions
- Leverage spring animations for natural motion
- Apply easing functions (linear, ease-in, ease-out, cubic-bezier)
- Synchronize animations with the timeline using `useCurrentFrame()`

### Assets
- Import images, videos, audio using ES6 imports or `staticFile()`
- Use `<Img>`, `<Video>`, and `<Audio>` components from Remotion
- Ensure assets are in the `public/` folder for `staticFile()` usage

### Performance
- Optimize heavy computations with `useMemo()`
- Use `delayRender()` and `continueRender()` for async operations
- Keep component trees shallow for better rendering performance

### Typography & Text
- Load fonts using `@remotion/google-fonts` or local font files
- Measure text dimensions with `measureText()` for dynamic layouts
- Animate text with character-by-character reveals or word highlighting

### Audio
- Trim audio using `<Audio>` component props
- Control volume, playback speed, and pitch
- Get audio duration with `getAudioDurationInSeconds()`

### Video Embedding
- Use `<OffthreadVideo>` for better performance
- Trim videos with `startFrom` and `endAt` props
- Control playback speed, volume, and looping

## Common Patterns

**Fade In/Out**:
```javascript
const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: 'clamp' });
```

**Scale Animation**:
```javascript
const scale = spring({ frame, fps, config: { damping: 200 } });
```

**Sequencing Multiple Scenes**:
```javascript
<Sequence from={0} durationInFrames={90}>
  <Scene1 />
</Sequence>
<Sequence from={90} durationInFrames={120}>
  <Scene2 />
</Sequence>
```

## Resources

For detailed rules and examples, refer to the Remotion documentation and the remotion-dev/skills repository for comprehensive guides on:
- 3D content, charts, captions, transitions
- Lottie animations, GIFs, fonts
- Audio/video manipulation, trimming, transcription