remotion

(https://github.com/remotion-dev/remotion)

说明文档：https://www.remotion.dev/docs/

教程(https://www.bilibili.com/video/BV1eedSBBEre/?spm_id_from=333.337.search-card.all.click&vd_source=b77ca384f9dbc404fe703bb00140e104)

【要引用的外部图片，音频】放在 \public 这个文件夹里

模板地址：https://remotionlab.com/

【使用方式】：

1建立一个模板库

2在新建项目中打开claude，让其把模版库中 编号几和几的 ，按什么顺序，用 <Sequence> 组件做多场景串联，生成 MainVideo

out是输出地址
src模版node代码位置

模板复用:

remotion123/├── demo库/          ← 模板来源│   └── src/Scene*.tsx└── 新项目/          ← 新项目    └── src/        ├── Scene*.tsx     ← 从 demo库 复制过来        ├── Root.tsx       ← 注册 Composition + MainVideo        └── index.ts

注意事项:

简化版流程:

1. mkdir remotion123/新项目 && cd 新项目

2. 开 Claude ⇒ "从 demo库 复制 Scene141 和 Scene47 到当前项目"

3. "用 Sequence 串联, 生成 MainVideo"

4. 预览/渲染

或者更直接: 如果新项目就是 demo库 的某个场景子集, 也可以直接在 demo库 的 Root.tsx 里增减 Composition, 省去复制步骤. 只有想做独立项目时才复制出去.

安装：

npx create-video@latest

blank

√ Choose a template: » Blank Nothing except an empty canvas
√ Directory to create your project ... my-video
√ You are already inside a Git repo (C:\Users\Administrator).
A new project will be created without initializing a new Git repository. Do you want to continue? ... No / Yes
√ Add TailwindCSS? ... No / Yes
? Add agent skills? » No / Yes

运行
npx remotion

打开：http://localhost:3000/

在C:\Users\Administrator\my-video 文件夹打开claude
输入：
This is an easy way to get started with Remotion!

模式: 每次加新模板 ⇒ 加一个 Composition

// src/index.tsxconst Root: React.FC = () => {  return (    <>      <Composition id="MindMap" ... />      <Composition id="AcqRetRef" ... />      <Composition id="新模板" component={新组件} durationInFrames={300} fps={30} width={1920} height={1080} />      <Composition id="另一个模板" ... />    </>  );};

文件存放约定 (推荐):

src/├── index.tsx                    ← 只做注册, 不写业务逻辑├── MindMap.tsx                  ← 思维导图├── Scene141-AcqRetRef.tsx       ← 三卡片├── SceneXXX-你的新模板.tsx       ← 新模板└── ...

实操:

1. 新建 src/MyNewScene.tsx

2. export default 组件

3. 在 index.tsx 加 import + 加一行 <Composition>

Remotion Studio 左侧列表会自动出现所有 Composition, 点哪个播哪个.

Remotion Studio 的 timeline 只显示当前选中的 Composition. 不能像 Premiere/FCP 那样拖拽拼接.

但可以用 <Sequence> 组件做"多场景串联":

import { Sequence } from "remotion";
import Scene141AcqRetRef from "./Scene141-AcqRetRef";
import Scene47AiReadsOnly from "./Scene47AiReadsOnly";
// ... 还有你的 MindMap

const MainVideo: React.FC = () => {
  return (
    <>
      {/* 场景 1: 思维导图 (0-119帧) */}
      <Sequence from={0} durationInFrames={120}>
        <MindMap />
      </Sequence>

      {/* 场景 2: 三卡片 (120-419帧) */}
      <Sequence from={120} durationInFrames={300}>
        <Scene141AcqRetRef />
      </Sequence>

      {/* 场景 3: AI只能读 (420-599帧) */}
      <Sequence from={420} durationInFrames={180}>
        <Scene47AiReadsOnly />
      </Sequence>
    </>
  );
};

然后注册一个总 Composition:

<Composition
  id="MainVideo"
  component={MainVideo}
  durationInFrames={600}  // 120+300+180
  fps={30}
  width={1920}
  height={1080}
/>

这样 timeline 切到 MainVideo, 就能看到三个场景连在一起, 时间轴从头播到尾.

模版对应提示词：

模版代码文件放 src/Scene141-AcqRetRef.tsx, 然后在 index.tsx 加 Composition.