---
name: ck-remotion
description: Create programmatic videos with React using Remotion. Use when building video compositions, animations, captions, charts, audio sync, transitions, or rendering video from code.
---

# Remotion — Video Creation in React

Domain-specific knowledge for building videos programmatically with React.

## When to Use

- Creating video compositions with React components
- Building animations, transitions, and sequencing
- Embedding audio, video, images, GIFs, or Lottie in video
- Generating captions, subtitles, or text animations
- Rendering charts and data visualizations as video
- Working with Three.js 3D content in video

## Don't Use When

- Simple static image exports (use canvas or Puppeteer)
- Live streaming (Remotion is for pre-rendered video)
- Video editing of existing footage without code changes

## Reference Files

Load individual rule files for domain-specific knowledge:

- `rules/animations.md` — fundamental animation skills, interpolation
- `rules/timing.md` — interpolation curves, linear, easing, spring
- `rules/sequencing.md` — delay, trim, limit duration of items
- `rules/trimming.md` — cut beginning or end of animations
- `rules/transitions.md` — scene transition patterns
- `rules/compositions.md` — defining compositions, stills, folders, default props
- `rules/calculate-metadata.md` — dynamically set duration, dimensions, props
- `rules/assets.md` — importing images, videos, audio, fonts
- `rules/audio.md` — audio import, trimming, volume, speed, pitch
- `rules/videos.md` — embedding videos, trimming, looping, pitch
- `rules/images.md` — embedding images with Img component
- `rules/gifs.md` — displaying GIFs synchronized with timeline
- `rules/fonts.md` — loading Google Fonts and local fonts
- `rules/text-animations.md` — typography and text animation patterns
- `rules/display-captions.md` — TikTok-style captions with word highlighting
- `rules/import-srt-captions.md` — importing .srt subtitle files
- `rules/transcribe-captions.md` — transcribing audio to generate captions
- `rules/charts.md` — chart and data visualization patterns
- `rules/lottie.md` — embedding Lottie animations
- `rules/3d.md` — Three.js and React Three Fiber in Remotion
- `rules/tailwind.md` — using TailwindCSS in Remotion
- `rules/measuring-text.md` — measuring text dimensions, fitting to containers
- `rules/measuring-dom-nodes.md` — measuring DOM element dimensions
- `rules/can-decode.md` — check if video can be decoded via Mediabunny
- `rules/extract-frames.md` — extract frames at specific timestamps
- `rules/get-audio-duration.md` — getting audio file duration
- `rules/get-video-duration.md` — getting video file duration
- `rules/get-video-dimensions.md` — getting video width and height