A production-ready Remotion video template with reusable components for marketing videos, explainers, and product promos. Built for the Chow video pipeline.
| Component | What it does |
|---|---|
CaptionOverlay |
Word-by-word captions synced to voiceover |
FadeUp |
Smooth fade-in + slide-up entrance animation |
KenBurnsImage |
Slow pan/zoom over images (Ken Burns effect) |
MultiFormat |
Render to 9:16 (TikTok/Reels), 16:9 (YouTube), 1:1 (Instagram) |
StaggerIn |
Stagger children entrance with configurable delay |
TracePath |
Animated SVG path tracing |
TypewriterText |
Character-by-character typewriter effect |
WordHighlight |
Highlight individual words as they're spoken |
CounterPop |
Animated number counter with pop effect |
CameraMotionBlur |
Realistic motion blur via @remotion/motion-blur |
- Lottie animations — use After Effects exports
- Light leaks — cinematic transitions
- SFX transitions — audio stingers between scenes
- Tailwind v4 — utility-first styling
- ElevenLabs TTS integration (Adam voice by default)
- Free tier works (10K chars/month)
# Clone
git clone https://github.com/optimizedwf/chow-video-studio.git
cd chow-video-studio
# Install
npm install
# Set up your ElevenLabs key
cp .env.example .env
# Edit .env with your API key
# Start Remotion Studio
npm run dev
# Render all 3 formats
npx remotion render CatholicIntro out/catholic-intro-16-9.mp4 --width=1920 --height=1080
npx remotion render CatholicIntro out/catholic-intro-9-16.mp4 --width=1080 --height=1920
npx remotion render CatholicIntro out/catholic-intro-1-1.mp4 --width=1080 --height=1080- Copy a component you like from
src/components/ - Create a new composition in
src/ - Register it in
src/index.ts - Add your scenes under
src/scenes/
- archon-remotion-workflows — Automate video generation from URLs/prompts using Archon DAGs + GLM sub-agents. Point it at any article, product page, or idea and get a voiced Remotion video back.