mcpField
R
remotion

remotion

github.com/oakoss创意与媒体20124 次安装11 周前更新
代码仓库

关于 remotion

Remotion 是基于 React 组件创建视频的工具包，面向制作动画或数据驱动视频的开发者。它以帧为基础控制动画，并支持媒体、字幕、转场和渲染。

主要功能

  1. 01基于 React 组件的视频合成
  2. 02使用插值和弹簧的逐帧动画
  3. 03场景编排与转场
  4. 04音频、视频、图片和 GIF 处理
  5. 05字幕与文本动画
  6. 06视频渲染和动态元数据

适用场景

  1. 01用 React 组件创建动画视频
  2. 02制作带转场和音轨的多场景视频
  3. 03生成字幕和逐词高亮效果
  4. 04按内容动态设置时长并渲染视频

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oakoss/agent-skills --skill remotion

安装后在 Claude Code 中输入/remotion确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
advanced-features.md
animations-and-timing.md
captions-and-text.md
compositions-and-sequencing.md
media-and-assets.md
transitions.md

详细介绍

Remotion

概述

Remotion 支持使用 React 组件以编程方式创建视频。合成定义可渲染的视频，并明确指定宽度、高度、fps 和时长。所有动画都必须由 useCurrentFrame() 驱动——禁止使用 CSS 动画和 Tailwind 动画类，因为它们会导致渲染瑕疵。在 Remotion 合成、动画、音频、字幕、转场、媒体处理或渲染场景中使用此技能。不适用于通用 React UI 开发。

快速参考

模式API / 方法要点
基本动画useCurrentFrame() + interpolate()始终使用 extrapolateRight: 'clamp' 进行限制
弹簧动画spring({ frame, fps })使用 { damping: 200 } 实现平滑且无弹跳的运动
合成<Composition id, component, durationInFrames, fps, width, height>始终设置明确的尺寸
动态元数据<Composition> 上的 calculateMetadata在渲染前设置时长、尺寸和 props
序列<Sequence from, durationInFrames>useCurrentFrame() 返回本地帧（从 0 开始）
系列使用 <Series> 和 <Series.Sequence>按顺序播放；使用负偏移实现重叠
转场<TransitionSeries> 配合 fade()、slide()、wipe()总时长 = 场景时长之和减去转场时长
音频/视频来自 @remotion/media 的 <Audio> / <Video>对本地资源使用 staticFile()
字幕createTikTokStyleCaptions()通过 page.tokens 按词元高亮单词
图像来自 remotion 的 <Img>绝不使用原生 <img> 或 Next.js <Image>
GIF来自 remotion 的 <AnimatedImage>与时间轴同步；使用 playbackRate 控制速度
字体@remotion/google-fonts 或 @remotion/fonts在顶层调用 loadFont()；字体加载完成前会阻塞渲染
3D 内容来自 @remotion/three 的 <ThreeCanvas>必须设置 width/height；禁止使用 R3F 的 useFrame()
文本测量来自 @remotion/layout-utils 的 measureText()、fitText()先加载字体；测量和渲染时的属性必须一致
参数<Composition schema> 上的 Zod 架构顶层必须是 z.object()；需要使用准确的 Zod 版本（查看 Remotion 文档）
透明视频--pixel-format=yuva420p --codec=vp9浏览器使用 WebM；编辑软件使用 ProRes 4444
地图配合 useCurrentFrame() 使用 Mapbox设置 interactive: false、fadeDuration: 0；使用 --gl=angle --concurrency=1 渲染

常见错误

错误正确做法
使用 CSS 动画或 setTimeout使用 interpolate() 和 useCurrentFrame() 创建与时间轴同步的动画
使用原生的 <img>、<video>、<audio> 标签使用 Remotion 提供的 <Img>、<Video>、<Audio>，以正确预加载媒体
将视频时长写死使用 calculateMetadata 根据内容动态设置时长
未指定合成的宽度和高度始终明确定义尺寸，避免渲染问题
使用 React Three Fiber 的 useFrame()在 <ThreeCanvas> 内使用 Remotion 的 useCurrentFrame()
忘记在序列上设置 premountFor始终预挂载序列，以便在播放前预加载组件
未限制 interpolate() 的输出范围设置 extrapolateRight: 'clamp'，防止数值超出目标范围
在 <ThreeCanvas> 中放置 <Sequence>，但未设置 layout="none"在 <ThreeCanvas> 内的任何 <Sequence> 上设置 layout="none"

委派

  • 查找可用的 Remotion 组件及其属性：使用 Explore Agent 在代码库中搜索合成定义和资源用法
  • 制作包含转场和音频的多场景视频：使用 Task Agent 逐步组合序列、转场和音轨
  • 规划包含动态数据的视频生成工作流：使用 Plan Agent 设计参数化合成和渲染工作流的架构

参考资料

  • 动画与计时 -- 插值、弹簧、缓动和由帧驱动的动画模式
  • 合成与序列编排 -- 定义合成、静帧、文件夹、序列、系列和剪辑
  • 媒体与资源 -- 音频、视频、图像、GIF、字体和静态文件处理
  • 字幕与文本 -- 转录、导入 SRT、TikTok 风格字幕和文本动画
  • 转场 -- 使用淡入淡出、滑动、擦除、翻转，以及时长计算来实现转场
  • 高级功能 -- 3D 内容、图表、地图、参数、透明视频和 DOM 测量

评论

支持 Markdown