# HyperFrames 网站转视频：把自己的活动页做成20秒产品导览

示例工程由本站编写，并用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. 先打开真正能操作的活动页

用浏览器打开website/index.html。它是原创虚构慢行活动页，包含首屏、三个行程点和可展开的雨天FAQ；不采集报名或付款。先点击按钮和FAQ，确认页面实际状态与导览内容对应。

## 2. 决定20秒只讲哪三个状态

按首屏6秒、路线7秒、雨天FAQ7秒拆分。不要只把整页长截图缩小到读不清；页面滚动后要重新拍到当前区域，展开项的文字也要完整。

## 3. 拍摄这三种真实页面状态

本站示例通过实际浏览器操作取得site-hero.png、site-plan.png和site-faq.png，已放在project/assets。更换为自己的网页时，同样拍首屏、关键操作和操作后的结果；不把手写网页说成第三方网站截图。

## 4. 把截图放进可编辑镜头

检查project/index.html三个scene的img路径。右侧保留真实页面，左侧只解释当前镜头的目的；图片使用contain保证文字与按钮不被裁走。若网页更长，拆分镜头，不放大模糊截图。

## 5. 在Studio回看导览逻辑

运行检查后进入Studio，定位3、9、17秒。确认第一幕有路线入口、第二幕能看清三个时间点、最后一幕真的展开了雨天方案。这里只录入真实页面状态，不生成不存在的功能。

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

## 6. 导出20秒网站介绍视频

在project目录导出，核对1280×720、24fps、20秒。把输出同website/index.html对照：按钮名称、日期和FAQ必须一致；网页后续改版时也要更新片子。

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

## 7. 用成片检查字号与节奏

看随包实际MP4的三段镜头，暂停后应能读出当前关键信息。旁白、字幕可以在自己的项目加，但要重新安排时长；不能把文字密度翻倍而保留原来的6秒。

## 8. 把它替换成自己的网页

先确认有权录制并公开该页面，保留自己的截图和原页面副本。可用HyperFrames官方capture工作流新建另一个工程，也可以沿用本例三状态截图法；本例没有冒称已执行capture自动建片。

```bash
python3 verify.py
```

## 素材来源与许可

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

## 官方资料

- https://hyperframes.heygen.com/guides/product-launch-video
- https://github.com/heygen-com/hyperframes-launches/tree/main/website-to-hyperframes