抖音 Vibe 知识大赏 那类刷屏片------深色底、金色线条、粒子聚字、字幕逐词上跳，讲信息论、涌现、意识------没有一帧来自剪映，全部由代码逐帧渲染。
本文做三件事：核验网上流传的组件库清单哪些真存在；用同一套视觉元素渲 4 条边界样片，实测四套技术栈的能力边界；把选栈方法写成开源技能 motion-stack-director。样片和成片都转成 GIF。
一、先排雷：三个会带坑全场的清单错误
拆解对象是 Vibe 知识大赏样式（对标电子智人那条 129 万赞信息论视频），分两层：宿主框架 负责时间线、帧渲染、导出 MP4，候选只有 Remotion （React 写视频）和 HyperFrames （单 HTML）；元素库是逐词字幕、科技卡、蒙版擦除、镜头推拉、粒子、胶片噪点、转场、3D、线条生长这些动效积木。
两层分开核验，网上清单有三个硬错：
1. @remotion/elements 这个 npm 包不存在。 Remotion 的"Elements"是 Studio 的元素库协议，源码注入，不是能 npm install 的组件库。清单里出现它，后面全错。
2. @remotion/shader 从未发布过。 想要 GLSL 只有两条路：@remotion/three 里自写 ShaderMaterial，或者 Skia 的 RuntimeEffect，没有"直接引 shader 包"。
3. Remotion 主包是双轨许可，别当 MIT 用。 子包写 MIT，但整条链路仍受限，公司营利超阈值要付费。HyperFrames 是 Apache-2.0，GSAP 是 no-charge 非 OSI。商用前不看这一条等于埋雷。
一半的"必备组件库"是营销名。 剩下的光看文档分不出高下，直接渲样片实测。
二、同一套元素，四套栈实测对比
同一套视觉元素、四条技术路线 ，做成可对比样片，不搞炫技拼盘。四条均为 720×1280 / 30fps，每条抽 10 帧算亮度、对比、边缘密度、量化色组，判黑屏、白屏、静帧、元素缺失，4 条全部过检。
| 样片 | 技术栈 | 时长 | 体积 |
|---|---|---|---|
| 01 | 纯 Remotion 核心，零第三方动画库 | 15.2s / 456 帧 | 5.22 MB |
| 02 | Remotion + GSAP + Three + 手写 GLSL | 15.2s / 456 帧 | 8.04 MB |
| 03 | HyperFrames 单 HTML（7 段，含真 Lottie） | 15.0s / 450 帧 | 24.18 MB |
| 04 | React Native Skia / CanvasKit | 14.0s / 420 帧 | 2.92 MB |
同一条"线条生长"需求，四个栈四种写法，每条截 5 秒：
32 项 × 4 栈能力矩阵共 128 格：✓63、◐13、✗52。差异最大的不在格子密集处，而在三条换栈也绕不过的结构性边界：
其一，DOM 排版是隐形红利。 Remotion 和 HyperFrames 跑在浏览器排版引擎上，中文自动折行、flex 分屏、阴影圆角，一行 CSS 就有。Skia 走 CanvasKit 没有 DOM，中文段落折行得自己上 Paragraph builder。做中文知识视频，这条最容易被低估。
其二，3D 和 shader 都不在 Remotion 核心包里。 3D 必须引 @remotion/three，渲染时 frameloop 被强制关成 'never'，场景必须完全声明式。想要发光粒子，GLSL 还是得手写。
其三，确定性既是护城河也是枷锁。 GSAP 必须走 useGsapTimeline() 建 paused timeline 再逐帧 seek，绝不能挂裸 ticker；Math.random 一律换 seeded。换来的是逐帧重渲完全一致、可并发分片；代价是任何依赖真实时间的库都得改造。
工程代价全部来自实测：运行时直接依赖 01 只有 2 个（react + remotion），02 和 04 各 6 个，03 是 4 个。体积每秒 Skia 最省（0.21 MB/s），HyperFrames 最费（1.61 MB/s）。75 个安装包只有 4 个直接依赖，但出片仍需 Node------它省掉的是打包这一环，运行时依赖一个没少。
金句：选错栈的代价，是做到 80% 才发现架构不对，全部重写。
三、选栈技能 motion-stack-director（已开源）
技能把"我想要这样的片子"翻译成"用哪套栈、调哪些元素、拿什么组件写"，分三步：
第一步，三问定栈。 不问"哪个框架更强"，问"这个需求的约束落在哪"：
第二步，定节奏。 技术全对、渲染全过、质检全 PASS，片子依然可能很一般，原因几乎总是节奏。硬指标：镜头数 ≥13，切点 ≤5.2 秒，单镜内 action beat ≥2，同一视觉手段连续出现 ≤2 镜，设计系统组件覆盖率 ≥80%。缺全局特效栈（手持微动、扫光、快门闪、暗场呼吸、颗粒扫描线、星尘底纹、字幕条七层），幻灯片和成片之间就差这条线。
第三步，列元素清单，每条标"现成 / 手写 / 不可行"。出现"不可行"就回到第一步换栈，别硬刚。
仓库内含 SKILL.md、32 项能力矩阵、四条栈各自施工要点、踩坑笔记，以及一套 720×1280 竖屏设计系统源码（逐词字幕、科技卡、拍立得、噪点扫描线、5 种转场、3 组手写 GLSL）和抽帧质检脚本，MIT 许可。
四、技能实测：60 秒《涌现》成片
选题"涌现"------简单规则如何凑出意识与智能。群体模拟必须逐帧可复现，三问定栈答案：Remotion+Three。
八段递进：
| 段 | 画面 | 所讲问题 |
|---|---|---|
| S1 钩子 | 640 个粒子按几何级数出生，从中心弹射成群 | 一只鸟没有方向感 |
| S2 三规则 | 三张科技卡落位后循环点亮 | 每只鸟只看身边三步 |
| S3 撕裂 | 局部威胁斜穿群体，整群被撕开又合回 | 没有总指挥 |
| S4 黏菌 | 金色菌丝递归分叉，同一张网被拉直成地铁图 | 没脑子的东西做了城市规划 |
| S5 生命游戏 | 5 个细胞到 130 代，高亮一只真滑翔机 | 规则里没写它 |
| S6 尺度跳变 | 同一母题铺满背景持续缩小，四行量级依次入场 | 同一套机制每层重演 |
| S7 双面 | 同一批粒子转红崩散，下跌断崖曲线 | 涌现不挑方向 |
| S8 字标 | 粒子汇聚成"涌现"点阵 | 你永远无法从零件读出整体 |
17 个镜头接触印样，视觉手段一轮一换：胞体辉光、孤独同心环、粒子成字、3D 星云、涡旋方块、纸白打字机、单鸟轨迹、640 只鸟群、菌丝分叉、地铁网络、生命游戏、量级卡片、皮层放电、崩盘断崖、印章划掉、字形汇聚、波浪收尾。
同一张网的两种读法：金色菌丝递归分叉，长着长着被拉直成地铁图。
收尾粒子汇聚成"涌现"两个字，是全片题眼：
金句：你永远无法从零件，读出整体。
三处必须真正实现一次才拿得到的效果：
滑翔机是搜出来的。 findGlider() 在真实演化结果里搜：某个 3×3 窗口的 5 个活细胞，4 代后整体平移 (1,1) 才算滑翔机。实测命中第 103 代、坐标 (44,46)，帧与代映射做成非线性：前段慢、中段快进，最后 80 帧再慢下来给停顿。
S7 没有另算一套混乱模拟。 只改 decay 和颜色 uniform------换一套数据去演灾难，等于自己拆了"同一套机制"的论点。
菌丝和地铁共用一张网。 两幕都过 pathLength=1 生长，视觉上是同一条东西换了读法。
过程修掉四个问题：第一版粒子只是零星几十个点像星空，pointSize 从 0.8 提到 1.9、鸟数从 220 提到 640、每只加两级拖尾才成立；640 只两两比较是 41 万次每帧，浏览器跑不动，改均匀网格后构建时间降到 2.9 秒；群体漂出取景框，加相机跟随并用 0.62 阻尼；第一次渲出的"涌现"字是倒的------sampleGlyph 返回 Y 轴向上，canvas 是 Y 轴向下，绘制必须取负。
五、"效果很一般"：返工才是正片
初版评价原话："效果很一般，我希望看到各种绚丽的视觉效果，节奏画面变换要快。"根因不在技术，在节奏和密度：初版 8 段、每段 5 到 10 秒、全片只用 1 个 UI 组件，技术全对但看着就是 PPT。
返工照硬指标逐项对：
| 指标 | 初版 | 返工后 | 基准 |
|---|---|---|---|
| 镜头数 | 8 | 17 | ≥13 |
| 平均镜长 | 7.5s | 3.53s | --- |
| 最长镜 | 10s | 5.20s | ≤5.2s |
| 组件覆盖率 | 1/27 | 23/27（85%） | ≥80% |
| 全局特效栈 | 无 | 7 层 | --- |
同一时间窗口，初版和高密度版对比：
左边初版：稀疏的点加一句"没有总指挥"；右边返工后：拖尾、读数、涡旋、快切，差距是两倍的切镜频率。
逐帧质检又抓出 6 个只在特定帧坏掉的 bug：
- 生命游戏画面全空 ：
state是Uint8Array，对 TypedArray 调.map()，React 元素被强制转成数字，NaN 变 0，一个格子都画不出来，且不报错。 - 整屏纯白 ：白涟漪 0.2 + Glow 1.04 + Flash 0.95，三重
mixBlendMode:screen叠成 2.19，峰值把画面刷白。 - 鸟群看着像星空 ：相机 z 从 14.2 推到 7.4 想拉近，结果群体展布 6.1×10.5 单位，溢出取景框 1.7 倍，反成星海。先读 sim.ts 的 bx/by，别凭画面感觉猜。
- 断崖曲线被波形压住：纵向布局冲突，只剩左边一个红点露出来。
渲染稳定性两条：抽帧用 render --frames= 而不是逐帧 still，快 6 倍；3D 镜头并发必须降到 2，8 会偶发超时，且报错位置误导性地出现在 composition 阶段。
金句：技术全对、渲染全过、质检全 PASS，片子依然可能很一般，先查节奏。
参考
- 开源仓库（SKILL.md / 32 项能力矩阵 / 设计系统源码 / 抽帧质检脚本）：github.com/TaurenRen/m...
- Remotion 官方文档：www.remotion.dev/
- GSAP：gsap.com/ ｜ Three.js：threejs.org/ ｜ Skia：skia.org/
作者：狒狒AI，专注 AI 工具实操与代码渲染视频。