remotion-video

name	remotion-video
description	Remotion React视频生成器：用React代码编写、渲染和导出视频。当用户说'生成视频'、'做动画视频'、'React视频'、'把图表做成视频'、'产品演示视频'、'数据动画'、'字幕视频'时触发。核心特点：React组件化视频、30+composition最佳实践、FFmpeg导出、程序化视频生成。

来源: 改编自 Remotion 官方 skill（github.com/remotion-dev/skills）

发布时间: 2026-05-29

理念: "视频不是拍出来的，是写代码写出来的。"

🎬 Remotion Video — React 视频生成器

用 React + Remotion 把代码变成视频——数据动画、产品演示、字幕视频、宣传短片，全部程序化生成。

---

🎯 和 HTML PPT 的区别

维度	HTML PPT（html-ppt-skill）	Remotion Video
输出格式	HTML 幻灯片（浏览器播放）	MP4 / WebM 视频文件
交互性	可交互（点击、切换）	不可交互，线性播放
动画能力	CSS 动画	逐帧渲染、时间轴控制
音频	❌ 无	✅ 支持旁白、BGM、音效
适用场景	现场演示、汇报	社交媒体、宣传片、教程
技术栈	HTML + CSS	React + Remotion + FFmpeg

---

🛠️ 核心技术栈

Remotion        # React 视频框架
React 18+       # 组件化视频编写
TypeScript      # 类型安全
FFmpeg          # 视频编码导出
@remotion/player # 预览播放器
@remotion/cli    # 渲染命令行

Remotion 核心概念

概念	说明	类比
Composition	视频场景定义（宽高、FPS、时长）	舞台布景
Sequence	时间轴上的片段（什么时候开始、持续多久）	镜头
Frame	单帧画面（Remotion 按 FPS 逐帧渲染）	胶片格
useCurrentFrame()	获取当前帧号，驱动动画	时间指针
interpolate()	数值插值（实现缓动动画）	动画曲线
spring()	弹簧物理动画	弹性动效

---

📁 项目结构模板

my-video/
├── src/
│   ├── compositions/       # 视频场景定义
│   │   ├── Main.tsx        # 主合成入口
│   │   ├── Intro.tsx       # 片头
│   │   └── DataViz.tsx     # 数据可视化片段
│   ├── components/         # 可复用视频组件
│   │   ├── TitleCard.tsx   # 标题卡片
│   │   ├── AnimatedBar.tsx # 动画柱状图
│   │   └── Subtitle.tsx    # 字幕组件
│   ├── hooks/
│   │   └── useAudio.ts     # 音频控制
│   ├── types/
│   │   └── video.ts        # 类型定义
│   └── index.tsx           # 注册所有 Composition
├── public/
│   ├── audio/              # 音频资源
│   ├── fonts/              # 字体文件
│   └── images/             # 图片素材
├── remotion.config.ts      # Remotion 配置
├── package.json
└── tsconfig.json

---

💡 使用示例

示例 1：数据动画视频（销售增长）

用户：把这张销售增长图表做成 15 秒动画视频，带字幕

AI 输出：

// src/compositions/SalesGrowth.tsx
import { useCurrentFrame, interpolate, spring, Sequence } from "remotion";
import { AbsoluteFill, Text } from "remotion";

const data = [
  { month: "1月", value: 100 },
  { month: "2月", value: 150 },
  { month: "3月", value: 300 },
  { month: "4月", value: 280 },
  { month: "5月", value: 500 },
];

export function SalesGrowth() {
  const frame = useCurrentFrame();
  
  return (
    <AbsoluteFill className="bg-slate-900 text-white flex flex-col items-center justify-center">
      {/* 标题 */}
      <Sequence from={0} durationInFrames={30}>
        <Text className="text-4xl font-bold"
          style={{
             (, [, ], [, ]),
             `(${(, [, ], [, ])})`
          }}
        >
          2026年销售增长趋势
        
      
      
      {/* 柱状图动画 */}
      
        {data.map((item, index) => {
          const delay = index * 10;
          const barHeight = spring({
            frame: frame - delay,
            fps: 30,
            config: { damping: 10, stiffness: 100 }
          }) * item.value;
          
          return (
            
              
                
                {item.month}
              
            
          );
        })}
      
      
      {/* 总结字幕 */}
      
        
          5月销售额同比增长 500%
        
      
    
  );
}



 {  }  ;
 {  }  ;

   = () => (
  
);

