HyperFrames Bold Poster 帧预设解析：以 cqw 容器单位打造印刷感海报级视频帧

Bold Poster 是 OpenMontage 仓库中 HyperFrames 技能体系（.agents/skills/hyperframes）下 hyperframes-creative 的一套视频优先（video-first）帧级预设，其设计规格完整沉淀在 .agents/skills/hyperframes-creative/frame-presets/bold-poster/FRAME.md 中。它把"复古意大利体育杂志 + 世纪中叶欧洲年报"的印刷排版气质搬进 1920×1080 的视频帧：Shrikhand 海报级倾斜 display、Libre Baskerville 文学衬线正文、Space Grotesk 大写留白 chrome，外加一个番茄红强调色。读完本文，你将掌握该预设的全部 token 值、cqw 容器单位设计定律、九个可复用组件、六种帧处理（frame treatment）配方，以及如何在 HyperFrames 项目中把这份 FRAME.md 模板采纳为 frame.md 品牌规格。

一、设计定位：一帧即一张印刷海报

FRAME.md 用一句话定义了 Bold Poster 的世界观：populist editorial poster（大众化编辑海报）——"vintage Italian sports-magazine display, classical serif body, one saturated tomato red, grids ruled in ink"（复古意大利体育杂志展示字、古典衬线正文、一种高饱和番茄红、墨线排出的网格）。它希望每一帧看起来都像"印出来的"：以海报尺度的重型展示字为主角，锁定唯一一个红色强调，落在白/米白纸面上（或整幅红/暗色陈述面板上），装饰物被压缩到最低限度。

这套预设的设计哲学是一句口诀，也是全文的行为准则：

atoms are sacred · composition is free · numbers come from the script （原子神圣不可改 · 构图自由发挥 · 数字一律来自脚本）

即颜色、字体、边框、阴影这类"设计原子"是硬约束（sacred），而帧内如何布局是自由的；任何数据性数字都不能由制作者臆造，必须由脚本供给。

帧尺度的关键特征

• 只有四种颜色——白 / 棕黑墨色 / 番茄红 / 米白。红色是唯一的强调色。
• Shrikhand display 一律倾斜（−6° stat、−5° close、−4° hero-red、+2° hero-bottom）——这是整套系统"签名式的动势"。
• Libre Baskerville 衬线正文（line-height 1.75）；Space Grotesk 仅作 chrome（大写 + 字距）。
• 双线网格（3px 外框 + 1.5px 内线墨色）；红色左栏卡片；红色 em-dash 项目符（最多 3 条）。
• 红色 display 上的层叠式 text-shadow——全系统唯一的阴影；除此之外平面化、直角收边。
• 每个帧底部都有一条红色进度条。

二、帧规格与容器定律（cqw 体系）

画幅与安全区

• 主画幅： 1920×1080（16:9），display 字一律以 cqw 为作者单位，换算公式为 px ÷ 1920 × 100 = cqw。
• 竖幅： 1080×1920（9:16）；方形： 1080×1080（1:1）。这两档在文档中只给出指导性适配建议。
• 安全区： pad-slide ≈ 3cqw——刻意收紧，让海报式大字"逼近画框边缘"而不是缩在留白里。

帧前必经的四道"目测关卡"（Frame Craft Bar）

任何结构性检查之前，先过四道基于目测的"眼球测试"：

1. Squint（眯眼看）——每帧只有一个 display 主视觉（hero stack / stat-big / close-big 三者之一），其体量是其他元素的 3～6 倍，画面中没有任何东西与它争抢。
2. Silence（留白）——陈述性帧保留约 50%–60% 负空间；只有财务网格（fin-grid）是唯一的"高密度例外"。
3. Restraint（克制）——只允许四种颜色、红色为唯一强调；每帧只有一个 display 时刻；红底 display 上的层叠 text-shadow 是唯一阴影；项目符最多三条。
4. Reference（参照系）——目标是"复古意大利体育杂志封面 / 世纪中叶欧洲年报"；失败的典型特征是"圆角、柔和投影、多强调色的 PPT 风一帧"。

容器定律（load-bearing，承重墙级别的规则）

Every frame ground sets container-type: size; ALL frame-relative units are cqw/cqh against it — never vw.

