mcpField
R
remotion-layout-debugging

remotion-layout-debugging

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

关于 remotion-layout-debugging

面向 Remotion 项目的 Claude 技能，用于诊断和修复动画中的布局不稳定，重点是保持动态文本与画面元素在逐帧渲染时位置一致。

主要功能

  1. 01定位动画中的布局跳动
  2. 02固定容器尺寸并分离动画层
  3. 03检查逐帧位置与渲染一致性

适用场景

  1. 01修复打字动画导致的字幕卡片跳动
  2. 02排查动画卡片或场景元素意外位移

安装

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

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

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

详细介绍

Remotion 布局调试

概述

此技能可帮助 Claude 诊断并解决 Remotion 项目中的布局不稳定问题。

工作流重点包括：

  • 修复文本跳动
  • 防止布局偏移
  • 稳定动画元素
  • 调试尺寸调整问题
  • 保持视觉一致性
  • 维持确定性的渲染行为

目标是确保动画在播放过程中即使动态内容发生变化，视觉上仍然稳定、专业。

设置

开始之前：

  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 知识
  • Browser DevTools

推荐扩展：

  • ES7 React snippets
  • Prettier

所需输入

  • Remotion 项目
  • 可复现的布局问题
  • 动画组件
  • 文本或字幕系统
  • 定位不稳定的视频场景

可选：

  • 动效参考
  • 现有动画逻辑
  • 场景计时信息

何时使用此技能

遇到以下情况时使用此技能：

  • 动画过程中，文本发生跳动
  • 字幕尺寸不可预测地变化
  • 动画卡片位置偏移
  • 打字效果导致布局不稳定
  • 场景元素闪烁或意外移动
  • 不同帧的渲染结果不一致
  • 动态内容变化导致不稳定

何时不使用

以下情况不要使用此技能：

  • 静态布局
  • 非动画 UI 调试
  • 后端问题
  • 传统的纯 CSS 工作流
  • 非视觉渲染问题

使用示例

修复字幕卡片在文本逐字显示时垂直跳动的问题。

Claude 应当：

  1. 检测布局不稳定问题
  2. 找出动态文本长度导致尺寸变化的原因
  3. 渲染不可见的完整文本，以保持容器高度
  4. 单独叠加动画文本
  5. 保持各帧中的定位稳定
  6. 验证渲染一致性

最终结果应当：

  • 消除布局跳动
  • 保持动画流畅
  • 保持定位稳定
  • 提高可读性
  • 确保逐帧渲染一致

布局稳定性的核心原则

1. 防止动态调整尺寸

动画过程中动态调整尺寸是导致布局不稳定的最常见原因之一。

示例：

  • 打字效果改变容器高度
  • 字幕意外扩展
  • 动画卡片在不同帧之间调整尺寸

Claude 应主动检测：

  • 尺寸变化
  • 不稳定的容器
  • 间距变化
  • 触发重新排版的动画

2. 保持布局尺寸稳定

稳定的容器可以防止视觉跳动。

推荐策略：

  • 在背景中渲染不可见的完整文本
  • 保持容器的最大尺寸
  • 单独叠加动画内容

示例方法：

Invisible Full Text
↓
Animated Visible Text Overlay

这样可以确保：

  • 高度稳定
  • 宽度稳定
  • 定位可预测
  • 动画流畅

3. 将布局与动画分离

动画逻辑不应直接控制布局结构。

推荐做法：

  • 固定布局尺寸
  • 独立设置叠加层动画
  • 将变换与容器隔离

避免：

  • 在动画过程中调整父容器尺寸
  • 动态改变布局流
  • 使用不受控的缩放系统

4. 保持运动效果具有确定性

所有运动效果都应：

  • 基于帧
  • 可预测
  • 同步
  • 渲染安全

推荐系统：

  • useCurrentFrame()
  • spring()
  • 插值

避免：

  • 浏览器计时系统
  • 不受控的过渡效果
  • 依赖布局的动画

5. 逐帧验证

快速播放时，布局问题往往难以察觉。

Claude 应检查：

  • 单帧画面
  • 字幕定位
  • 容器尺寸
  • 动作同步

逐帧验证有助于提升：

  • 渲染一致性
  • 视觉精致度
  • 动画稳定性

工作流

1. 重现问题

首先，确保能够稳定地重现布局不稳定问题。

确定：

  • 跳动发生的时机
  • 导致不稳定的组件
  • 触发问题的是文本还是动态效果

常见症状：

  • 文本跳动
  • 字幕闪烁
  • 卡片尺寸变化
  • 过渡效果不稳定

2. 诊断根本原因

检查以下情况：

  • 文本尺寸变化
  • 容器动态调整大小
  • 布局重排
  • 变换不稳定
  • 定位逻辑错误

确定以下问题：

  • 动画是否影响布局
  • 布局是否影响动画
  • 时序是否导致不稳定

3. 稳定容器尺寸

保持布局尺寸稳定。

推荐修复方法：

  • 渲染不可见的完整文本
  • 保持固定尺寸
  • 将动画内容单独叠加

这样可以避免：

  • 垂直跳动
  • 水平尺寸变化
  • 文本重排
  • 间距不稳定

4. 隔离动画层

分离：

  • 布局结构
  • 动画叠加层
  • 变换
  • 字幕动态效果

结构示例：

Stable Container
↓
Invisible Placeholder
↓
Animated Text Overlay

这有助于提升：

  • 渲染稳定性
  • 调试清晰度
  • 动态效果的一致性

5. 验证动态效果系统

检查：

  • 帧同步
  • 弹簧效果
  • 插值范围
  • 变换稳定性

确保：

  • 移动平滑
  • 定位保持一致
  • 动画时序保持确定

6. 渲染并验证

导出前验证：

  • 逐帧一致性
  • 字幕可读性
  • 定位稳定性
  • 动画流畅度
  • 没有布局跳动

渲染输出：

npm run build

或：

npx remotion render

输出要求

最终输出应包含：

  • 稳定的动画布局
  • 流畅的字幕效果
  • 确定性的渲染
  • 一致的固定定位
  • 可用于生产环境的动画质量

工作流本身应保持：

  • 可复用
  • 模块化
  • 易于调试
  • 渲染安全

执行策略（适用于 AI Agent）

Agent 应：

  1. 主动检测不稳定问题
  2. 确定问题由布局还是动画导致
  3. 保持容器尺寸稳定
  4. 将布局结构与动画叠加层分离
  5. 逐帧验证渲染效果
  6. 确保渲染行为具有确定性

工作流应优先考虑：

  • 布局稳定性
  • 渲染一致性
  • 可读性
  • 动态效果流畅度
  • 专业的视觉质量

最佳实践

  • 保持容器尺寸稳定
  • 避免依赖布局的动画
  • 必要时使用不可见的占位内容
  • 将叠加层与布局结构分离
  • 逐帧验证动画
  • 保持字幕可读
  • 将变换与布局流隔离

备注

  • Remotion 的大多数布局问题都源于动态调整大小
  • 稳定的布局能显著提升感知质量
  • 渲染不可见的占位内容通常是最简洁的解决方案
  • 逐帧验证能及早发现问题
  • 确定性的布局能提升渲染可靠性

评论

支持 Markdown