Remotion CN - React 视频创建框架 Remotion 是一个用 React 创建视频的强大框架。支持多种输出格式（MP4、WebM、GIF），可以在服务器端渲染视频。

功能 视频创建 多输出格式 - MP4、WebM、GIF、PNG 序列 React 编程 - 用 JSX 创建动画 高性能 - 服务器端渲染，比 Canvas 更快 代码重用 - 组件化开发，可复用 动画类型 变换 - 缩放、旋转、透明度 时间轴 - 多轨同时播放 音频 - 音轨支持 3D - 基础 3D 变换（CSS 3D）

安装 创建新项目 # 使用 create-video npx create-video@latest my-video cd my-video # 或使用 Vite npx create-vite@latest my-video cd my-video npm install remotion 手动安装 npm install remotion @remotion/cli --save-dev

快速开始 示例 1：Hello World 视频 // src/App.tsx import { Composition } from 'remotion'; export const RemotionRoot: React.FC = () => { return ( ); }; export default RemotionRoot; // src/HelloWorld.tsx import { AbsoluteFill } from 'remotion'; export const HelloWorld: React.FC = () => { return (

); }; 渲染视频 # 渲染为 MP4 npx remotion render src/App.tsx out/video.mp4 # 在浏览器中预览 npx remotion studio src/App.tsx 示例 2：动画文本 import { AbsoluteFill, useCurrentFrame, useVideoConfig, Video } from 'remotion'; export const TextSlide: React.FC = () => { const frame = useCurrentFrame(); return ( ); }; export default Video(TextSlide);

高级功能

• 媒体导入

import { useVideo } from '@remotion/use-video'; import { staticFile } from 'remotion'; export const MyVideo: React.FC = () => { const video = useVideo(staticFile('video.mp4')); return (