57 lines
2.7 KiB
Markdown
57 lines
2.7 KiB
Markdown
---
|
|
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
|