remotion-best-practices

remotion-best-practices 技能分析

技能链接： skills.sh/remotion-de...
安装量： 2827
分析日期： 2026-02-07

---

1. 技能用途

Remotion 是一个用 React 编写视频的框架。这个技能提供了 Remotion 开发的完整最佳实践指南，帮助开发者：

• 创建视频内容：用 React 组件编写视频、动画和特效
• 管理资源：导入图片、视频、音频、字体、GIF、Lottie 动画等
• 实现动画效果：帧驱动动画、弹簧动画、转场过渡
• 处理数据可视化：图表、地图、字幕等复杂内容
• 优化渲染流程：动态元数据计算、参数化视频、透明视频渲染

适用场景：

• 营销视频自动化生成
• 社交媒体内容批量制作
• 数据驱动的动态视频
• 程序化动画和特效

---

2. 目录结构

remotion-best-practices/
├── SKILL.md                    # 技能入口文件，概述所有规则
└── rules/                      # 35+ 个详细规则文件
    ├── 3d.md                   # Three.js / React Three Fiber 集成
    ├── animations.md           # 基础动画原理（帧驱动）
    ├── assets.md               # 静态资源导入管理
    ├── assets/                 # 资源子目录
    ├── audio.md                # 音频处理（导入、裁剪、音量、变速）
    ├── calculate-metadata.md   # 动态计算视频元数据
    ├── can-decode.md           # 视频解码能力检测
    ├── charts.md               # 数据图表可视化
    ├── compositions.md         # 组合、静态图、文件夹组织
    ├── display-captions.md     # 字幕显示
    ├── extract-frames.md       # 视频帧提取
    ├── fonts.md                # Google/本地字体加载
    ├── gifs.md                 # GIF 同步播放
    ├── images.md               # 图片组件使用
    ├── light-leaks.md          # 光漏叠加效果
    ├── lottie.md               # Lottie 动画集成
    ├── maps.md                 # Mapbox 地图动画
    ├── measuring-dom-nodes.md  # DOM 元素测量
    ├── measuring-text.md     # 文本尺寸计算
    ├── parameters.md           # Zod 参数化视频
    ├── sequencing.md           # 序列延迟/裁剪模式
    ├── subtitles.md            # 字幕系统入口
    ├── tailwind.md             # TailwindCSS 集成
    ├── text-animations.md      # 文字动画
    ├── timing.md               # 插值曲线和弹簧动画
    ├── transcribe-captions.md  # 语音转字幕
    ├── transitions.md          # 场景过渡效果
    ├── transparent-videos.md   # 透明视频渲染
    ├── trimming.md             # 动画裁剪模式
    └── videos.md               # 视频嵌入处理

---

3. 作用机制分析

3.1 核心方法论

帧驱动动画系统

所有动画必须使用 useCurrentFrame() 钩子驱动，禁止使用 CSS 动画/过渡：

import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

// 用秒计算，转换为帧
const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
  extrapolateRight: 'clamp',
});

关键原则：

• 动画以帧为单位计算（时间 × FPS）
• interpolate() 实现线性插值
• spring() 实现自然弹簧动画
• CSS 动画/Tailwind 动画类被禁止（无法正确渲染）

3.2 提示词引导机制

结构化规则调用

SKILL.md 作为入口，引导 AI 按需加载特定规则：

1. 场景触发：处理 Remotion 代码时自动激活
2. 按需引用：通过相对路径链接加载具体规则文件
3. 领域细分：字幕、3D、音频等各自独立文件

规则组织逻辑：

• 基础能力：animations, timing, compositions
• 媒体资源：images, videos, audio, gifs, fonts, assets
• 高级功能：3d, charts, maps, lottie, light-leaks
• 工具方法：measuring-text, extract-frames, can-decode
• 工作流：transitions, sequencing, trimming, parameters

3.3 代码示例驱动

每个规则文件采用文档即代码模式：

---
name: timing
description: Interpolation curves in Remotion
metadata:
  tags: spring, bounce, easing, interpolation
---

• Frontmatter：声明规则名称、描述、标签
• 代码块：提供可直接使用的代码示例
• 约束声明：明确禁止的做法（如 CSS 动画）

3.4 关键模式示例

动态元数据计算

const calculateMetadata: CalculateMetadataFunction<MyProps> = async ({props}) => {
  const data = await fetch(`https://api.example.com/video/${props.videoId}`).then(r => r.json());
  return {
    durationInFrames: Math.ceil(data.duration * 30),
    props: { ...props, videoUrl: data.url },
  };
};

TransitionSeries 转场系统

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}><SceneA /></TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={fade()} timing={linearTiming({ durationInFrames: 15 })} />
  <TransitionSeries.Sequence durationInFrames={60}><SceneB /></TransitionSeries.Sequence>
</TransitionSeries>

---

总结

此技能通过模块化规则文件 + 代码示例驱动的方式，为 Remotion 开发提供了完整的领域知识库。其核心价值在于：

1. 标准化动画范式：强制帧驱动，避免 CSS 动画陷阱
2. 场景化知识组织：35+ 个规则覆盖从基础到高级的全场景
3. 可复用代码模板：每个规则提供即插即用的代码片段
4. 参数化视频支持：通过 Zod schema 实现动态内容生成

适合需要程序化视频生成 、批量内容生产 、数据驱动动画的开发场景。