motion-design（HyperFrames 版）是一套动态设计品味规则，定位为“HyperFrames 文件教你 API，这份文件管的是品味”。其中的数字来自一支实际上线的作品，被视为默认值；可以偏离，但必须是刻意的。它改编自 whaleyxbt/claude-motion 的 motion-design skill（MIT），原版针对 Remotion，本版改写为 HyperFrames（HTML + GSAP），并加入繁体中文排版规则，标注“本版新增”的段落非原作内容。
用途 用于制作、调整、重新计时或打磨动画影片、片头、转场、motion graphics 与 HyperFrames 作品，提供时间轴、缓动、弹性、节奏、字体、配色、质感与场景连贯方面的具体数值规则。
与官方 HyperFrames skills 的分工 官方 skills 管“做法”：项目结构、data-* 属性、API 写法、流程路由、registry 现成元件；API 写法冲突时以官方为准。本文件管“品味”：缓动、节奏、停留时间、字体、配色、中文排版。检查一律走 review-loop，其中已包含官方 hyperframes check。
在 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 硬规则：每个场景是 class="clip" 的元素，用 data-start、data-duration 放上时间轴；根元素要有 data-composition-id 和明确的 data-duration；动作用 gsap.timeline({ paused: true })，注册到 window.__timelines["<composition-id>"]；每个重要 tween 给明确位置，两端都重要时用 fromTo()；只动 transform 和 opacity；禁止 CSS transition／@keyframes、Date.now()、requestAnimationFrame、setTimeout、无种子 Math.random()、输出途中才 fetch 的资源；不用 script 播放、暂停、seek 影音或依时间显示隐藏 clip；随机一律用有种子函数。
- 时间集中：每个节拍是有名字的时间点（秒），按场景分组写在 timeline.js 的 window.TL 中，GSAP 位置参数一律从 TL 取，场景外框的 data-start／data-duration 必须与 TL 的场景边界一致；重新计时先改 timeline.js 再同步属性；音效和旁白用 <audio data-start> 对齐同一批节拍。
- 缓动：用 CustomEase 重建四条曲线——enter（0.16,1,0.3,1，进场上映，接近 expo.out）、exit（0.6,0,0.9,0.35，退场，约 power3.in）、move（0.65,0,0.35,1，状态间移动，同 power2.inOut）、land（0.55,0,0.2,1.12，落定，无好的内建替代）；线性只用于连续运动。
- 弹性：给出 GSAP 近似值，如 back.out(1.2) 0.6 秒用于一般 UI 进场，power3.out 0.8–1.0 秒用于大面板，back.out(1.7) 0.35 秒用于控制项卡格，back.out(2.2) 0.45 秒用于弹出，elastic.out(1,0.4) 0.9 秒用于每支影片一次的高潮。有实体感的东西用弹性，文字和镜头感移动用贝兹曲线。
- 节奏：英文单字错开约 0.09 秒，中文逐字约 0.04–0.05 秒、逐词约 0.09 秒，清单与标签约 0.2–0.25 秒；文字揭示约 0.8 秒用遮罩；退场约为进场一半；场景要重叠；打字每字元约 0.035 秒，游标约 2.4 Hz 闪烁；阅读停留短句至少 1 秒，超过三个词每多一词加约 0.25 秒，中文每多 4 字加约 0.25 秒，结尾句至少 2 秒。
- 字体：最多三種字族（展示衬线、介面无衬线、等宽）；英文用 Instrument Serif／Inter／JetBrains Mono，繁体中文用 Noto Serif TC／Noto Sans TC，数字和标签搭 JetBrains Mono，字型档放 assets/fonts 用 @font-face 载入；英文展示字约 138 px、字距 -0.02em、line-height 1；中文展示字约 96–120 px、一行不超过约 12 字、字距 0 到 0.02em、line-height 1.15–1.25；中文用强调色加粗重扛重点；等宽标签大写、letter-spacing 0.2–0.24em；在 360 px 宽下关键讯息仍要读得清楚。
- 配色：整支片用背景色 bg、主色 fg、强调色 accent 三色定调，写在 theme.json；色票定义成 :root CSS 变量；只有一个强调色且有意义，只给答案、结论、关键数字、章节卡；光晕由状态驱动而非时间。
- 质感：SVG feTurbulence 底片颗粒 opacity 约 0.09，每两格换一次种子；暗角加點状网格每秒漂移几 px；手绘线条抖动用于草稿感状态；闲置元素要呼吸。
- 连贯与转场：宁可让物件延续也不要硬切，跨场景物件放在根 composition；每个转场由画面上物件带出；用速度推拖影与挤压；每支影片一个高潮时刻。
- 反模式：所有东西同时淡入或同一时长、有起停的东西用线性缓动、该被阅读时文字还在动、一格超过一个焦点、内容距边缘不到约 60 px、第 0 格空白或全黑等。
使用方式 先写 timeline.js 的数字分镜并向使用者确认节奏；用 npx hyperframes init 建项目，每个场景是 compositions/ 里的一个 composition；每次有意义修改后跑 review-loop；画面时间锁定后再用 <audio data-start> 对齐声音。
适用场景与限制 适用于 HyperFrames 动态影片、片头、转场与 motion graphics 的制作与打磨。其数字为默认值而非硬性标准；GSAP 弹性为近似值，输出后需用 review-loop 确认手感；在 motion-explainer 系列流程中部分规则不适用，以该流程为准。官方 HyperFrames skills 与本文件冲突时，API 写法以官方为准。收费、价格、平台支持等资料暂未提供。