用 React 创建视频的框架

以编程方式
创建视频

Remotion 让你使用 React 组件、Web 技术和编程的力量,以前所未有的方式制作动态视频内容。

// 使用 React 组件定义视频场景
import { useCurrentFrame, interpolate } from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(
    frame, [0, 30], [0, 1]
  );

  return (
    <div style={{ opacity }}>
      Hello, Remotion!
    </div>
  );
};
CSS Canvas SVG WebGL React TypeScript FFmpeg Node.js CSS Canvas SVG WebGL React TypeScript FFmpeg Node.js
核心优势

为什么用 React 创建视频?

结合 Web 技术的表现力、编程的灵活性和 React 生态的强大能力。

Web 技术

使用所有你熟悉的 CSS、Canvas、SVG、WebGL 等 Web 技术来构建视觉效果,无需学习专有工具。

编程驱动

使用变量、函数、API、数学和算法来创建传统视频编辑器无法实现的全新效果。

React 生态

可重用组件、强大的组合模式、快速刷新和丰富的 NPM 包生态系统,让视频制作如虎添翼。

案例展示

用 Remotion 创造

从个人项目到知名科技频道,开发者正在用 Remotion 制作令人惊叹的视频。

Fireship 视频

"这个视频是用代码制作的"

— Fireship

GitHub Unwrapped

GitHub Unwrapped

个性化年度开发回顾

快速开始

一行命令,开启创作

确保已安装 Node.js,然后在终端中输入以下命令即可创建你的第一个 Remotion 项目。

Terminal
$ npx create-video@latest