每个帧的 ground 都必须声明 container-type: size，帧内所有相对单位只能对容器取 cqw/cqh，严禁使用 vw。同时保持两条约定：边框永远用 px（因为细线边框如果随容器缩放会失真）；旋转 transform 始终保持（倾斜是品牌签名，不能因比例变化被抹掉）。

这段设计在配套的 frame-showcase.html 中可以直接看到落地写法：.frame { aspect-ratio: 16/9; container-type: size; }，而内部的 .pbar { height: 0.5cqw }、字号 font-size: 13cqw、内边距 padding: 0 5cqw 全部以 cqw 对齐容器宽度。这也解释了为何该文件把字号、tracking 甚至 letter-spacing 都写成 0.25cqw / 1cqw 的纯容器单位——保证任何画幅下各元素相对比例恒定。

三、色彩系统：四色，不再多一个

颜色 token 与源设计保持逐字一致（前端样式在 showcase 中被定义为 CSS 变量，见 frame-showcase.html 的 :root 段落）：

Token	色值	语义角色
{colors.bg}	#FFFFFF	默认纸面（ground），"新印的新闻纸"画布
{colors.dark}	#1C1410	暖调棕黑墨色：正文、边框、标题头
{colors.red}	#D8000F	唯一强调色（lone accent），即番茄红
{colors.light}	#F5F2EF	米白，用于交替面板条纹

红色的使用边界极其严格：每一个数字、章节分隔线、eyebrow、左栏条、项目符、进度条，以及整幅陈述面板的地面都是红色；{colors.light} 米白用于交替面板形成条纹。不允许出现第五种颜色（禁止绿/蓝/黄），类别差异要靠位置、label 和倾斜来表达，而不是靠加色。同时红色永不用作正文文字、永不做成淡色调（tint）、永不用作无文字的无意义填充。

四、字体系统：两条阶梯 + 三字族分工

Bold Poster 的声音由三种字族组成一条固定的功能链：

• Shrikhand（重型 slab-script，仅 weight 400，常规倾斜 −6°..+2°）——承载所有 hero title、section header、stat 与 card title；
• Libre Baskerville（文学衬线）——承载所有正文段落，"正是它让系统看起来像印出来的"；
• Space Grotesk（大写 + 2–3px 字距）——只做 chrome：label、eyebrow、counter、bullet 正文。

前置元数据中的完整字阶表

FRAME.md 的 YAML frontmatter 逐字给出了两条可机器读取的字阶（typography ramp）。阅读阶梯（reading/chrome ramp）：

Token	字体	尺寸	weight	lineHeight	颜色/备注
body	Libre Baskerville	0.85cqw	400	1.75	dark，正文主设置
body-cell	Libre Baskerville	0.7cqw	400	1.55	网格单元格正文
label	Space Grotesk	10px	600	—	tracking 2px，uppercase，red
bullet-body	Space Grotesk	0.62cqw	400	1.45	项目符正文

展示阶梯（display/hero ramp，Shrikhand 400 且带倾角）：

Token	尺寸(cqw)	lineHeight	颜色	旋转
card-title	1.9	1.1	dark	—
cell-number	2.7	1.0	red	—
section-header	3.3	1.0	dark	—
red-quote	4.7	1.15	bg	带 stacked shadow
hero-title-bottom	10.4	0.9	dark	2deg
hero-title	11.5	0.88	dark	—
hero-title-red	13.5	0.85	red	−4deg
close-big	13.5	0.88	red	−5deg
stat-big	22.0	0.82	red	−6deg

字号使用的三条铁律

• 可读性下限（legibility floor）： 任何"承重"文字行 ≥ 1.4cqw；等宽（mono）label 只做 chrome，不受此限。
• 按测量配字（fit-to-measure）： 主标题的尺寸由其文字长度决定。整块标题宽度上限 ≤ 78cqw；≤2 个词 → stat-big / hero-title-red；3–4 个词 → hero-title；5 个词以上 → section-header。hero 必须是 3 行堆叠构图。
• 角色分工： Shrikhand 恒为 weight 400、陈述/hero 元素带倾角、数字用红色；Baskerville 正文 line-height ≥ 1.5；Space Grotesk chrome 恒大写、字距 2–3px。行内 <strong> 会把字面切成 Space Grotesk 600。禁止斜体 display、禁止不倾斜的红色 hero。

在源码实现层面（frame-showcase.html）可以看到这套字阶与倾斜如何被翻译为 CSS：.cover .l2（红线）font-size: clamp(...) 配 transform: rotate(-4deg)，.pf2 .big 用 font-size: 30cqw + rotate(-6deg)，正文则全部走 --body（Libre Baskerville）变量。展示用的字体由 Google Fonts 引入（见 FRAME.md 的 Known Gaps 说明），而 HyperFrames 的字体现有策略（捆绑 18 个字族 + 构建期自动抓取真实 Google 字体）在 hyperframes-creative/references/typography.md 中有完整交代。

五、深度与表面：平面之上只有一种阴影

Bold Poster 的世界是绝对平面的，纵深只来自四种手段：

1. 重型边框——3px+1.5px 双线网格、2px 全局卡片轮廓、4px 红色左栏线；
2. 表面反转（surface inversion）——整幅的红色或暗色陈述面板；
3. 倾斜（tilt）——旋转的 Shrikhand 打破基线，制造"伪立体"的感知维度；
4. 唯一的阴影——只在红色 display 上使用的层叠 text-shadow。

天花板级禁令： 没有 box-shadow、没有圆角表面（全部直角；唯一例外是"hint pill"允许 4px 圆角）、没有渐变。

唯一的层叠阴影在 frontmatter 中被精确声明为三段式（每层都是无模糊的硬偏移）：

text-shadow:
  2px 2px 0 rgba(28, 20, 16, 0.25),
  4px 4px 0 rgba(28, 20, 16, 0.2),
  6px 6px 0 rgba(28, 20, 16, 0.15);

它的适用范围是红底面板上的白色 Shrikhand display（如 red-quote、stat-big 白字）。实现上同样忠实：.redpanel .q { text-shadow: var(--stack-shadow); }、.pf2 .big 用的是 cqw 化的三段阴影 0.15cqw/0.3cqw/0.45cqw 偏移——含义是它要随容器等比缩放。值得注意的是这是 text-shadow 而非 box-shadow，刻意营造"印章错版三次"的印刷质感。

六、形状：直角即秩序

除 hint pill（4px 圆角）外，全局圆角一律为 0。 卡片、网格单元格、面板、callout 全是锐利的直角矩形。圆角被视作"网页味"的源头，与四色原则、单阴影原则并列为克制的三重保障。

七、九大组件规范

FRAME.md frontmatter 的 components 段定义了 9 个可组合的设计组件：

组件	关键规范	说明
progress-bar	背景 {colors.red}；高 0.5cqw，贴底边，宽度随 index 增长	"最显眼的 chrome"，每个帧底部都有
hero-title-stack	hero-title + hero-title-red + hero-title-bottom 三行组合	至少 4° 倾斜（−4°/+2°），至少一行红色
stat-big	22cqw 巨号数字，红（或红底上用白字带 stacked shadow）	rotate(-6deg)，海报级 hero 数字
fin-grid	外框 0.3cqw solid dark，内线 0.15cqw solid dark（交叉处相接），圆角 0；cell-number(红) + label + body-cell	双线表格签名式
red-leftbar-card	border-left: 4px solid red；padding: 0 0 0 ~1cqw；无描边、无阴影；card-title + body + 红色 em-dash bullets	"悬挑"在红色左规线上，无外框
red-panel	背景 {colors.red}、文字 {colors.bg}	出血式陈述表面，display 携带层叠阴影
dark-panel	背景 {colors.dark}、文字 {colors.bg}	出血式暗色陈述表面，红色做点缀
stacked-text-shadow	三段 text-shadow（见上节）；仅用于红底红 display	全系统唯一允许的阴影
bullet	红色 em-dash（—）或圆点（•）字形，绝对定位靠左；红色	禁止默认 disc 圆点，最多三条

组件在 showcase 里有直接对照实现：.fingrid { border: 3px solid var(--dark) } 且 .fingrid .cell { border: 1.5px solid var(--dark) }，正是 3px 外框 + 1.5px 内线在 12 列网格上的落地；.leftcard { border-left: 4px solid var(--red) } 配 li::before { content: "—" } 实现了红色 em-dash 项目符；.redpanel、.dark 分别对应红/暗陈述表面。

八、六种帧处理方案（Frame Treatments）

