X Motion
制作能够传达特定信息的动态影像。品味取决于上下文:一个安静的技术演示和一个活泼的音乐标识需要不同的决策。一个强大的渲染器并不保证良好的设计。作品的质量通过艺术指导、执行、观察和修改来获得。
这是一种原创的、可移植的动态设计方法,灵感来源于 LangChain 的文章 中关于设计智能体的讨论。它不依赖于 LangChain 代码或服务,也不暗示任何关联。
工作契约
- 遵循宿主项目的指示和用户的实际范围。此技能不授予发布、消费、调用模型、获取凭证或使用未经许可资产的权限。
- 在任意给定时刻,使用一个视觉主题和一个主导焦点。复杂性可以支持主题,但不得无意中与其竞争。
- 将字体、间距、图像处理、动态和声音作为一个系统来设计。不要用装饰来掩饰一个薄弱的想法,使其看起来复杂。
- 根据任务和可用环境选择工具。不需要特定的模型、框架或渲染引擎。
- 将技术证据与审美判断分开。切勿虚构品味评分、观众反应或认可。切勿在仅检查了静止帧的情况下声称观看了视频。
- 保持资产本地化并明确其来源。锁定依赖项。除非项目特意要求,否则将生成的渲染文件排除在版本控制之外。
选择最小可用的流程
小修改: 对于文案修正、时间调整、资产替换或孤立的缓动修正,可以跳过新的简报、故事板和动态分镜。保留已批准的方向;检查受影响的节拍及其相邻节拍,重新渲染,并运行相关检查。如果更改改变了信息、层次结构或叙事,则升级到完整流程。
新构图或实质性重新设计: 遵循以下阶段。根据任务规模调整工件大小;一个六秒钟的片头不需要制作圣经。如果缺少关键意图,请提出一个有针对性的问题。当无法提问时,标记一个保守的假设,并避免进行不可逆的工作。
1. 简报 → 视觉主题
确定受众、预期收获、观看环境、时长、宽高比、交付物、必需的文案/资产、品牌约束、可访问性需求,以及声音是否可以传达意义。将硬性要求与偏好分开标记。
以以下形式撰写一个主题:
对于 [受众],通过 [视觉机制] 让 [想法] 感觉 [特定品质],以便他们理解或做到 [结果]。
命名组织隐喻、主导对象、字体角色和动态逻辑。像“高端、电影感、干净”这样的列表不是方向。解释哪些选择使这些词语变得具体可感。使用参考来识别原则,而非复制其他作品的标识。
阅读 艺术指导 以了解简报的解析、参考分析和连贯的视觉语言。
2. 故事板 → 可读的论点
在打磨画面之前先规划节拍。为每个节拍记录:
| 时间范围 | 观众学到什么 | 焦点 / 关键帧 | 转场及其原因 | 音频提示 |
|---|---|---|---|---|
| 开始-结束 | 一条信息 | 对象和层次结构 | 发生了什么变化,以及原因 | 事件或有意的静音 |
绘制或渲染带有真实文案和逼真资产比例的示例帧。给予足够的阅读和识别时间;不要习惯性地均匀分布每个节拍。确认开场的承诺、节拍之间的因果联系以及最终收获。在需要时,在昂贵的制作之前,与人类确认关键的文案或方向。
在锁定构图或文字时间之前,阅读 字体排印。
3. 动态分镜 → 低成本测试时间
构建粗糙的定时帧、区块或低细节的动态。仅在使用合法且明确标记的情况下使用临时声音。以预期速度测试完整运行时间,而不仅仅是通过拖动。
检查注意力是否与信息同时到达,文字是否可读,以及结尾是否有足够的空间收尾。在此处修正结构。将方向上的不确定性暴露出来,而不是通过打磨将其掩盖。
阅读 动画与摄像机 以了解时间设计 and 确定性场景构建;当声音是作品的一部分时,阅读 音频。
4. 制作 → 有意图的执行
使用最终的字体、资产、光照或图形处理、运动曲线、转场和声音来完善已批准的节拍。保留主题。每个添加的效果必须有明确的任务:揭示、连接、强调、引导或解决。如果做不到其中任何一点,则移除它或证明其表达角色的合理性。
可选 HTML 渲染器契约
当使用 X Motion HTML 渲染器时,每个合成暴露:
window.motion = { width: 1920, height: 1080, duration: 8, fps: 30, poster: 5.5 };
window.renderFrame = function (tSeconds) {
// 从该时间戳和固定场景数据设置每个动画属性。
// 重复调用,包括无序调用,产生相同的帧。
};
window.renderAudio = async function ({ sampleRate }) {
// 可选。在 OfflineAudioContext 中构建配乐并返回其 AudioBuffer。
};
这些数字是说明性的,并非设计默认值。宽度和高度以像素为单位;duration、poster 和 tSeconds 以秒为单位;fps 是帧率。poster 是可选的,表示用作缩略图的帧。将它们与简报匹配。
- 直接从提供的时间戳计算状态。不使用挂钟时间、自主 CSS 动画、累积模拟步骤、网络资产或非种子随机数。
- 在捕获前加载并解码本地资产和字体。在
renderFrame返回后,不要引入异步帧突变;验证宿主渲染器的就绪机制。 - 定义节拍边界和活动区间之外的行为。测试重复的时间戳和反向查找。
- 帧函数定义视觉效果,而非音频播放。声音仅来自
renderAudio:一个或两个通道,离线渲染,每次调用都相同。HTML 媒体播放永远不会被捕获。
首先解析此技能目录的实际位置,遵循任何安装符号链接进入完整的 X Motion 克隆。仓库根目录是相对于已解析的 skills/x-motion 目录的 ../..,而不是相对于用户当前工作目录。在执行这些命令之前,切换到该仓库根目录;下面的合成路径是相对于它的。
导出故事板 PNG 和 manifest.json(默认无视频)。添加 --times 0.5,2,4.25 来选择静帧,添加 --audio 来同时导出带有响度数据的 sound.wav:
node scripts/render.mjs path/to/scene.html --out renders/name-storyboard --audio
导出故事板 PNG、全帧、poster.webp、film.mp4(当存在 renderAudio 时,配乐混音为 AAC 格式)和 manifest.json:
node scripts/render.mjs path/to/scene.html --out renders/name-video --video
为每个修订版使用一个全新的输出目录。在报告成功之前,检查 manifest.json 和实际输出:它记录了帧确定性检查、音频确定性检查、综合响度、真实峰值和裁剪样本。视频编码需要 ffmpeg。在其他宿主中,保留确定性的时间戳语义并调整导出命令。
5. 审阅 → 修订 → 交付
当反馈提及已发布的视频 ID 时,阅读 作品集反馈。解析确切的影片,保留其身份和反馈,并在新的关联 ID 下发布修订版。继承范围性的经验教训,而不是将每个剪辑特定的指令作为通用规则。
检查渲染后的工件,而不仅仅是源代码。查看故事板的构图,播放视频的节奏;如果存在导出的音频,则收听它。如果无法播放或收听,请准确说明哪些部分尚未审核。
使用 审阅与交付 将可衡量的失败与主观问题分开。首先解决影响最大的问题。将审阅/修订循环限制为每个方向三次迭代。如果方向仍未解决,停止,解释相互冲突的关注点,并请人类在选择或澄清后再继续。技术通过并非美学批准。
交付工件位置、源代码位置、导出规格、验证证据、已知限制和未解决的批准问题。报告您实际观察到的情况。未经授权,不得对外发布。
参考地图
仅加载当前阶段所需的参考: