冷静、精确的产品线图,采用 2:1 等距投影,恒定细线和弹性安定效果。
这是 motion-explainer 库中的一种风格。它与其他风格一样提供三个部分:style.json 清单、Remotion 引擎和 fframes 引擎。流水线技能(motion-explainer、motion-script、motion-storyboard、motion-build、motion-qa)均通过 $MOTION_STYLE 环境变量引用风格名称,因此切换风格时工作流中的其他部分无需改动。
何时使用
当需求符合以下风格特征时,请选择此风格。首先阅读 docs/style-guide.md:它是权威说明,本文件仅为索引。
风格特征
- 仅使用 2:1 等距投影。不使用其他透视。
- 在 1080 宽度下恒定 2.0px 细线,根据当前缩放比例缩小以确保线条不会变粗。
- 面填充为白色,使近处物体遮挡远处物体的线条。
- 圆角板片和板材具有可见厚度,分层堆叠,以及重复零件的网格(如按键、通风口、柱体、接口)。
- 每帧一个微小的深色点缀,不超过一个。动画按帧播放并带有弹性安定效果,否则保持静止。
调色板:背景 #ffffff,轮廓和边缘 #a4a4ac,内部及后退线条 #e0e0e4,面为白色,一个深色点缀 #2a2b36
工具包组件
Remotion 组件,可从 ../lib/<file> 导入(工具包会同步到每个项目的 src/lib/ 目录):
| 组件 | 说明 |
|---|---|
<IsometricGrid> | 淡色等距构造网格 |
<IsometricBlock x y w h d color> | 具有顶部、左侧和右侧面,且角度为正确 2:1 的块 |
<IsometricBanner text> | 细线横幅板 |
<IsometricCaptions text> | 深色标题条 |
没有孤立存在的元素
docs/style-guide.md 包含了经过测量的参考线宽和点缀规则。线宽不可协商;绘图前请先阅读。
引擎
| 引擎 | 路径 | 入口 |
|---|---|---|
| remotion | remotion/ | template/、kit/、sync_kit.sh、CATALOG.md、AGENT_BRIEF.md |
| fframes | fframes/ | Cargo.toml、src/(lib、tokens、kit、look、video、main)、tools/ff.sh |
已注册引擎:remotion、fframes。
搭建剧集
# 从库根目录,并已解析 MOTION_LIB
./core/new_episode.sh <series-dir> 01-slug Episode out-name --style isometric --engine remotion
./core/new_episode.sh <series-dir> 01-slug Episode out-name --style isometric --engine fframes
或者,在系列 SERIES.md / episode.json 中将风格命名为 "style": "isometric",然后让 motion_style_of 自动拾取。
此风格的 QA 检查
在每次联系单上检查以下项目,然后再宣布场景完成;motion-qa 中的其余检查表仍然适用。
- 每个形状都位于 2:1 等距轴线上;无透视,无 3/4 视图。
- 线宽恒定约 2px;近处面遮挡远处线条。
- 面为白色;背景为白色或声明的深色背景。
- 每帧恰好一个小深色点缀。
- 动画按帧播放并带有弹性安定效果,非双帧播放。
文件
docs/style-guide.mddocs/style-prompt.mdremotion/CATALOG.mdremotion/AGENT_BRIEF.mdstyle.json:清单(画布、引擎列表、文档路径、音频根目录)sample.png:一个代表性帧