VYBE 排版
在动态图形中，文字通常是主角。将其视为视频素材：它有重量、尺度、节奏和摄像机角度。
内置字体（OFL 许可，位于 vybe/assets/fonts/，每个项目自动复制）
| 字体家族 | 字符风格 | 适用场景 |
|---|---|---|
| Inter（可变字重 100–900） | 中性、精确 | 苹果极简、企业、UI、字幕 |
| Space Grotesk（300–700） | 技术、奇特 | 科学、实验、科技 |
| Fraunces（可变衬线） | 温暖、文学、高对比度 | 电影、纪录片、编辑 |
| JetBrains Mono（100–800） | 代码、数据 | 标签、数字、终端风格 |
| Anton（400，压缩） | 响亮、海报 | 动态排版、社交媒体钩子 |
| Orbitron（可变） | 科幻展示 | 赛博朋克标题（仅适用于短词） |
每个命名字体家族都需要在使用它的文件中使用 @font-face { src: url("assets/fonts/<file>.woff2") }（HyperFrames 会检查）。用户品牌字体：将文件复制到 assets/fonts/ 并以相同方式声明；检查其许可证是否允许嵌入。
字体配对： Fraunces + Inter（电影感）· Inter + JetBrains Mono（产品/技术）· Space Grotesk + JetBrains Mono（科学）· Anton + Space Grotesk（社交/动态）· Orbitron（仅限标题）+ Space Grotesk（其他所有内容）。
视频可读性规则（由 hyperframes check 工艺审计强制执行）
- 最小阅读尺寸：短边的 2.6% →
2.7cqmin（1080p 下约 28px）。 正文 2.8–3.4cqmin；标题 6–12cqmin；主词 15–34cqmin。 - 保持时间 ≈ 每字 0.3 秒 + 0.5 秒；结束行 ≥ 2 秒。
- 一个场景中每秒屏幕上的字数 ≤ 3.2；每行字数 ≤ 约 10 词。
- 对比度 WCAG AA（正文 4.5:1，大文本 3:1）。在图像上方时，添加遮罩或阴影。
- 正文中不使用
<br>；使用max-width（例如78cqw）并让其自动换行。 展示标题可以使用块级<span>每行断行。 - 字间距：收紧大标题（−0.02 到 −0.05em），张开小型大写标签（+0.2 到 +0.5em）。切勿动画化
letter-spacing（会突变）—— 使用x属性展开字符。 - 安全区域：竖屏视频将阅读文字保持在顶部 12%、底部 22% 和右侧 14% 之外。
动态排版技术
| 技术 | 方法 |
|---|---|
| 模糊到清晰 | 将单词放入内联块 span，使用 fromTo {opacity:0, y:30, filter:blur(14px)}，错开 0.12–0.16 秒 |
| 缩放冲击 | 每拍一字，scale 2.4 → 1 配合 back.out(1.6)，背后颜色区域翻转 |
| 遮罩上升 | 行包装器 overflow:hidden，内部文字 yPercent 110 → 0 |
| 中心向外揭示 | clipPath: inset(0 50% 0 50%) → inset(0) |
| 字形扩散 | 每字母 x 偏移向中心收缩至 0 |
| 打字机效果 | clipPath 使用 steps(n) 缓动，或逐字符透明度设置 |
| 轮廓回声 | 复制单词并添加 -webkit-text-stroke，透明填充，偏移拖尾 |
| 文字作为镜头 | 缩放/旋转整个单词堆叠穿过画面进入下一场景 |
| 单词交换 | 将两个单词堆叠在一个固定盒子中；yPercent 将旧的移出、新的移入 |
| 高亮 | 内联块 .hl span 配合 back.out 缩放，或在其后放置标记条 scaleX 0→1 |
| 数字递增 | tabular-nums + onUpdate 写入 Math.round(v) |
字幕（逐词同步）
vybe audio 注入 <script type="application/json" id="vybe-captions"> 提示（{start, end, text, words:[{text,start,end}]}），每个 VYBE 模板都包含一个字幕构建器，为每个提示创建一个元素，并在转录的 start 时间点亮相应单词。按品牌样式：
- 放置于安全区域内，位于下三分之一图形之上，绝不遮挡主体。
- 每个提示 3–6 个单词，最多 2 行，字号 3–3.4cqmin，字重 600+，加遮罩或阴影。
- 高亮当前单词（透明度 0.45 → 1，或通过类名使用强调色）。
- 社交媒体风格：大写、加粗、每个提示弹出缩放；电影感：句子大小写、微妙的淡入淡出。
- 绝不使用估计的单词时间轴进行字幕；行级时间轴必须看起来是行级的。