在出海笔记 13 里，我在结尾埋了一个坑：
“也许在下一次的跨国提案里，我的 HTML 幻灯片上就会多出几段极其克制的高级代码动画。咱们下期见。”
这次是来填坑的。
不过事情的走向有点出乎我意料。动画这件事，不是先用在了客户提案里，而是用在了今年 OA2026 海洋仪器展会的公众号宣传视频上——一份需要自动播放、没有人工翻页、必须靠自己“会讲故事”的东西。
这个需求，比 Pitch Deck 更苛刻一个量级。
第一部分：静态幻灯片的“沉默问题”
上期聊了 HTML 解决了 PPT 的排版跑版问题。但做过对外宣传物料就知道，“不跑版”只是及格线。
公众号视频、展会宣传片面对的不是坐在会议室里配合你翻页的客户，而是刷屏途中随时可能划走的陌生人。他们不会在第一帧等你，他们的注意力只停留三秒。
静态幻灯片的死穴就在这里：它的信息是等待被阅读的，而不是主动传递的。
动画解决的不是“好不好看”的问题，而是“谁先开口”的问题。
第二部分：七个导演指令，从零到一场会自己讲故事的视频
我把这次 OA2026 宣传视频用到的动效整理成七个场景，每一个都是一句话需求、AI 来实现的结果。
一、打字机效果
封面页副标题逐字打出来，光标在最后一个字符后闪烁。六个字在空白里一个一个长出来，比静态文字多了一种“它在跟你说话”的感觉。
适合口号和标语，不适合正文——打字机用多了就变成噪音。
二、梯次入场（Stagger）
每一页的内容不是整页同时出现，而是按层次先后亮起：标签 → 主标题 → 正文 → 辅助信息，依次进场。
这是整个视频最底层的逻辑，在替代“演讲者的停顿”——没有人现场翻页讲解，就让时间差来引导眼睛。
三、产品图浮动循环（Float Loop）
产品图轻微上下漂浮，像悬浮在水里。位移幅度极小、周期慢，慢到让人察觉不出，但盯两秒之后会突然意识到“它是活的”。
这个动画有一种无意为之的叙事——仪器本来就在水里工作。
四、图片揭幕（Image Reveal）
产品图入场时，一块遮罩从左往右滑开，像拉开一块布。遮罩还没滑完，人已经在猜下面是什么。
五、SVG 节点自动轮流高亮
声学载荷那页，三款产品（AquaVision / GeoTexture / GeoChart）标注在 AUV 图上各自的安装位置，依次亮起、变大、显示参数，其他节点同时变暗，循环播放。
三个产品在自己做自我介绍。这件事在 PPT 里很难实现——手动触发太麻烦，自动播放动画一旦节奏偏了就一团乱。HTML 的计时器永远不会乱。
六、扫描线背景（Scanline）
深色背景上叠一层极细的横向条纹，缓慢移动。背景像有一层呼吸，不是静止的。最终用了双层错相，两层相位差让“呼吸感”更不规则、更自然。
七、隐藏 UI 模式（H 键）
录屏时浏览器的按钮和导航不能出现在画面里。H 键一按，所有控件消失，页面只剩内容。再按一次恢复。
不是视觉动画，但是录屏工作流里不能少的一环。
第三部分：怎么给 AI 下“导演指令”
这是我在这个项目里学到的最重要的一件事。
不需要懂代码，不需要知道毫秒是什么——你只需要描述你看到的画面，AI 负责把它变成代码。
弱指令让 AI 乱发挥：
“让这页更有动感”／“加一些高级的动画”／“做得专业一点”
“动感”、“高级”、“专业”在 AI 和你之间没有共同坐标，它只能猜。
强指令描述行为和顺序：
- “三个节点依次亮起来，轮流切换，循环播放”
- “标题先出现，然后副标题，然后正文，一层一层”
- “产品图入场的时候，用一块遮罩从左往右揭开”
- “背景加一层缓慢移动的扫描线，赛博感”
感觉说不清楚的时候，用类比：
- “进入速度像抽屉被缓慢推开”
- “切换要快，像翻杂志”
- “产品图像漂在水里，轻轻上下”
具体的时间、曲线、参数——那是 AI 该操心的事，不是你的。
第四部分：HTML 转视频的完整流程
最终交付的是一个 .mov 文件，用于公众号发布。流程是：
- 用 Safari 打开 HTML 文件（Safari 的全屏渲染比 Chrome 更干净）
- 按 H 键隐藏所有 UI 控件
- 按
Cmd + Shift + 5打开 QuickTime 录屏，选择“录制整个屏幕” - 等 HTML 视频自动走完全程（OA2026 版本总时长 93 秒）
- 停止录制，导出 .mov
这个流程零成本：不需要任何视频剪辑软件，不需要录屏插件，不需要渲染等待。HTML 就是它自己的“渲染引擎”，QuickTime 只是在旁边拍了一段它在运行的过程。
有一件事我没有在前面提——这份最终版视频，从第一版 HTML 到跑通，中间经历了 8 个版本的迭代。
不是因为 AI 不聪明，而是因为“做对”和“做好”之间，永远隔着几轮真实的眼睛看过去之后的“这里不对”。文字提亮、扫描线加深、产品图换图、某个节点的位置微调……这些判断，AI 没有办法替你做，它只能在你说出“这里不对”之后，立刻给你一个新版本。
8 个版本，大概两个小时。如果用传统方式——找设计师沟通、出稿、反馈、修改——这个周期不会少于三天。
这才是 AI 协作真正改变的东西：不是“一次成功”，而是让收敛的速度快到不像话。
第五部分：BGM 是被低估的第八个导演指令
视频剪完之后，我意识到有一件事情被我之前完全低估了——配乐。
不是说没有 BGM 视频就不能看。但没有 BGM 的宣传视频，和有一首对的 BGM 的宣传视频，给人的感受差距大到不像同一个东西。
这次选的是 Ludovico Einaudi - Experience，截取从 1:30 开始的那段。
为什么是它：
Einaudi 是意大利作曲家，极简主义风格，钢琴 + 弦乐，曲子里有一种克制的辽阔感。Experience 的整体结构是渐进的——开头安静，1:30 之后弦乐进来，有一种低沉的推进感，像什么东西在缓慢上升。
这种气质和深海仪器的场景意外地契合：不是激烈的冲击，是在水下的那种沉静和确定。产品图浮动、扫描线慢移、节点轮替高亮……这些动画的节奏，配上 Experience 1:30 之后那段弦乐，有一种互相托住对方的感觉。
剪映自带 BGM 的问题不是“不好听”，而是听众已经听疲劳了——那些曲子出现在太多内容里，一响起来脑子就自动切成背景噪音。一首陌生但情绪准确的曲子，反而会让人停下来多听两秒。
B2B 宣传视频选 BGM 的一个粗糙原则：
- 节奏不要比产品“快”——仪器类、工程类产品，慢节奏更有说服力，快节奏会显得像快消品
- 旋律不要比画面“满”——如果动画本身已经有信息密度，BGM 要留空间，不是再塞一层叙事
- 陌生感比熟悉感更值钱——剪映热门榜的曲子在你的视频里响起来，观众听到的是“又一条”
还有一件比选曲更令我意外的事。
当 BGM 和换页节奏对不上，即使你没有意识到，身体会先感觉到——每次切页的时机不对，看起来就像一个踩错拍的舞步。
解决这件事，过去需要视频剪辑软件手动拖时间轴一帧一帧对齐。现在的做法是：把 MP3 文件交给 AI，让它分析 BPM 和节拍点，然后自动把 11 页幻灯片的显示时长全部对齐到最近的整数小节。全程我没有打开任何剪辑软件，没有手动调整任何数字。
换页落在节拍上。就这一句话，但做到这句话以前，需要的工具和时间成本根本不值得为一个宣传视频投入。现在值得了。
结语：80分的成果，和它真正的价值
做完这套东西，我给自己打了个80分。
HTML 的视觉语言很统一，动画逻辑也跑通了。但有一件事它替代不了：人一页页坐下来思考“这一页要讲什么故事、用什么方式讲”的那种细节感。很多真正能打动客户的叙事，只有在反复梳理中才能搞清楚——这个部分，AI 给不了，只能自己来。
但这80分是怎么来的？原本需要一周的工作，两小时之内完成了可以交付的版本。
这才是这套工具链真正改变的东西：它不是把人替换掉，而是把原本被工具占据的时间还回来——还给思考，还给判断，还给那些真正值得花脑力的事。
剩下的20分，有时间再去补。