# HyperFrames 中文文字动效：做8秒竖屏标题并检查手机可读性

示例工程由本站编写，并用HyperFrames 0.8.159实际本地渲染。未调用Claude Code或远端文本/视频模型；读者可用随包提示词在自己的代理会话重做。

## 快速开始

在project目录先运行：

```bash
npx hyperframes@0.8.159 check --json
npx hyperframes@0.8.159 preview --background --no-open
```

Studio可编辑预览。检查本题事实与画面后按正文命令导出；可先播放随包output.mp4。

## 1. 锁定手机竖屏的文字规格

阅读title-spec.json：1080×1920、8秒，标题为把周末/留给散步，日期10月24日14:30。它是原创虚构活动片头，不是现实报名通知。先把必读文字与装饰文字分清。

## 2. 先排好静态安全区域

本例左右各110像素、上方220像素、底部300像素留白。安全区是本片的编辑选择，不保证所有平台界面都相同；发布前仍要在对应手机页面预览。

## 3. 让中文标题按完整行出现

在project/index.html找到kinetic-title，先验证两行标题自然可读。主标题可用有意的展示换行，正文不要硬插很多换行。字体文件随工程打包，避免换电脑后出现方框。

## 4. 把入场、停留和退出分开

标题从0.4秒进入，日期从1.5秒出现，6.6秒开始退出。使用y、x和opacity驱动单一时间轴；日期不能与主标题同时快速闪过，停留阶段要能读完。

## 5. 在Studio检查三种时刻

运行检查，分别看1秒入场、3.5秒停留与6秒退出前。若停留画面被边缘切掉，先改字号和容器宽度；不要用更快动画掩盖排版问题。

```bash
npx hyperframes@0.8.159 check --json
npx hyperframes@0.8.159 preview --background --no-open
```

## 6. 保持9比16导出

导出后核对1080×1920、24fps与8秒。不要把竖屏塞进横屏根容器再误称9比16；随包文件是本题实际竖屏MP4。

```bash
npx hyperframes@0.8.159 render --output ../my-output.mp4 --fps 24 --quality high --workers 2 --strict
```

## 7. 缩到手机尺寸再读一遍

将成片在手机或窄屏播放器打开，确认标题两行和日期都能读到。本文的关键帧图来自实际MP4；它们展示的是文字片头本身，不是生成模型的界面。

## 8. 用自己的标题做第二版

在副本里改标题、日期和字号，重复静态排版、入场、停留、退出检查。标题变长后必须重新核对手机可读性，不能只把同一个1200像素封面文字粘进竖屏。

```bash
python3 verify.py
```

## 素材来源与许可

见THIRD-PARTY-NOTICES.md。project/assets含本地字体与GSAP，保留许可证；模型/代理调用与本地渲染分开计费。

## 官方资料

- https://hyperframes.heygen.com/guides/motion-graphics
- https://hyperframes.heygen.com/examples