mcpField
R
remotion-animation-rules

remotion-animation-rules

github.com/composio-community创意与媒体1448 次安装23 周前更新
代码仓库

关于 remotion-animation-rules

面向 Remotion 动画创作的 Claude 技能，指导使用 Remotion 原生的逐帧动画方式，适用于制作字幕、转场和动态图形，并强调确定性渲染与布局稳定。

主要功能

  1. 01使用 useCurrentFrame() 控制动画时间
  2. 02以 spring() 和 interpolate() 实现运动
  3. 03避免 CSS 过渡和浏览器计时
  4. 04验证字幕同步与逐帧稳定性

适用场景

  1. 01为视频制作逐帧同步的动画字幕
  2. 02构建可复用的场景动画与转场
  3. 03排查 Remotion 动画渲染不一致

安装

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

$npx skills add https://github.com/composio-community/opencode-skills --skill remotion-animation-rules

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

详细介绍

Remotion 动画规则

概述

此技能可帮助 Claude 遵循 Remotion 原生的渲染和动画原则，创建技术上正确的动画。

与传统的前端动画工作流不同，Remotion 完全依靠确定性的逐帧渲染，而非浏览器驱动的动画系统。

此工作流重点关注：

  • 正确使用 useCurrentFrame()
  • 由弹簧驱动的运动系统
  • 确定性渲染
  • 布局稳定性
  • 基于帧的计时
  • 避免使用不受支持的动画模式

目标是确保动画流畅、稳定、渲染安全，并在所有帧中保持一致。

设置

开始之前：

  1. 安装 Node.js： https://nodejs.org

  2. 验证安装：

node -v
npm -v
  1. 创建 Remotion 项目：
npm init video
  1. 启动开发服务器：
npm run dev
  1. 在 VS Code 中打开项目。

推荐工具：

  • VS Code
  • Remotion Preview
  • React 知识
  • Prettier 扩展

所需输入

  • 动画概念
  • 视频时长
  • 场景结构
  • 资源：
    • 文本
    • 字幕
    • 图片
    • 音频

可选：

  • 品牌指南
  • 现有动态效果参考
  • 分镜脚本

何时使用此技能

在以下情况下使用此技能：

  • 创建 Remotion 动画
  • 构建字幕系统
  • 实现转场效果
  • 设计动态图形
  • 创建可复用的动画逻辑
  • 调试不稳定的动画
  • 优化渲染一致性

何时不使用

以下情况请勿使用此技能：

  • 基于 CSS 的动画系统
  • 浏览器驱动的转场工作流
  • 静态设计任务
  • 不使用 React 工作流的传统视频编辑器

使用示例

为创业公司发布视频创建动态字幕。

Claude 应该：

  1. 使用 useCurrentFrame() 处理所有动画计时
  2. 使用弹簧物理效果实现字幕运动
  3. 完全避免 CSS 转场
  4. 逐帧同步字幕显示
  5. 保持布局尺寸稳定
  6. 确保导出时渲染保持确定性

最终输出应：

  • 渲染一致
  • 避免计时故障
  • 保持动作流畅
  • 防止布局不稳定
  • 确保可安全导出

Remotion 核心原则

1. 所有内容都应基于帧

在 Remotion 中，动画计时应始终由当前帧决定。

推荐的 API：

  • useCurrentFrame()
  • interpolate()
  • spring()

示例：

const frame = useCurrentFrame();

这可确保：

  • 确定性渲染
  • 精确同步
  • 导出一致性

避免使用：

  • setTimeout
  • 浏览器计时系统
  • 不受控的动画

2. 使用弹簧物理效果实现运动

应尽可能使用弹簧驱动的系统来实现运动。

推荐方式：

spring({
  frame,
  fps,
  config: {
    damping: 200,
  },
});

弹簧系统可提供：

  • 更流畅的缓动效果
  • 可预测的运动
  • 自然的运动表现

适用场景：

  • 缩放
  • 淡入
  • 字幕显示
  • 滑动动画
  • 转场

