remotion-pro

name	remotion-pro
description	根据场景配置生成 Remotion React 组件代码。 触发词： - "生成 Remotion 代码" - "生成场景组件" - "创建视频代码" 使用场景： - 科普动画视频生成 - 技术教程视频制作 - 数据可视化视频

remotion-pro

根据场景配置生成 Remotion React 组件。

功能

1. 场景组件生成：为每个场景生成独立的 React 组件
2. 3Blue1Brown 风格：符合数学可视化标杆的设计规范
3. TTSPlayer 集成：自动集成逐字字幕组件
4. 动画库集成：支持 StepByStep、SlidingWindow 等动画组件

生成产物

// src/scenes/Scene01_Intro.tsx
import React from "react";
import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
import { spring, interpolate } from "remotion";
import { COLORS_3B1B } from "../../config";

export const Scene01_Intro: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // 入场动画
  const titleProgress = spring({ frame, fps, config: { damping: 15 } });
  const titleScale = interpolate(titleProgress, [0, 1], [0.8, 1]);
  const titleOpacity = interpolate(titleProgress, [0, 1], [0, 1]);

  return (
    <AbsoluteFill style={{ backgroundColor: COLORS_3B1B.background }}>
      {/* 标题 */}
      <div style={{
        position: "absolute",
        top: "40%",
        left: 0,
        right: 0,
        textAlign: "center",
        transform: `scale(${titleScale})`,
        opacity: titleOpacity,
      }}>
        <h1 style={{
          fontSize: 80,
          color: COLORS_3B1B.text,
          fontFamily: "JetBrains Mono"
        }}>
          什么是卷积神经网络？
        </h1>
      </div>
    </AbsoluteFill>
  );
};

项目结构

my-video/
├── src/
│   ├── Root.tsx              # 入口：注册所有 Composition
│   ├── config.ts             # 全局配置
│   ├── audioConfig.ts        # ⭐ 场景配置（自动生成）
│   │
│   ├── components/           # 可复用组件
│   │   ├── TTSPlayer.tsx
│   │   └── ...
│   │
│   ├── scenes/              # ⭐ 场景组件（自动生成）
│   │   ├── Scene01_Intro.tsx
│   │   ├── Scene02_Input.tsx
│   │   └── ...
│   │
│   └── animations/          # 动画组件
│       ├── StepByStep.tsx
│       └── ...
│
├── public/
│   └── audio/              # TTS 音频文件
│
└── package.json

3Blue1Brown 风格规范

// config.ts
import { COLORS_3B1B } from "codemotion/shared/presets/3b1b-colors";

export const CONFIG = {
  fps: 30,
  width: 1920,
  height: 1080,
  colors: COLORS_3B1B,
};

动画原则

原则	实现
元素依次出现	使用 delayPerItem 控制
相机平滑过渡	使用 spring 动画
逐字高亮字幕	TTSPlayer 组件
颜色有语义	positive=蓝, negative=红, highlight=黄

TTSPlayer 集成

import { TTSPlayer } from "codemotion/shared/components/TTSPlayer";
import { SCENES } from "./audioConfig";

export const Scene01_Intro: React.FC = () => {
  const scene = SCENES[0];

  return (
    <AbsoluteFill style={{ backgroundColor: COLORS_3B1B.background }}>
      {/* 场景内容 */}
      <Title text={scene.title} />

      {/* TTS 字幕 */}
      <TTSPlayer
        audioFile={scene.audioFile}
        timestamps={scene.timestamps}
        text={scene.text}
      />
    </AbsoluteFill>
  );
};

使用流程

1. 准备场景配置：使用 script-to-scene 生成
2. 生成 TTS 音频：使用 tts-universal 生成
3. 生成 Remotion 代码：使用 remotion-pro 生成
4. 预览和调试：运行 npm run dev
5. 渲染输出：运行 remotion render

渲染命令

# 开发预览
npm run dev

# 渲染为 MP4
npx remotion render ScienceVideo out/video.mp4

# 指定分辨率
npx remotion render --scale=0.5 ScienceVideo out/video-720p.mp4

参考资源

• Remotion 官方文档
• 3Blue1Brown 风格指南
• 组件参考