Communitygithub.com

hamgarian/remotion-product-motion

创建、修改或审核具有可读性的 Remotion 产品演示、应用展示和 UI 广告,包含有目的性的编排、真实的界面内容、确定性的动画以及可选的音效。

remotion-product-motion 是什么?

该技能专为使用 Remotion 框架制作高质量产品动画而设计。它提供了一套系统化的工作流程,包括:分析产品交互、规划镜头脚本、编写确定性动画以及最终输出审核。技能强调“可读性”——即每个动作必须清晰呈现其因果关系,并引导观众注意力。技能支持静帧、无声电影、克制过渡和连续摄像机运动等多种风格,并提供了对编排、确定性 UI、音效与渲染的专项参考指南。此外,技能包含一个轻量工具脚本 `motion.mjs` 用于处理时间曲线和相机轨迹,但该脚本非必须,技能可独立于任何仓库使用。最终交付要求验证文本、真实内容、光标对齐、裁剪、资产就绪性及音效质量,并报告运行命令与未解决缺陷。

兼容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/hamgarian/remotion-product-motion/tree/HEAD/skills/remotion-product-motion

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Remotion 产品动画

将产品交互转化为清晰的视觉叙事:建立上下文,展示一个动作,使其结果可读,然后将注意力传递给下一个动作。根据需求调整动画风格。静态镜头、无声电影、克制的过渡以及连续的摄像机移动都是有效选择。

确立影片

确定受众、产品成果、时长、尺寸、所需的画面以及提供的素材。明确记录关于声音、摄像机运动、原生 UI 行为以及字幕的显式选择。解决缺失的关键要素;为附属样式选择合理的默认值。

在规划声明之前,先检查实际的界面和可用内容。保留可识别的字体、比例、颜色、标签和交互行为。使用经授权的真实素材;对合成演示数据做标记。记录宣称数量的来源和截图日期、计数的单位、过滤器以及去重方法。代表性子集不能证明全目录声明的有效性。

编写一个紧凑的镜头计划,包含每个镜头的帧区间、聚焦目标、动作/结果、可读区间、过渡以及可选的声音提示。包含结尾。当同时要求横屏和竖屏画幅时,分别规划;仅靠裁剪可能会丢失控件或标签。

选择相关指南

  • 当规划摄像机运动、缓动、重叠过渡,或调整布局和光标目标时,阅读编排。
  • 当实现动画、原生 CSS 行为、运动模糊或离散屏幕之间的硬切时,阅读确定性 UI。
  • 当放置音频、优化导出或验证交付影片时,阅读声音与渲染。其视觉验证部分同样适用于无声作品。

在需要时,使用 scripts/motion.mjs 进行可复用的数学计算。它无依赖;可以复制或通过适当的相对路径导入目标项目。在集成之前,检查其导出的功能和参数约定。progress、expoIn、expoOut 和 track 处理时序;cameraAt 和 project 帮助评估合成的取景;selectState 选择剪切点;cueStartFrame 和 duckGain 辅助音频放置。该辅助文件是可选的,并且不会创建 Remotion 项目。本技能独立于任何仓库演示。

构建与检查

使动画成为帧和固定输入的纯函数。将离散屏幕的选择保留在时间采样之外,将连续动画钩子放在时间采样之内,并将音频放在时间采样之外。有关此区别及其交叉淡入淡出例外情况,请参阅确定性参考文档。

首先实现一个代表性的动作和交接。在重复模式之前,检查在可读区间、速度峰值、剪切边界和目标位置处的渲染帧。当动作不清晰时,改变时序、阶段或层级;装饰无法弥补缺失的因果关系。

摄像机运动应揭示上下文或引导注意力。如果连续移动符合需求,则对独立计时的平移和推拉轨道进行重叠,并检查其投影结果。移动父级并不能证明其焦点对象在屏幕上移动。当符合需求时,选择安静或完全静止的定格。颗粒感、呼吸感、抖动和永久运动都是可选的美学决定。

在任何布局编辑之后,重新评估后续流程、摄像机目标、光标命中点、滚动边界和取景。仅凭成功渲染并不能验证它们。

交付证据

使用项目固定的工具链渲染所需格式。检查风险过渡周围的连续帧,以及在播放可用的情况下以正常速度检查编码结果。验证文本、真实内容、光标对齐、裁剪、素材就绪性、时长和结局。对于声音,区分测量信号检查与实际试听。

报告输出路径、实际运行的命令/检查、素材限制以及未解决的缺陷。明确说明何时无法进行实时播放或音频试听。联系表支持视觉审查,但不能确定节奏或音频质量。仅在用户授权范围内外部发布或发送工作。

相关技能