避免使用：

  • CSS 缓动转场
  • 不受控的插值
  • 浏览器驱动的动画计时

3. 完全避免 CSS 转场

在 Remotion 工作流中，CSS 转场并不可靠。

错误方式：

transition: all 0.3s ease;

CSS 转场会导致的问题：

  • 渲染不一致
  • 导出结果不匹配
  • 计时不稳定
  • 行为取决于浏览器

推荐方式：

  • 直接根据帧值计算运动
  • 使用插值或弹簧效果

4. 控制布局稳定性

Remotion 中一个常见问题是动画期间布局发生偏移。

问题示例：

  • 播放打字动画时文本跳动

推荐修复方法：

  • 在背景中渲染不可见的完整文本
  • 单独叠加动画文本
  • 保持布局尺寸稳定

Claude 应主动防止：

  • 文本重新排版
  • 动画期间尺寸改变
  • 定位不稳定
  • 布局动态偏移

稳定的布局有助于：

  • 提高渲染一致性
  • 提高字幕可读性
  • 让动画更加流畅

5. 保持动画具有确定性

每次渲染时，动画的表现都应完全一致。

运动系统应：

  • 使用可预测的时序
  • 避免随机性
  • 保持由帧控制
  • 与音频准确同步

确定性渲染有助于提升：

  • 导出可靠性
  • 调试效率
  • 同步效果
  • 生产稳定性

工作流

1. 定义动画结构

首先确定：

  • 视频时长
  • 场景划分
  • 字幕时序
  • 转场需求

将动画组织为可复用的场景组件。

结构示例：

scenes/
  Intro.tsx
  Features.tsx
  CTA.tsx

2. 实现帧逻辑

在场景中使用 useCurrentFrame()。

示例：

const frame = useCurrentFrame();

所有动画状态都应根据帧的推进来计算。

3. 添加运动系统

使用：

  • spring()
  • interpolate()

推荐的动画效果：

  • 平滑移动
  • 可控缩放
  • 定时转场
  • 字幕同步

避免使用：

  • CSS 动画系统
  • 由浏览器控制的时序
  • 不受控的缓动

4. 验证布局稳定性

检查是否存在：

  • 文本跳动
  • 尺寸变化
  • 字幕偏移
  • 位置不稳定

渲染前先解决不稳定问题。

5. 渲染最终视频

导出前验证：

  • 时序一致性
  • 动作流畅度
  • 字幕同步
  • 布局稳定性

渲染输出：

npm run build

或：

npx remotion render

推荐的导出格式：

  • MP4
  • 针对平台优化的设置

输出要求

最终输出应包含：

  • 流畅的基于帧的动画
  • 确定性渲染
  • 稳定的布局
  • 同步的字幕
  • 可用于生产的视频导出

工作流本身应保持：

  • 可复用
  • 模块化
  • 易于维护
  • 渲染安全

执行策略（适用于 AI Agent）

Agent 应：

  1. 仅使用 Remotion 原生动画系统
  2. 逐帧控制所有动作
  3. 避免使用不受支持的浏览器动画模式
  4. 保持确定性的渲染行为
  5. 主动检测并防止布局不稳定
  6. 在导出前验证动画一致性

工作流应优先优化：

  • 渲染一致性
  • 时序精度
  • 布局稳定性
  • 动作流畅度
  • 导出可靠性

最佳实践

  • 使用 useCurrentFrame() 控制所有时序
  • 优先使用弹簧动画，而非手动缓动
  • 保持场景模块化
  • 逐帧验证动画
  • 避免依赖布局的运动
  • 保持字幕系统稳定
  • 在不同场景中复用运动模式

注意事项

  • useCurrentFrame() 是 Remotion 工作流的核心
  • 切勿依赖 CSS 过渡
  • 弹簧系统可实现更自然的动作
  • 稳定的布局能显著提升渲染质量
  • 确定性渲染对于专业视频工作流至关重要

评论

支持 Markdown