渲染命令：

npx remotion render src/index.tsx SalesGrowth output.mp4

---

示例 2：产品演示视频（带字幕和 BGM）

import { Audio, Sequence, useCurrentFrame, interpolate } from "remotion";
import { AbsoluteFill, Img, Text } from "remotion";

export function ProductDemo() {
  const frame = useCurrentFrame();
  
  return (
    <AbsoluteFill className="bg-white">
      {/* BGM */}
      <Audio src="/audio/background-music.mp3" />
      
      {/* 场景1: 产品亮相 (0-3秒) */}
      <Sequence from={0} durationInFrames={90}>
        <AbsoluteFill className="flex items-center justify-center">
          <Img
            src="/images/product-hero.png"
            style={{
              transform: `scale(${interpolate(frame, [0, 60], [0.8, 1])})`,
              opacity: interpolate(frame, [0, ], [, ])
            }}
          />
          
            全新智能手表 Pro
          
        
      
      
      {/* 场景2: 功能展示 (3-6秒) */}
      
        
      
      
      {/* 场景3: CTA (6-8秒) */}
      
        
          立即体验
          www.example.com
        
      
    
  );
}

---

示例 3：字幕视频（口播/播客转视频）

// 字幕逐字出现效果
function Subtitle({ text, startFrame }: { text: string; startFrame: number }) {
  const frame = useCurrentFrame();
  const charsToShow = Math.max(0, frame - startFrame);
  const visibleText = text.slice(0, charsToShow);
  
  return (
    <Text className="text-2xl text-white text-center px-12"
      style={{
        textShadow: "0 2px 4px rgba(0,0,0,0.5)"
      }}
    >
      {visibleText}
      <span className="animate-pulse">|</span>
    </Text>
  );
}

// 使用
<Sequence from={0} durationInFrames={120}>
  <Subtitle text="大家好，今天我们来聊聊AI编程的最新趋势" startFrame={0} />
</Sequence>

---

📐 Composition 最佳实践（30+ 条精选）

1. FPS 选择：
   - 社交媒体短视频: 30fps
   - 流畅动画/宣传片: 60fps
   - 电影感: 24fps

2. 分辨率：
   - 抖音/小红书: 1080x1920 (9:16)
   - YouTube/B站: 1920x1080 (16:9)
   - 微信公众号: 1080x1080 (1:1)

3. 动画缓动：
   - 入场: spring({ damping: 10 })
   - 退场: interpolate + ease-out
   - 持续: linear

4. 颜色管理：
   - 使用 Tailwind 色板保持一致性
   - 文字必须加 textShadow 保证可读性

5. 音频同步：
   - 用 <Audio/> 组件嵌入 BGM
   - 字幕时间轴精确到帧

6. 性能优化：
   - 复杂动画拆分为多个 Sequence
   - 避免每帧重计算，用 useMemo
   - 图片预加载到 public/ 目录

7. 字体：
   - 必须加载本地字体文件，不能依赖系统字体
   - 中文字体推荐: Noto Sans SC

8. 导出设置：
   - 预览: npx remotion preview
   - 渲染: npx remotion render
   - 编码: H.264 (兼容性好) / H.265 (体积小)

---

🚀 快速入口

"生成视频" → Remotion React 视频项目搭建
"做动画视频" → 数据动画/产品动画/字幕动画
"React视频" → Remotion Composition + Sequence
"把图表做成视频" → interpolate + spring 驱动图表动画
"产品演示视频" → 多场景 Composition + BGM + 字幕
"数据动画" → 柱状图/折线图逐帧动画
"字幕视频" → 逐字出现/卡拉OK字幕效果

---

🆚 与现有 Skill 的关系

Skill	关系	场景对比
html-ppt-skill	互补	html-ppt 是交互式演示文稿，本 Skill 是视频导出
diagram-design	互补	diagram-design 是静态图表（SVG），本 Skill 是动态视频（MP4）
web-artifacts-builder	互补	web-artifacts-builder 是复杂 Web 应用，本 Skill 是视频渲染
frontend-design	前置	frontend-design 定视觉方向，本 Skill 执行视频编码

最佳实践链：

数据/内容 → diagram-design（静态图表设计）
  → remotion-video（动态视频化）
  → 导出 MP4 → 社交媒体发布

---

"视频是时间的艺术。Remotion 让你用代码精确控制每一帧。"