# Remotion Video > Remotion React视频生成器：用React代码编写、渲染和导出视频。当用户说'生成视频'、'做动画视频'、'React视频'、'把图表做成视频'、'产品演示视频'、'数据动画'、'字幕视频'时触发。核心特点：React组件化视频、30+composition最佳实践、FFmpeg导出、程序化视频生成。 - Skill: `gaoqiongxie/remotion-video` (Agent Skill) - Install (CLI): `npx skillmds@latest add gaoqiongxie/remotion-video` - Raw SKILL.md: https://api.skillmd.com/api/skills/gaoqiongxie/remotion-video/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: gaoqiongxie (https://skillmd.com/u/gaoqiongxie) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/gaoqiongxie/remotion-video --- > **来源**: 改编自 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 输出**： ```tsx // 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 ( {/* 标题 */} 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% ); } // 注册 Composition // src/index.tsx import { Composition } from "remotion"; import { SalesGrowth } from "./compositions/SalesGrowth"; export const RemotionRoot = () => ( <> ); ``` **渲染命令**： ```bash npx remotion render src/index.tsx SalesGrowth output.mp4 ``` --- ### 示例 2：产品演示视频（带字幕和 BGM） ```tsx import { Audio, Sequence, useCurrentFrame, interpolate } from "remotion"; import { AbsoluteFill, Img, Text } from "remotion"; export function ProductDemo() { const frame = useCurrentFrame(); return ( {/* BGM */} ); } ``` --- ### 示例 3：字幕视频（口播/播客转视频） ```tsx // 字幕逐字出现效果 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 ( {visibleText} | ); } // 使用 ``` --- ## 📐 Composition 最佳实践（30+ 条精选） ```markdown 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. 音频同步： - 用