remotion-videolisted
Install: claude install-skill ambin-d/ambin-skills
# Remotion Video
用 React 以编程方式创建 MP4 视频的框架。
## 核心概念
1. **Composition** - 视频的定义（尺寸、帧率、时长）
2. **useCurrentFrame()** - 获取当前帧号，驱动动画
3. **interpolate()** - 将帧号映射到任意值（位置、透明度等）
4. **spring()** - 物理动画效果
5. **<Sequence>** - 时间轴上排列组件
## 快速开始
### 创建新项目
```bash
npx create-video@latest
```
选择模板后：
```bash
cd <project-name>
npm run dev # 启动 Remotion Studio 预览
```
### 项目结构
```
my-video/
├── src/
│ ├── Root.tsx # 注册所有 Composition
│ ├── HelloWorld.tsx # 视频组件
│ └── index.ts # 入口
├── public/ # 静态资源（音频、图片）
├── remotion.config.ts # 配置文件
└── package.json
```
## 基础组件示例
### 最小视频组件
```tsx
import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
export const MyVideo = () => {
const frame = useCurrentFrame();
const { fps, durationInFrames } = useVideoConfig();
return (
<AbsoluteFill style={{ backgroundColor: "white", justifyContent: "center", alignItems: "center" }}>
<h1 style={{ fontSize: 100 }}>Frame {frame}</h1>
</AbsoluteFill>
);
};
```
### 注册 Composition
```tsx
// Root.tsx
import { Composition } from "remotion";
import { MyVideo } from "./MyVideo";
export const RemotionRoot = () => {
return (
<Composition
id="MyVideo"
component={MyVideo}
durationInFrames={150} // 5秒 @ 30fps
fps={30}
width={1920}
height={1080}
/>
);
};
```
## 动画技巧
### interpolate - 值映射
```tsx
import { interpolate, useCurrentFrame } from "remotion";
const frame = useCurrentFra