把 HTML 动画渲染成 MP4
用 HTML、CSS 和 GSAP 制作一段可重复导出的短动画。
图片解读
封面把 HTML、CSS、GSAP 和 MP4 并列展示，并提到逐帧渲染。画面没有展示实际导出结果。
SkillPI 作品解读
从一段六秒的产品介绍开始。用 HTML 放置标题、插图和结尾文案，用 CSS 固定画布和各元素位置，再用暂停的 GSAP 时间轴定义入场、停留和退场。先拖动到第 0、3、6 秒确认元素状态和边界，再导出 MP4。
HyperFrames 的官方 CLI 文档给出了 npx hyperframes render --output output.mp4。以能够拖动预览的 HTML 项目作为输入，交付 HTML 源文件与 MP4。若预览正常、导出却缺少字体或图片，先确认资源在渲染环境中可访问。若转场偶尔错位，检查动画是否都由同一条可定位的时间轴驱动。
这个示例是根据作品摘要和公开文档整理的复现路线，尚未运行原作者的工程。项目资料：https://github.com/heygen-com/hyperframes