SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsremotion-video

remotion-video

Design & creation

View repository

Updated 10-16 16:28

About this skill

Remotion Video Production (MiniPC)

Programmatic video production with Remotion on MiniPC.

Environment

  • Project: $HOME/remotion-videos (MiniPC)
  • Run: npx remotion render <CompositionId> out/video.mp4
  • ffmpeg: Installed
  • Transfer: Transfer to Mac Studio via MiniPC HTTP server (9877) + curl

Core Concepts

Composition = unit of video

<Composition
  id="MyVideo"
  component={MyComponent}
  durationInFrames={150}  // 30fps × 5초 = 150프레임
  fps={30}
  width={1920}
  height={1080}
/>

Time Control

const frame = useCurrentFrame();         // 현재 프레임
const { fps, durationInFrames } = useVideoConfig();

// 보간 (interpolate)
const opacity = interpolate(frame, [0, 30], [0, 1], {
  extrapolateRight: 'clamp'
});

// 스프링 애니메이션
const scale = spring({ frame, fps, config: { damping: 200 } });

Sequencing

<Sequence from={0} durationInFrames={60}>
  <IntroScene />
</Sequence>
<Sequence from={60} durationInFrames={90}>
  <MainContent />
</Sequence>

Key Patterns

Using Assets

  • Image: <Img src={staticFile('logo.png')} />
  • Video: <OffthreadVideo src={staticFile('clip.mp4')} />
  • Audio: <Audio src={staticFile('bgm.mp3')} volume={0.5} />
  • Font: Google Fonts — loadFont("Noto Sans KR")
  • Local Font: Place in public/ folder

Subtitles/Captions

  • @remotion/captions Use package
  • Load JSON/SRT subtitle file → synchronize timestamps

Transitions

  • @remotion/transitions — slide, fade, wipe 등
  • <TransitionSeries> Scene transition with component

Tailwind CSS

  • @remotion/tailwind className available after setup

3D Content

  • @react-three/fiber + @remotion/three
  • Synchronize Three.js scene with Remotion timeline

Rendering

# 기본 렌더링
cd $HOME/remotion-videos
npx remotion render MyVideo out/video.mp4

# 고품질
npx remotion render MyVideo out/video.mp4 --codec h264 --crf 18

# 투명 배경 (WebM)
npx remotion render MyVideo out/video.webm --codec vp8

# GIF
npx remotion render MyVideo out/animation.gif --every-nth-frame 2

Production Workflow

  1. Planning: Decide scene composition, length, resolution
  2. Asset Preparation: Images, music, fonts → public/ folder
  3. Component Coding: Build each scene with React
  4. Preview: npx remotion studio (MiniPC browser)
  5. Rendering: headless rendering → MP4/WebM
  6. Transfer: Deliver to Mac Studio via HTTP server

⚠️ Notes

  • Subagent Delegation — Video rendering is time-consuming
  • 30fps default — Change to 60fps if needed
  • Watch Memory — Be mindful of MiniPC RAM limits for high resolution + long videos
  • Cannot push to GitHub (MiniPC) — push from Mac Studio