HyperFrames Keyframes 是 HyperFrames 生态中负责视觉运动的关键帧技能。它的核心定位是一份“姿态契约”：可见状态、连续的主体身份、可寻址（seek-safe）的运行时，以及经过验证的像素结果。它只负责动画可见运动，不负责片段拼接。源范围的硬切、修剪、拼接和重排归属于 /hyperframes-core：每个保留范围授权一个媒体元素，通过 data-start 和 data-duration 放置，并用 data-media-start 选择源偏移。相邻范围构成硬切；交叉淡入淡出需在不同轨道上用重叠片段配合视觉不透明度关键帧，声音淡入淡出则使用 /hyperframes-audio。
用途与能力 该技能适用于合成中的推近/拉远、平滑多状态缩放或重新构图、平移/重新构图/Ken Burns 镜头移动、链式相机运动、匹配剪辑或甩镜头、裁剪与遮罩重构、方向性擦除或光圈揭示切换、分屏交接等场景。推近/拉远通过在片段内部非计时的视觉/裁剪包装器上对 scale 配合 x/y 或百分比位移做关键帧实现；硬推近用 set/短补间，平滑移动用补间。平滑多状态缩放或重新构图则保持单一主体包装器存活，将多个缩放/重构状态作为带逐段缓动的姿态阶梯。平移、重构或 Ken Burns 通过包装器位移加缩放来动画，几何为手工创作，而非人脸跟踪或自动语义重构。
使用方式 使用流程为：识别动画主体、可见状态、最终状态与运行时；选择能证明提示的最小机制，仅在机制不明确时阅读 references/keyframe-patterns.md；在声明的运行时中创作可寻址关键帧，同步构建并注册运行时实例；通过 hyperframes lint、hyperframes check、hyperframes keyframes、一次聚焦的 --shot 以及在证明时间点的快照进行验证；若证明失败，修复源关键帧并重跑最小失败诊断后再渲染。运行时规则方面：GSAP 需在页面加载时同步构建，使用 gsap.timeline({ paused: true })，注册为 window.__timelines[compositionId] 且注册表键必须与 data-composition-id 匹配，渲染关键运动不得调用 tl.play()，重复次数需有限；CSS 关键帧需有限时长与迭代次数、确定性延迟、animation-fill-mode: both，时间属于片段时使用 data-start；Anime.js 需同步创建、autoplay: false、有限时长与循环，并将每个实例推入 window.__hfAnime；WAAPI 需有限时长、fill: "both"、确定性构造。渲染关键运动禁用 Date.now()、performance.now()、未播种的 Math.random()、悬停/滚动触发、计时器、异步创建的时间线、未注册的 requestAnimationFrame 及无限循环。
机制与通道 机制选择原则是选用能证明提示的最小机制，例如同一主体改变容器用共享元素/FLIP，主体沿可见路径行进用路径行进，笔画生长用描边绘制，形状互变用形状插值，可见揭示边界用 clip、mask 或 shader uniform，多项目有序移动用 stagger/索引延迟，文本自身移动用行/词/字符/带细分，表面弯折/拉伸/裁剪用父子反向变换，UI 状态用显式状态机，场景深度用 DOM 3D、Three.js 或 WebGL 相机/对象关键帧。通道优先使用合成器/视觉通道，如 x/y/z、xPercent/yPercent、scale、rotationX/Y/Z、skew、transformOrigin、svgOrigin、opacity、autoAlpha、clip-path、masks、CSS 变量、SVG path/dash 值、相机变换、shader uniforms；应避免布局/生命周期通道，如 top/left/right/bottom、width/height、margin/padding、display、visibility、后期 DOM 创建、做主体运动的辅助叠层。
文本、SVG、3D 与 Canvas/WebGL 文本需保留行框、词间距、可读性与最终适配；若文本内部移动，应移动字形或被遮罩的带，而非仅移动周围装饰，并快照可读帧。SVG 描边生长优先用 DrawSVGPlugin，其次 stroke-dasharray/stroke-dashoffset；形状插值优先 MorphSVGPlugin，必要时将图元转为路径并将复杂轮廓拆为更简单部分。3D 中仅缩放是假深度，应在稳定父级上使用透视、transform-style: preserve-3d、z 行进、旋转、相机/世界运动、遮挡及对象交叉时的层序；用一两个能暴露深度关系的诊断角度。Canvas/WebGL 通过确定性状态关键帧相机位置、相机目标、对象变换、材质不透明度、shader uniforms 与后处理强度，从 HyperFrames 时间渲染，并使用 --ghost，因为标记框看不到内部 canvas 运动。
CLI 验证 提供 npx hyperframes lint、npx hyperframes check、npx hyperframes keyframes .、--json、--runtime all、--selector 配合 --shot 与 --samples、--layout strip 配合 --from/--to、--ghost 配合 --angle，以及 npx hyperframes snapshot . --at <times> 等命令。选择器应指向真实动画主体，时间点应覆盖首帧、证明姿态、最终减保持及精确最终帧，仅当必须证明深度时才使用角度。不同工具证明不同内容：keyframes 证明目标、显式停点、路径、描边、父子合成运动、CSS 停点、Anime 注册；--shot 证明 ghost、路线形状、时间间距、DOM 3D 投影、聚焦选择器证明；--layout strip 证明原地运动、重叠、接触、细微缩放/不透明度、文字波；--ghost 证明 canvas、WebGL、shader 运动、渲染 3D；snapshot --at 证明遮罩、文本可读性、完整状态、最终锁定、黑屏/重置尾部。若选择器证明看起来错误，应重跑 --json、找到实际动画目标、拍摄该目标、快照完整帧，并信任绘制像素而非日志。
限制 源速度斜坡不受支持，因为不存在时变播放速率包络，需预处理派生媒体资产后通过 core 放置。任意源中冻结不受支持，可保持视觉姿态、最终源帧或已完成的子合成；需预处理静止/派生片段并作为独立片段放置后，再用另一源范围继续。视觉过渡或裁剪处理不是时间源修剪或拼接，时间线、片段时序与源范围由 /hyperframes-core 负责，关键帧只动画那些片段内包装器上的可见交接或裁剪。此外，不提供自动匹配帧发现。