温水煮代码
作品 & 能力
技术科普动画短视频：用代码生成，不用剪辑软件
用 Remotion（React + TypeScript）把动画视频当成前端项目来写：一帧画面就是一次组件渲染，时间轴是代码里的常量。产出 1080×1920 / 30fps 的竖版成片，配 TTS 旁白、程序合成音效和背景音乐。
为什么用代码做视频
剪辑软件做这类信息密集的科普片有个死结：改一个字，后面全要重排。文案改了一句、旁白时长变了 0.3 秒，时间轴上所有素材都得手动往后拖一遍。
代码化之后，这件事变成了：改文案 → 跑一次脚本重新生成旁白 → 实测每段音频的真实时长写进 JSON → 画面节奏读这份 JSON 自动对齐 → 重新渲染。配音和动画永远严丝合缝，而且改十次的成本和改一次几乎一样。
这套工程长什么样
| 文件 | 是什么 |
|---|---|
config.json | 文案分段、音色、每段的时长预算、预览帧号 |
shots.ts | 时间轴的唯一真相：节拍、字幕、音效挂点 |
voiceDurations.json | 脚本实测出来的旁白时长（改文案后必须重跑） |
rig/、components/ | 舞台与画面元件：封面、字幕、转场、结尾 |
theme.ts | 该片专属配色，从共享基座 re-export |
多个片子共用同一份依赖、字体、配色基座和生成脚本，一个目录一条片。还有几个辅助脚本：重新生成旁白、合成音效、渲染关键帧静图（改画面先看静图，比每次渲整片快得多）、同一句话用 9 个候选音色各念一遍来挑音色。
攒下来的做片经验
做到第五条才算摸到门道，这些是每一条踩出来的：
旁白不许念画面上的字画面横杠已经写着「第一步 写一个留言表单」，旁白再念一遍就是纯冗余。这是最容易犯又最刺耳的错。
句子要写碎短句、省略、口语。完整主谓宾念出来就是说明书腔。
别当老师不要「我教你」「你需要」「首先我们要」，用第一人称讲自己怎么干。
深色高对比浅底白卡片在信息流里会糊，小屏上没有重量。整片重导成深色是效果提升最大的一次改动。
代码不要一次全亮17 行同时亮就是一堵墙。任何时刻只亮「正在说的那行」。
能用真实截图就别画观众照着做能对得上，可信度完全不同。
受众换了，规矩就得换讲给不懂技术的人听，就一行代码都不能出现，旁白里一个术语都不许有——说「厂里都连着同一个 wifi」，不说「在同一个局域网内」。
结尾把话头交出去不下结论，最后一句反过来问观众「你觉得这个建议好吗」，评论区自己会吵起来。
教程类比对比类更容易讲清楚——对比结构信息密度低，三步结构观众知道自己在哪。
已经做出来的片子
| 日期 | 片名 | 讲什么 | 公众号原文 |
|---|---|---|---|
| 2026-07-17 | 10 万条数据导入 Excel | 三种程序员的三种做法 | 读原文 ↗ |
| 2026-07-23 | 大列表渲染（虚拟列表） | 十万条列表怎么写不卡 | 读原文 ↗ |
| 2026-08-11 | 三步做个留言通知 | HTML 表单 + 17 行 Python，留言发进邮箱 | 读原文 ↗ |
| 2026-08-17 | AI 项目上线咨询 | 源码评估 + 部署方案 | 读原文 ↗ |
| 2026-08-25 | 不是所有项目都需要服务器和数据库 | 十几个人用的项目，自己电脑当服务器 + SQLite + 邮箱备份 | 读原文 ↗ |
成片都发在公众号「温水煮代码」和抖音上，这里只放一支做示例——自建服务器带宽有限，视频挂在这儿看反而更慢。
这类活我能接
产品介绍片、功能演示、技术科普、数据可视化动画——尤其是需要频繁改动或批量生产的那种：同一套模板换数据出一百条、每月更新一版、多语言各出一条。这正是代码化视频比剪辑软件强的地方。