不用剪辑软件：用代码做一条产品宣传片

不用 Premiere、不用 After Effects，也能用代码做宣传片。把每一幕写成 HTML，用 CSS 和 GSAP 做动画，再用开源的 HTML 转视频框架渲染成 1080p MP4。流程只有三步：改代码 → 浏览器预览 → 导出。30 秒宣传片，从有想法到成片通常不到一小时。

本文一步步讲清这套流程：怎么组织分幕、怎么写确定性动画、怎么渲染——以及真正的杀手锏：下条视频只需改配置文件的文字。

为什么用代码做宣传片，而不是时间线剪辑

时间线软件适合纪录片，对短宣传片反而是负担：

用代码做宣传片，视频就是网页：文案是文本，品牌色是 CSS 变量，中英文版只是换字符串。而且完全确定性——同一份 HTML 渲染两次，得到两次相同的 MP4。

浏览器（Chrome/Chromium）预览分幕。
HTML 转视频渲染器。 HyperFrames 框架（Apache-2.0 开源）按固定帧率把 HTML 渲染成 MP4，动画表现和浏览器完全一致。
起手模板。 HyperFrames Video skill 讲透了整套规范（分幕、时间线、确定性动画），附 20 秒产品宣传片示例；还有现成模板如台灯产品宣传片，逐行可读。

经典 30 秒结构：钩子（0–4s，一句主张）→ 痛点（4–10s）→ 品牌（10–14s，logo 亮相）→ 证据（14–24s，功能或数字）→ 行动召唤（24–30s，停留够久让人读完）。

每幕是一个 <section>，用小时间线串起来。每屏文字极度克制——中文五到八个词。一句话需要一段话来讲，就给它单独一幕：

<section class="scene hook">
  <h1 class="line">30 秒讲清你的产品。</h1>
  <p class="sub">不用相机，不用剧组，只用代码。</p>
</section>

铁律：禁止随机数，禁止墙钟计时器。 动画写成时间 t（分幕开始秒数）的函数，不用 setInterval 或 Math.random()，这样每帧可复现。

实战经验：优先 opacity 和 transform；正文用逐词而非逐字动画（transform 下逐字词间距易出问题）；结尾 CTA 静止至少 3 秒；字体必须打包本地，浏览器会静默 fallback，视频不会原谅。

HyperFrames CLI 在无头 Chromium 里加载作品，按 24/30fps 逐帧截图，交给 ffmpeg 编码。30 秒 1080p 共 720 帧，普通机器几分钟。

渲染前检查清单：分辨率显式指定 1920×1080 并与 CSS 画布一致；/tmp 磁盘空间留足（抽帧是 I/O 重活）；先抽 3–4 张测试帧（--at 快照）看错别字；字体打包本地。

一句实话：这套管线擅长动态图形、动态排版、界面风视频，生成不了照片级实拍。拍不到的画面用 AI 或买素材，文字图形界面用代码。

把可编辑文案收进模板顶部的配置块：

<!-- CONFIG -->
<script>
const CONFIG = {
  brandName: "Solbeam",
  headline: "会思考的灯。",
  ctaUrl: "solbeam.example.com"
};
</script>

下一条宣传片：复制文件夹、改配置、重渲。新语言版本：翻译配置、重渲。"一样的视频换春季促销版"十分钟交货。这就是模板的价值：台灯宣传片模板或播客可视化模板都是一台可复用机器，$5 买一次，以后只是改配置。

和 Sora、Runway 这类 AI 文生视频一样吗？ 不一样。AI 是"幻觉"出画面，给什么是什么；代码是确定性的：每个像素由 CSS 定位，单词拼写精确，品牌色是精确十六进制值。拍不到的用 AI，必须精确的用代码。

JavaScript 要很熟吗？ 基础 HTML/CSS 就够做动态排版宣传片。GSAP API 读起来像英语，复杂时序才用得上。

渲染要多久？ 30 秒 1080p/24fps 共 720 帧，普通机器几分钟。时间主要花在设计和文案上。

能加配音或音乐吗？ 可以：先合成无声视频，再用 ffmpeg 一条命令混音（-i video.mp4 -i audio.mp3 -c:v copy -shortest out.mp4）。音频不进浏览器渲染，时序才确定。

用代码做宣传片，贵的不再是剪辑，而是思考。组织分幕、写短文案、做确定性动画、渲染 MP4，从此每条新视频都是一次配置修改。先从 HyperFrames Video skill 学完整工作流，拿一个现成模板跳过空白页——下次产品发布，文案定稿当天视频就能上线。