每种方案文档都以一条固定的"配方语法"来定义：ground · register · composes · focal · chrome · accent · silence · Fixed/Free · density。六个方案恰好覆盖一部说明/推广视频的叙事职能。

1 · Hero Stack（开场身份页 · move: 三行倾斜堆叠 · 左对齐）

• Ground 白。Composes hero-title-stack、label、正文 tagline、progress-bar。
• Focal 三行 Shrikhand 堆叠（如墨色 / 红色倾斜 / 纸色），要求至少一行红、至少一行带倾角。
• Chrome mono eyebrow + Baskerville tagline；底部进度条 + 计数器。
• Accent 红色那一行。Silence 右半开敞。Fixed Shrikhand 400、≥1 倾斜 + ≥1 红、直角。Free 具体用词与行尺寸。Density 低。

shocase 中封面样例是 ink, / red & / paper. 三行，红色 red & 行 rotate(-4deg)、第三行 rotate(2deg) 呼应 hero-title-bottom token。

2 · Hero Stat（陈述页 · move: 海报级数字 · 红底 · 居中）

• Ground 整幅红。Focal 一个 stat-big 数字，白字、rotate(-6deg)、带层叠阴影，居中；上方 mono label、下方 Baskerville 副题。
• Accent 白色上的墨色层叠阴影。Silence 约 60%。
• Fixed 白字压红底 + 层叠阴影、−6° 倾斜。Free 数字本身（来自脚本）与 label。Density 低。

实现样例为红底 94 配 percent recall, unaided. 副题。

3 · Financial Grid（数据页 · move: 双线矩阵 · 全片唯一高密度帧）

• Ground 白 + pad-slide。Composes label、section-header、fin-grid。
• Focal 3px 外框 / 1.5px 内线的墨色网格，每个格子 = 红色 Shrikhand 数字 + mono label + Baskerville 正文。
• Silence 紧——这是密度的唯一例外。Fixed 双线框、红数字、衬线正文。Free 数字（来自脚本）与 label。Density 高密度例外。

4 · Pull Quote（引言页 · move: 倾斜/堆叠 display · 红底 · 左对齐）

• Ground 整幅红。Composes red-quote + Baskerville 出处（cite）。
• Focal 两行白色 Shrikhand 引言，带层叠阴影；下方 Baskerville cite。
• Accent 层叠阴影。Silence 约 50%。Fixed 白字压红底 + 层叠阴影。Density 低。

5 · Editorial Cards（内容页 · move: 红左栏卡片 · 左对齐）

• Ground 白（或米白交替条纹）。Composes label、section-header、2–3 张 red-leftbar-card。
• Focal 悬挑在 4px 红规线上的卡片——Shrikhand 标题 + Baskerville 正文 + 红色 em-dash 项目符（最多 3）。
• Accent 红色左规线 + 项目符。Fixed 4px 红左栏、em-dash 项目符、无外框。Density 标准。

6 · Closing Statement（收尾页 · move: 倾斜 close-big · 居中或左对齐）

• Ground 白或暗色。Composes close-big、label、正文副题、progress-bar。
• Focal Shrikhand close-big（rotate(-5deg)、红色）签名收尾；mono eyebrow + Baskerville 联系行。
• Accent 红色倾斜标题。Silence 约 60%。Fixed −5° 倾角红色 close-big。Density 低。

九、构图红线：Do & Don't

Do（必做）

• Hero 标题堆成 3 行 Shrikhand——至少一行倾斜、至少一行红色。
• 每个数字都做成红色 Shrikhand；陈述性 display 倾斜 −5° 到 −6°。
• Eyebrow 用 Space Grotesk 600 大写、字距 2–3px、红色；正文用 Baskerville、行高 1.75。
• 数据网格用 3px 外框 + 1.5px 内线双线边框；其余场合用红左栏卡片。
• 用 红色 em-dash 项目符，上限三条；红色 display 上施加层叠 text-shadow。
• 每帧只有一个 display 主角；陈述帧务必留出负空间。

Don't（禁做）

• 不引入第二种强调色；不做圆角（除 hint pill 外一律直角）。
• 不用投影——红字上的层叠 text-shadow 是唯一允许的阴影。
• 不替换字体；不拿 Shrikhand 排正文、不拿 Baskerville 排 label、不拿 Space Grotesk 排标题。
• 不用默认 disc 项目符；不做不倾斜的红色陈述 display。
• 陈述帧不得拥挤；长行不得从边到边撑满（应当逐级降档）。

