镜头构图 是做什么的？
布置画面并移动摄像机：网格系统、安全区域、焦点层次、负空间、视差分层，以及布局如何引导视线随时间变化。生成构图笔记、图层结构（背景/中景/前景）以及带有具体数字的摄像机运动方案。
何时使用
- 定义画面的布局、焦点和负空间。
- 规划元素进入/退出的方向和运动路径。
- 设计摄像机的推拉、平移、跟随和视差运动。
- 在 16:9、9:16 和 1:1 比例间适配同一构图，并保留安全区域。
决策树
你在布置什么？
├─ 静态画面的布局
│ └─ 设置网格 → 将焦点放置在三分法力量点上
│ → 排列层次（尺寸>对比度>颜色>位置）→ 预留负空间
├─ 元素进出方向
│ └─ 遵循阅读方向；从最近的边缘进入；缓出进入，缓入退出
│ （新内容 → 从右侧/下方进入；回退/撤销 → 反向操作）
├─ 深度感 / 摄像机运动
│ └─ 将画面分为 bg/mid/fg 三个运动层
│ → 每个节拍使用一个摄像机运动（推 | 平移 | 跟随 | 视差），缓入缓出
└─ 不同比例的同一构图（16:9 / 9:16 / 1:1）
└─ 以 16:9 为主版，焦点置于中央区域 → 为 9:16 重新堆叠（不要裁剪）
→ 确保关键内容在标题安全边距内
交叉参考 — 应用共享框架。 本技能是 animation-principles 的空间部分。请明确应用它们：
- 1/3 法则 (
animation-principles) 有两种形式，本技能从空间上使用两者：(a) 构图三分法 — 将焦点置于三分法力量点上（33%/67%）；(b) 距离限制 — 任何元素在一次移动中不应跨越超过画面 ~1/3，否则需要中间关键帧或缩放/不透明度变化，以保证入场可读性。 - 三个运动层 (
animation-principles：主要 / 次要 / 环境) 直接映射到深度：前景 = 主要（视线跟随的运动），中景 = 次要（主体 + 辅助反应），背景 = 环境（缓慢、低对比度的活动）。视差速度随角色调整。 - 在给摄像机运动编号之前，先确定三大支柱（情感意图 / 视觉叙事 / 运动工艺）和已选的运动个性 (
motion-art-direction) — 高级感需要缓慢的长推，活力感需要甩拍。
核心工作流
1. 建立网格
网格提供对齐和节奏。默认为横屏网页/视频采用 12 列网格（可均分为二、三、四、六份），带槽距和外边距。对于 1920px 宽的画面：外边距 80-120px，12 列，槽距 24-32px。
内容宽度 = 画面宽度 - 2 * 外边距
列宽 = (内容宽度 - (列数 - 1) * 槽距) / 列数
示例（1920 宽，外边距 100，槽距 24，12 列）：内容宽度 1720，列宽 = (1720 - 11*24)/12 = 121.3px。
基线网格（垂直节奏）采用 8px 作为标准间距单位；所有尺寸和间距都应该是 8 的倍数（8/16/24/32/48/64）以保持视觉一致性。
2. 放置焦点
使用三分法：将画面分成 3x3 网格；将主要主体放置在三分之一线或交点（“力量点”）上，不要放在正中心 — 除非作品有意使用对称来表达静止/正式。这些交点大致位于水平和垂直方向的 33%/67% 处。
按以下优先级构建视觉层次以引导视线：尺寸 > 对比度 > 颜色 > 位置。最大、对比度最高的元素首先吸引注意力。每个画面只建立一个主要焦点；次要元素起辅助作用，从不与之竞争。
3. 使用负空间创造节奏
不要填满画面。焦点周围充裕的负空间使其看起来高端且自信，并为运动留出呼吸空间。留白是活跃的构图元素，而非剩余空间。
4. 为深度和视差分层场景（bg / mid / fg）
将构图分为深度层：背景（最慢、最低对比度、通常去饱和/模糊）、中景（主体）、前景（最快、经过时可能模糊）。视差 = 以不同速度移动图层以模拟深度。
这些深度层就是将 animation-principles 的三个运动层投影到 Z 轴上——每一层的角色决定了它的速度、对比度以及获得的运动量：
| 深度 | 运动层 | 视差速度 | 对比度 / 焦点 | 包含内容 |
|---|---|---|---|---|
| 背景 | 环境 | 0.1–0.3x | 低，通常去饱和/模糊 | 天空、渐变、纹理、场景装饰 |
| 中景 | 次要 | 0.5–0.7x | 中等；辅助主体 | 主体的环境、辅助元素 |
| 前景 | 主要 | 1.0–1.5x | 主体清晰；前景道具经过时模糊 | 主体角色 + 最近的配件 |
前景速度可超过 1.0 以显得非常接近。主要运动是视线跟随的运动；永远不要给两个层分配竞争的主要运动。
5. 摄像机语言（适用于 2D 和 3D）
- 推/拉 — 缩放靠近或远离主体（轨道车）。建立亲密感或揭示上下文。800-2000ms，缓入缓出。
- 平移/倾斜/移动 — 在场景中移动画面。揭示空间，跟随动作。
- 跟随 — 保持移动主体在画面内（通常略微偏离中心，为运动留出空间）。
- 视差 — 分层移动以体现深度。
一个镜头，一个意图。 不要同时推+平移+旋转 — 组合运动显得混乱。选择服务于该节拍的单一运动。内联时间关键点：摄像机运动使用缓入缓出（cubic-bezier(0.65, 0, 0.35, 1)）；永远不要使用 linear（持续循环除外）；速度越慢越有电影感。
6. 进出方向承载意义
遵循阅读方向的运动（在 LTR 语言环境中从左到右、从上到下）感觉自然流畅；反向运动制造紧张感或表示“返回/撤销”。将方向与意图匹配：
- 新内容到达 -> 从右侧/下方进入。
- 关闭/返回 -> 向右或向下退出，或反转进入动作。
- 深入钻取 -> 放大/推入。
元素通常应从最近的画面边缘进入和退出，进入时略带过冲（缓出），退出时加速（缓入）。
7. 安全区域和多比例适配
将所有关键内容（文字、标志、人脸、行动召唤按钮）保持在标题安全边距内，以免被裁剪或隐藏在平台 UI 后面。
| 比例 | 用途 | 标题安全边距 | 备注 |
|---|---|---|---|
| 16:9 | YouTube、网页主页 | ~5% 所有边 | 历史上广播标题安全为 10% |
| 9:16 | Reels、TikTok、Stories | 顶部 ~12-14%，底部 ~18-20%，侧面 ~6% | 平台 UI 占用顶部和底部 |
| 1:1 | feed 帖子 | ~6-8% 所有边 | 对称 |
| 4:5 | feed（较高） | ~6% 侧面，~8% 顶部/底部 | 最大化 feed 空间 |
将焦点设计得足够居中，使其在所有裁剪中都能幸存，然后让次要元素按比例重新排列。对于 16:9 -> 9:16，应将水平排列垂直堆叠，而不仅仅是裁剪掉两侧。
工作示例
良好 — 产品主页，16:9 → 9:16
简述：应用发布主页，高级感个性，必须同时作为网页主页和 Reel 使用。
- 网格：1920×1080，外边距 100，槽距 24，12 列。手机样机跨越第 7-11 列（右侧力量列）。
- 焦点：手机屏幕位于右侧三分之一交点 (1280, 360) — 不居中。单一焦点；标题（第 1-5 列）是次要的，对比度较低。
- 深度（三个运动层）：bg = 柔和渐变漂移，0.2x，环境。mid = 手机样机，0.6x，次要舞台。fg = 一个失焦的 UI 芯片飘过，1.2x + 3px 模糊，作为主要深度提示。
- 摄像机：单一推入，缩放 1.0→1.10，持续 1600ms，缓入缓出，以手机屏幕为变换原点 — 符合高级感（缓慢，无过冲）。未添加平移。
- 9:16 适配：重新堆叠 — 标题移动到手机上方，手机向上拉到中上部以避开底部 19% 的 CTA/导航区域，字号 +20%。焦点因起始于中央区域而幸免于裁剪。
成功原因：一个焦点，分配了深度角色，一个摄像机运动，安全区域感知的重新流式而非盲目裁剪。
反例 — “所有元素居中，所有元素都在动”的画面
- 手机样机完全居中，标题居中在上方，标志居中在下方 → 三个元素在同一轴上竞争，没有层次，没有力量点。
- 所有三层以相同的 1.0x 速度向左滑动 → 没有视差，没有深度，看起来像“整个模板移动了”（违反了 1/3 法则 / 距离限制：全宽移动没有中间关键帧）。
- 摄像机同时进行推 + 平移 + 轻微旋转 → 混乱，没有单一意图。
- 通过裁剪 16:9 的两侧来制作 9:16 → 标题和标志被裁剪，手机太低被导航栏遮挡。
修复：选择一个焦点力量点，为每层分配深度角色和不同的视差速度，使用一个摄像机运动，并为竖屏重新堆叠而非裁剪。
常见错误
| 症状 | 原因 | 修复 |
|---|---|---|
| 画面感觉很平 / “模板移动了” | 所有图层以同一速度移动；没有深度角色 | 为 bg/mid/fg 分配 环境/次要/主要 角色 + 0.2/0.6/1.2x 视差 |
| 眼睛不知道看哪里 | 2+ 个元素尺寸/对比度相同，全部居中 | 在三分法力量点上设置一个焦点；按尺寸>对比度>颜色>位置排列 |
| 摄像机运动显得混乱 | 推 + 平移 + 旋转组合 | 每个节拍一个运动；选择服务意图的那一个 |
| 手机上内容被裁剪 | 为 16:9 设计，裁剪到 9:16 | 垂直重新堆叠；将关键内容保持在标题安全边距内（9:16 顶部 13% / 底部 19%） |
| 入场看起来像“滑动”，而非“事件” | 元素单次不间断移动跨越 >1/3 画面 | 用中间关键帧打断，或将移动与缩放/不透明度配对（1/3 法则，距离限制） |
| 看起来廉价/拥挤 | 画面边缘到边缘被填满 | 在焦点周围预留负空间；它是一个活跃元素 |
| 运动与故事冲突 | 在意图确定之前选择了数字 | 先确定三大支柱 + 运动个性，然后给运动编号 |
交付物 — 构图计划
一个良好的构图计划会传递给实现技能（gsap-web、remotion-video、after-effects），并包含：
- 画面规格：宽高比、分辨率、帧率、网格（列数/外边距/槽距）、基线单位。
- 焦点：位于三分法力量点上的坐标（px 或 %）+ 每个元素的层次排名。
- 图层映射：每个元素被分配 bg/mid/fg → 环境/次要/主要，附带视差速度。
- 进/出：每个元素 — 边缘、方向、缓动系列，以及移动是否超过 1/3（以及如何打断）。
- 摄像机运动：单一运动，其属性 + 从→到值、持续时间、缓动、变换原点。
- 安全区域：每个目标比例的标题安全边距 + 竖屏的重新堆叠计划。
- 交叉引用：哪个运动个性以及哪些支柱决策驱动了时间设定。
完成前 — 检查清单
- 恰好一个主要焦点，位于三分法力量点上（或故意对称）。
- 层次已排列（尺寸 > 对比度 > 颜色 > 位置）；次要元素不竞争。
- 在焦点周围预留了负空间。
- 每个元素都分配了一个深度层（bg/mid/fg = 环境/次要/主要）和视差速度。
- 一个摄像机运动，未堆叠；使用缓动（除非是循环，否则不是 linear）；主页运动 800–2000ms。
- 进/出使用最近的边缘，遵循阅读方向，缓出进入 / 缓入退出。
- 没有元素一次移动超过画面 1/3 而不使用中间关键帧或缩放/不透明度变化。
- 关键内容在每个目标比例的标题安全边距内；竖屏是重新堆叠的，而非裁剪。
- 在选择任何数字之前已确定运动个性 + 三大支柱。
快速参考
| 需求 | 默认值 |
|---|---|
| 网格 | 12 列，8px 基线，间距为 8 的倍数 |
| 焦点放置 | 三分法力量点，非正中心 |
| 层次顺序 | 尺寸 > 对比度 > 颜色 > 位置 |
| 深度层 | bg / mid / fg，视差 0.2x / 0.6x / 1.2x |
| 摄像机 | 一次一个运动，缓入缓出，800-2000ms |
| 进 / 出 | 遵循阅读方向；缓出进入，缓入退出 |
| 9:16 安全 | 顶部 12%，底部 18%，侧面 6% |
参考文件
references/camera-and-grids.md— 带计算数值的网格数学、每种比例的全套安全区域百分比表、视差分层代码（CSS 滚动 + JS 指针 + Three.js），以及命名的摄像机运动配方（推入、甩拍、环绕、推拉变焦）及其关键帧值。