{"slug":"remotion-compositions","title":"Remotion — React-Based Video Compositions","tags":["remotion","react","programmatic-video","captions","animation"],"agent_summary":"Remotion skill for building programmatic video compositions in React. Covers composition setup, interpolation, Sequence, audio sync, captions (TikTok-style), transitions, and AWS Lambda rendering.","trigger_phrases":["remotion","react video","programmatic video","video composition react","remotion captions","useCurrentFrame","interpolate remotion","remotion animation","remotion lambda"],"runnable":true,"markdown":"\n# Remotion — React-Based Video Compositions\n\nRemotion turns React components into video frames. Use when you need pixel-perfect programmatic video: animated stats, branded intros, caption overlays, or any video that requires code-level control.\n\n## When to Use Remotion vs Creatify\n\n| Scenario | Use |\n|----------|-----|\n| Talking head + avatar + quick turnaround | Creatify |\n| Code-generated animated graphics, stats, charts | Remotion |\n| Pixel-perfect branded intros/outros | Remotion |\n| TikTok-style captions with word highlighting | Remotion |\n| Bulk video variants from data | Remotion |\n| B-roll cinematic scenes | Kling via Magnific |\n\n## Core Concepts\n\n### Composition\n\n```tsx\nimport { Composition } from 'remotion';\n\nexport const RemotionRoot = () => (\n \n);\n```\n\n### useCurrentFrame + interpolate\n\n```tsx\nimport { useCurrentFrame, interpolate } from 'remotion';\n\nexport const FadeIn = () => {\n const frame = useCurrentFrame();\n const opacity = interpolate(frame, [0, 30], [0, 1], {\n extrapolateLeft: 'clamp',\n extrapolateRight: 'clamp'\n });\n return
Content
;\n};\n```\n\n### Sequence — Timeline Layers\n\n```tsx\nimport { Sequence } from 'remotion';\n\nexport const Timeline = () => (\n <>\n \n \n \n \n \n \n \n);\n```\n\n## TikTok-Style Captions\n\n```tsx\nimport { useCurrentFrame } from 'remotion';\nimport { useWindowedFrameCaptions } from '@remotion/captions';\n\nexport const Captions = ({ transcript }) => {\n const frame = useCurrentFrame();\n const { captions } = useWindowedFrameCaptions(transcript, { frame });\n\n return (\n
\n {captions.map((word, i) => (\n \n {word.text}{' '}\n \n ))}\n
\n );\n};\n```\n\n## Import SRT Captions\n\n```tsx\nimport { parseSrt } from '@remotion/captions';\nimport fs from 'fs';\n\nconst srtContent = fs.readFileSync('captions.srt', 'utf8');\nconst captions = parseSrt({ input: srtContent });\n```\n\n## Audio Sync\n\n```tsx\nimport { Audio, useVideoConfig } from 'remotion';\n\nexport const WithAudio = () => (\n \n);\n```\n\n## Rendering\n\n```bash\n# Preview (browser)\nnpx remotion preview\n\n# Local render\nnpx remotion render MyVideo output.mp4\n\n# AWS Lambda (production)\nnpx remotion lambda render MyVideo output.mp4 \\\n --region us-east-1 \\\n --function-name remotion-render\n```\n\n## Rules Reference\n\nFull rules by topic at `C:\\Users\\mikem\\.claude\\skills\\remotion-best-practices\\rules\\`:\n\n| File | Topic |\n|------|-------|\n| animations.md | Spring, interpolate, easing |\n| audio.md | Audio import, trim, volume, speed |\n| captions.md | TikTok-style word highlighting |\n| transitions.md | Scene transitions |\n| assets.md | Images, video, fonts |\n| timing.md | Interpolation curves |\n| tailwind.md | TailwindCSS in Remotion |\n\n## Related Topics\n\n- [[ffmpeg-agent]] — post-process Remotion output (compress, add subs, resize)\n- [[merlino-voice]] — generate voiceover audio to sync with Remotion\n- [[assemblyai-transcription]] — generate SRT captions for Remotion import\n\n#video-sop #remotion #react #programmatic-video #captions #animation\n","html":"

Remotion — React-Based Video Compositions

\n