十、宽高比适配行为

处理方案	16:9	9:16	1:1
Hero Stack	左堆叠，tagline 在下方	居中堆叠、更高	堆叠，tagline 在下方
Hero Stat	数字居中	居中、更高	居中
Financial Grid	3 格横向	2 格横排/堆叠	2×2
Pull Quote	引言靠左	引言堆叠	居中
Editorial Cards	2–3 张横排	堆叠	堆叠
Closing	close-big 居中	close-big 堆叠	居中

适配时保持两条不变式：pad-slide 在短边保持紧凑；重排字号让文字行始终 ≤78cqw、不跌破地面线。倾斜保持不变；进度条在每个比例下都横贯底边。FRAME.md 同时提醒：9:16 与 1:1 目前只是"指导性建议"，落地前必须逐比例验证"那一个超大标题行 ≤78cqw"以及倾斜不裁切。

十一、数据防伪与实体占位（硬规则）

帧尺度上有两条不可逾越的诚实性规则：

1. 不得臆造任何数字。 财务数字、比例、百分比、日期，凡是脚本没有提供的，一律渲染成占位符：— figure —、{metric}、+NN%。fin-grid 单元格与 stat-big 尤其要在脚本供给前保持占位符状态；目录编号/进度类元素被视为纯装饰，不受此限。
2. 不定义真实客户与品牌。 FRAME.md 的 "Approved Entities" 明确写道：源设计中没有定义任何真实客户、Logo 或厂商，渲染此类标记一律使用占位符。系统提供的是"字体、一个红、墨色规则"，而不是品牌。

值得对照的是 showcase 样例里出现的 $24M / +18% / 3.4× / 94 等数字，它们只是静态演示用的占位示意；接入真实 HyperFrames 项目后，这些槽位会由脚本（voice-over 文案与数据结构）供给，这正是 numbers come from the script 这条准则的体现。

十二、渲染前自审清单（Pre-Render Self-Audit）

FRAME.md 给出了一段发布前的最后检查表，逐项对照可快速判定一帧是否符合规格：

• Squint — 只有一个 display 主视觉占主导，无任何元素与之竞争；
• Silence — 陈述帧保留约 50–60% 负空间；只有 fin-grid 允许高密度；
• Color — 只有四色；红色是唯一强调色；无红色正文；
• Type — Shrikhand 400 倾斜用于陈述、数字为红色、按测量配字；Baskerville 正文行高 1.75；mono chrome 大写字距 2–3px；字号 ≥1.4cqw 下限；
• Depth — 平面化；红色 display 上的层叠 text-shadow 是唯一阴影；直角收边；
• Bullets — 红色 em-dash，最多三条；
• Fabrication — 每个数字都能追溯到脚本，否则保持占位符。

这套自审与 hyperframes-creative 的 design-adherence.md 规定的"创作后校验"流程相互印证：后者要求对已产出的 HTML 逐项核查颜色（每个 hex 必须出现在 palette 中）、字体族与字重、圆角值、间距范围、阴影层级以及 Avoidance 清单——发现违规即逐条修复后再预览。

十三、已知缺口与约束（Known Gaps）

文档对自己未覆盖的边界做了坦白声明：

• 动效不在本帧规格范围内。 FRAME.md 只规定构图（composition）；来源系统中 550ms 的滑入式转场属于 deck 的机械机制，应由 hyperframes-animation 技能处理，而不是在 frame 规格里定义。
• 字体经 Google Fonts 引入。 Shrikhand / Libre Baskerville / Space Grotesk 不在 HyperFrames 预捆绑字体清单内，依赖构建期抓取（相关机制见 hyperframes-creative/references/typography.md）。CJK 回退方案： Noto Serif SC 900/400 + Noto Sans SC；由于 Shrikhand 这类 slab-script 没有对应汉字，CJK 场景必须靠"倾斜 + 红色 + 双线边框"来维持品牌识别度。
• 9:16 / 1:1 仅为指导。 需按比例逐一验证单行标题 ≤78cqw 且倾斜不裁切。
• 纯 CSS 实现。 网格、左栏卡片与层叠阴影全部是 CSS-only，不依赖任何外部图片素材。

十四、配套资产：caption 皮肤与展示联系单

