remotion-video

用途

Remotion Video Production（MiniPC）用于在 MiniPC 上使用 Remotion 以编程方式制作视频。适合制作视频内容、动画、动态图形、社交媒体短片，以及任何基于 React 的视频。

环境

项目路径：$HOME/remotion-videos（MiniPC）
渲染执行：npx remotion render <CompositionId> out/video.mp4
ffmpeg：已安装
传输方式：MiniPC HTTP 服务器（9877）+ curl 传到 Mac Studio

核心概念

Composition 是视频的基本单位：

<Composition
  id="MyVideo"
  component={MyComponent}
  durationInFrames={150}  // 30fps × 5秒 = 150帧
  fps={30}
  width={1920}
  height={1080}
/>

时间控制

const frame = useCurrentFrame();         // 当前帧
const { fps, durationInFrames } = useVideoConfig();

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

// 弹簧动画
const scale = spring({ frame, fps, config: { damping: 200 } });

场景排序

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

主要模式

素材使用

图片：<Img src={staticFile('logo.png')} />
视频：<OffthreadVideo src={staticFile('clip.mp4')} />
音频：<Audio src={staticFile('bgm.mp3')} volume={0.5} />
字体：Google Fonts — loadFont("Noto Sans KR")
本地字体：放入 public/ 文件夹

字幕/说明文字

使用 @remotion/captions 包：加载 JSON/SRT 字幕文件，与时间戳同步。

转场

使用 @remotion/transitions（slide、fade、wipe 等），通过 <TransitionSeries> 组件进行场景切换。

Tailwind CSS

配置 @remotion/tailwind 后即可使用 className。

3D 内容

使用 @react-three/fiber + @remotion/three，将 Three.js 场景同步到 Remotion 时间轴。

渲染

# 基础渲染
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

制作工作流

策划：确定场景结构、时长、分辨率
准备素材：图片、音乐、字体 → public/ 文件夹
组件编码：用 React 制作各个场景
预览：npx remotion studio（MiniPC 浏览器）
渲染：无头渲染 → MP4/WebM
传输：通过 HTTP 服务器传送到 Mac Studio

注意事项

子代理委派——视频渲染耗时较长
默认 30fps——需要时可改为 60fps
注意内存——高分辨率加长视频需留意 MiniPC 的 RAM 限制
MiniPC 上无法执行 GitHub push——需在 Mac Studio 上 push