Remotion turns React components into video frames. Use when you need pixel-perfect programmatic video: animated stats, branded intros, caption overlays, or any video that requires code-level control.

\n

When to Use Remotion vs Creatify

\n

| Scenario | Use |\n|----------|-----|\n| Talking head + avatar + quick turnaround | Creatify |\n| Code-generated animated graphics, stats, charts | Remotion |\n| Pixel-perfect branded intros/outros | Remotion |\n| TikTok-style captions with word highlighting | Remotion |\n| Bulk video variants from data | Remotion |\n| B-roll cinematic scenes | Kling via Magnific |

\n

Core Concepts

\n

Composition

\n
import { Composition } from 'remotion';\n\nexport const RemotionRoot = () => (\n  <Composition\n    id=\"MyVideo\"\n    component={MyVideoComponent}\n    durationInFrames={150}   // 5s at 30fps\n    fps={30}\n    width={1080}\n    height={1920}            // 9:16 vertical\n    defaultProps={{ text: 'Hello' }}\n  />\n);\n
\n

useCurrentFrame + interpolate

\n
import { useCurrentFrame, interpolate } from 'remotion';\n\nexport const FadeIn = () => {\n  const frame = useCurrentFrame();\n  const opacity = interpolate(frame, [0, 30], [0, 1], {\n    extrapolateLeft: 'clamp',\n    extrapolateRight: 'clamp'\n  });\n  return <div style={{ opacity }}>Content</div>;\n};\n
\n

Sequence — Timeline Layers

\n
import { Sequence } from 'remotion';\n\nexport const Timeline = () => (\n  <>\n    <Sequence from={0} durationInFrames={60}>\n      <Hook />\n    </Sequence>\n    <Sequence from={60} durationInFrames={90}>\n      <MainContent />\n    </Sequence>\n  </>\n);\n
\n

TikTok-Style Captions

\n
import { useCurrentFrame } from 'remotion';\nimport { useWindowedFrameCaptions } from '@remotion/captions';\n\nexport const Captions = ({ transcript }) => {\n  const frame = useCurrentFrame();\n  const { captions } = useWindowedFrameCaptions(transcript, { frame });\n\n  return (\n    <div style={{ position: 'absolute', bottom: 100, width: '100%', textAlign: 'center' }}>\n      {captions.map((word, i) => (\n        <span\n          key={i}\n          style={{\n            color: word.highlighted ? '#FFD700' : 'white',\n            fontWeight: word.highlighted ? 'bold' : 'normal',\n            fontSize: 48,\n            textShadow: '2px 2px 4px rgba(0,0,0,0.8)'\n          }}\n        >\n          {word.text}{' '}\n        </span>\n      ))}\n    </div>\n  );\n};\n
\n

Import SRT Captions

\n
import { parseSrt } from '@remotion/captions';\nimport fs from 'fs';\n\nconst srtContent = fs.readFileSync('captions.srt', 'utf8');\nconst captions = parseSrt({ input: srtContent });\n
\n

Audio Sync

\n
import { Audio, useVideoConfig } from 'remotion';\n\nexport const WithAudio = () => (\n  <Audio\n    src=\"https://example.com/voiceover.mp3\"\n    startFrom={0}\n    volume={1}\n  />\n);\n
\n

Rendering

\n
# Preview (browser)\nnpx remotion preview\n\n# Local render\nnpx remotion render MyVideo output.mp4\n\n# AWS Lambda (production)\nnpx remotion lambda render MyVideo output.mp4 \\\n  --region us-east-1 \\\n  --function-name remotion-render\n
\n

Rules Reference

\n

Full rules by topic at C:\\Users\\mikem\\.claude\\skills\\remotion-best-practices\\rules\\:

\n

| File | Topic |\n|------|-------|\n| animations.md | Spring, interpolate, easing |\n| audio.md | Audio import, trim, volume, speed |\n| captions.md | TikTok-style word highlighting |\n| transitions.md | Scene transitions |\n| assets.md | Images, video, fonts |\n| timing.md | Interpolation curves |\n| tailwind.md | TailwindCSS in Remotion |

\n

Related Topics

\n\n

#video-sop #remotion #react #programmatic-video #captions #animation

\n"}