bold-poster 预设目录（.agents/skills/hyperframes-creative/frame-presets/bold-poster/）除了规格本体 FRAME.md，还附带两个可运行资产：

caption-skin.html —— 预设自带的下三分之一卡拉 OK（karaoke）字幕皮肤。它在工程上是可被流水线"填空"的模板：头部注释说明 product-launch-video 工作流的 Step 2 会把它复制为项目里的 caption-skin.html，随后 captions.mjs 填充三处占位——空 GROUPS 数组（写入引擎的场景感知词分组）、0 时长与 0 宽高（写入真实总时长与画布尺寸）、空 data-brand-tokens 样式（写入由项目 frame.md 派生的 :root token）。其 token 契约词汇是固定的 --cap-ink / --cap-canvas / --cap-accent / --cap-accent-2 / --font-display / --font-body / --cap-band-top / --cap-band-height，视觉上完全继承 Bold Poster 签名：新鲜纸面卡片、1.5px 棕黑墨色细框 + 4px 番茄红左栏、直角、无投影。三态卡拉 OK 机制为：待读词 = 淡墨色；当前词 = 番茄红硬方块面板（box-shadow: 0 0 0 0.06em 扩展出无模糊实心块）+ 白色文字 + 层叠 text-shadow，并带 scale 0.9→1 的 back.out 弹入；已读词 = 回到实心墨色、面板清空。皮肤还通过注释强调一个工程约束：状态切换必须用 gsap.set({className}) 而不是 tl.call() 回调，因为引擎按帧 seek 时不会触发 call 回调，否则渲染会得到错误状态。

frame-showcase.html —— 一套可离线打开预览的"帧联系单"（contact sheet），把上述 6 种处理渲染成真实 16:9 cqw 帧（含 Palette / Typography / Components / Frame Rules / Captions 分区），并在 __bundler_thumbnail 模板中给出 100×100 的 SVG 缩略图。该文件是观看设计的工具，不应被复制进任何交付项目。

十五、如何把 FRAME.md 采纳为项目的 frame.md

在 HyperFrames 的设计规格体系里，frame.md 是帧尺度（frame-scale）设计系统，是面向 web/静态页面的 design.md 的视频优先姊妹文档，两者采用相同的"YAML frontmatter + Markdown 正文"格式，其中 frontmatter 是规范性层（colors/typography/spacing/components 是可机器读取的真值，必须逐字引用，禁止发明或四舍五入），正文是语境层（承载意图、何时使用与 token 表达不了的约束）。规格解析优先级为 frame.md → design.md → DESIGN.md，取第一个存在的文件；加载一次后由后续所有步骤共享（详见 hyperframes-creative/references/design-spec.md）。

采用 Bold Poster 的标准路径是：由工作流的 design 步骤将本预设的 大写 FRAME.md 模板复制并改名为小写 frame.md 放入项目，再叠加品牌 token 覆盖。注意 spec 解析器只认小写 frame.md；大写 FRAME.md 是预设的"货架模板"形态（design-spec 文档对 Linux 上大小写敏感的文件名差异有专门提醒）。采纳后，HyperFrames 的创作流程即以此 frame.md 为品牌真值进行后续的场景扩展、HTML 写作与 adherence 校验；该预设同时支持在 product-launch-video 等顶层工作流中作为风格预设被选用（Bold Poster 被定位为 "powerful / printed / restrained"——适合需要编辑权威感与复古庄重感的产品）。

结语

Bold Poster 是 HyperFrames 帧预设库（.agents/skills/hyperframes-creative/frame-presets/ 下与 biennale-yellow、blockframe、capsule 等并置）中纪律最严的一档"印刷感"系统：四色、三字族、一重阴影、直角边框，外加每帧一个 display 主角的构图纪律，共同保证了无论脚本内容如何变化，输出的每一帧都保持着"复古体育杂志封面"般的辨识度。它把 cqw 容器单位、前端化的 token 变量与"数字必须来自脚本"的内容治理结合为一套可以直接由 Agent 消费、执行的视频帧设计规格——这正是 OpenMontage 将 700+ 技能文件组织成可被 LLM 检索与执行的知识资产的一个典型切片。更深层的动效编排、转场与 beat 规划则应转向 hyperframes-animation 与 hyperframes-creative 的 motion-principles、beat-direction 等参考文档继续扩展。