这份文档是 HyperFrames 版动态设计品味规则，改编自 whaleyxbt/claude-motion 的 motion-design skill（MIT 许可），原版针对 Remotion，本版改写为 HyperFrames（HTML + GSAP）并加入繁体中文排版规则。文档强调 HyperFrames 官方文件教 API，这份文件管品味，底下的数字来自一支实际上线的作品，应视为默认值，偏离可以但必须刻意。
用途与定位：在 motion-explainer 系列流程中使用时，时间节拍来自 STORYBOARD.md 和 audio_meta.json，每一格的 data-start/data-duration 由 assemble-index 写入，不要另外建 timeline.js 或 window.TL；建项目用 npx hyperframes init；字体与颜色由项目 theme.json 决定，theme.py 会覆盖每一格自己写的字体和色票；其余品味规则（缓动、弹性、阅读停留、构图、中文排版、强调色只给重点）照常适用。与官方 HyperFrames skills 的分工是：官方 skills 管做法（项目结构、data-* 属性、API 写法、流程路由、registry 现成组件），本档管品味（缓动、节奏、停留时间、字体、配色、中文排版）；API 写法冲突时以官方为准；检查一律走 review-loop。
主要能力与规则分段：第 0 节列出 HyperFrames 硬规则，包括时间由 HTML 的 data-start/data-duration 决定、动作由 GSAP paused timeline 负责并注册到 window.__timelines、每个重要 tween 给明确位置、只动 transform 和 opacity、禁止 CSS transition/@keyframes、Date.now、requestAnimationFrame、setTimeout、无种子 Math.random 等，随机一律用有种子函数。第 1 节讲时间集中在 timeline.js 的 window.TL 对象，按场景分组命名时间点，GSAP 位置参数从 TL 取，场景外框 data 属性与 TL 边界一致，音效旁白用 audio data-start 对齐。第 2 节缓动用 CustomEase 精确重建四条曲线：enter（0.16,1,0.3,1）、exit（0.6,0,0.9,0.35）、move（0.65,0,0.35,1）、land（0.55,0,0.2,1.12），线性只用于连续运动。第 3 节弹性给出 GSAP 近似值：默认落定 back.out(1.2) 0.6s、厚重 power3.out 0.8–1.0s、旋钮卡格 back.out(1.7) 0.35s、弹出 back.out(2.2) 0.45s、弹性重音 elastic.out(1,0.4) 0.9s，每支影片只用一次高潮。第 4 节节奏：英文单词错开约 0.09s，中文逐字约 0.04–0.05s、逐词约 0.09s，清单项目 0.2–0.25s，圆环圆点 0.06s；文字揭示约 0.8s 用遮罩；退场约进样一半；场景要重叠；打字每字符约 0.035s，游标约 2.4Hz 闪烁；阅读停留短句至少 1s，超过三个词每多一词加约 0.25s，中文每多 4 字加 0.25s，结尾句至少 2s。第 5 节字体：最多三种字族，英文 Instrument Serif/Inter/JetBrains Mono，繁体中文 Noto Serif TC/Noto Sans TC 配 JetBrains Mono，字体档放 assets/fonts 用 @font-face 载入；英文展示字约 138px 字距 -0.02em line-height 1，中文展示字约 96–120px 一行不超约 12 字，字距 0 到 0.02em，line-height 1.15–1.25；每行一个重点，中文用强调色加粗重；等宽标签大写 letter-spacing 0.2–0.24em；手机 360px 宽关键信息要读得清楚。第 6 节配色：整支片用三个颜色 bg、fg、accent 写在 theme.json，强调色只给答案、结论、关键数字、章节卡；色票定义为 :root CSS 变量；只有一个强调色且有意义；光晕由状态驱动。第 7 节质感：底片颗粒 SVG feTurbulence opacity 约 0.09 每两格换种子；暗角加点状网格每秒漂移几 px；手绘线条抖动用于草稿感；闲置元素要呼吸。第 8 节连贯与转场：宁可让物件延续不要硬切，跨场景物件放根 composition；每个转场由画面物件带出；用速度推拖影挤压；每支影片一个高潮时刻。第 9 节反模式：所有东西同时淡入、有起停的东西用线性、文字该读时还在动、一格超过一个焦点、内容距边缘不到约 60px、第 0 格空白或全黑等。
使用方式：流程是先写节拍到 timeline.js 并向用户确认节奏，再用 npx hyperframes init 建项目，每个场景是 compositions 里的一个 composition，共用组件和跨场景物件放 index.html，每次有意义修改后跑 review-loop，画面时间锁定后再处理声音，中文旁白的口音和情绪交给用户用耳朵判断。
适用场景：制作、调整、重新计时或打磨动画影片、片头、转场、motion graphics、HyperFrames 项目等。限制：本文档不提供具体收费、价格、平台效果等信息；部分规则依赖项目 theme.json 和 motion-explainer 系列流程；中文旁白判断不应用 ASR 或相似度分数代替。