
前阵子刷抖音，被一批 Vibe 知识大赏 视频集中击中。

![秩序从噪声里长出来：粒子聚成涡旋](https://developer.qcloudimg.com/http-save/yehe-4509753/3cbc89463ad16d76ad531d68c1d00705.gif)

上面这段动图，**没有一帧来自视频剪辑软件**，全部由代码逐帧渲染。深色底、金色线条、粒子聚字、字幕逐词上跳，讲的是信息论、涌现、意识这种硬核内容，评论区却一片"求教程"。

我也反复看了好几遍，然后干了件拆家的事：把这批视频的制作方式，从宿主框架到组件库，逐条拆开核验。

这篇文章做三件事：核验组件库哪些真存在、用4条样片试出四套技术栈的能力边界、把选栈方法写成一个技能开源出去。样片和成片都转成了 GIF 放在文中，赶时间的话直接看动图。

## 一、先回答那个问题：真不是剪映做的

我拆的对象，就是 **Vibe 知识大赏** 那种样式——对标的是电子智人那条 129 万赞的信息论视频。拆开来看是两层，跟剥洋葱一样：

**宿主框架**，负责时间线、帧渲染、导出 MP4，就两个候选：**Remotion**（React 写视频）和 **HyperFrames**（单 HTML）。**元素库**，是画面里所有看得见的动效积木：逐词弹出的字幕、科技卡、蒙版擦除、镜头推拉、粒子、胶片噪点、转场、3D 物体、线条生长，AI 直接调用，不用从零写动画数学。

两层分开看，网上的清单立刻露馅。我逐条核验，抓出三个会带坑全场的错：

**第一，`@remotion/elements` 这个 npm 包不存在。** Remotion 的"Elements"是 Studio 的元素库协议，源码注入，不是能 `npm install` 的组件库。清单里出现它，后面全错。

**第二，`@remotion/shader` 从未发布过。** 想要 GLSL 只有两条路：`@remotion/three` 里自写 `ShaderMaterial`，或者 Skia 的 `RuntimeEffect`。哪有什么"直接引 shader 包"。

**第三，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 秒，自己看效果：

![01 纯 Remotion：合成波形和频谱全是 Math.sin 现算，不读任何素材文件](https://developer.qcloudimg.com/http-save/yehe-4509753/0e8c2805979fa18799aee31062af29ae.gif)

![02 Remotion+GSAP+Three：Three.js 线框球承载中文卡片，摄像机移动自带视差](https://developer.qcloudimg.com/http-save/yehe-4509753/2b996e131689c57ddf286576cea673c9.gif)

![03 HyperFrames 单 HTML：手写 GLSL 着色器，域曲 FBM 逐像素生成氛围](https://developer.qcloudimg.com/http-save/yehe-4509753/8aed2b4c02b86f1e3eec03b649d7663d.gif)

![04 Skia：极坐标采样路径插值，形状逐帧重建](https://developer.qcloudimg.com/http-save/yehe-4509753/b464189c23a57d7fb29aadd36095a6cd.gif)

再往下是一张 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**，中文名"视觉栈导演"，职责就一句话：把"我想要这样的片子"翻译成"用哪套栈、调哪些元素、拿什么组件写"。

第一步是三问定栈。不问"哪个框架更强"，问"这个需求的约束落在哪"：

![三问定栈决策图：先答约束落在哪，再选栈](https://developer.qcloudimg.com/http-save/yehe-4509753/9827a6c9a8f21fc1e4b6af819e50b88c.png)

第二步是定节奏。这是技能的私货：**技术全对、渲染全过、质检全 PASS，片子依然可能很一般，原因几乎总是节奏。** 硬指标直接拍在桌上：**镜头数 ≥13，切点 ≤5.2 秒**，单镜内 action beat ≥2，同一视觉手段连续出现 ≤2 镜，设计系统组件覆盖率 ≥80%。缺了全局特效栈（手持微动、扫光、快门闪、暗场呼吸、颗粒扫描线、星尘底纹、字幕条七层），幻灯片和成片之间就差着这条线。

第三步列元素清单，每条标"现成 / 手写 / 不可行"。出现"不可行"就回到第一步换栈，别硬刚。

仓库在 GitHub，地址直接放这里：

**https://github.com/TaurenRen/motion-stack-director**

![motion-stack-director 仓库页：SKILL.md、能力矩阵、设计系统源码](https://developer.qcloudimg.com/http-save/yehe-4509753/9d78d71d7794d67999d60fcb307adb60.png)

里面除了 SKILL.md，还有 32 项能力矩阵、四条栈各自的施工要点、一份踩坑笔记，以及一套 720×1280 竖屏设计系统源码（逐词字幕、科技卡、拍立得、噪点扫描线、5 种转场、3 组手写 GLSL）和一个抽帧质检脚本。MIT 许可，随便拿。

技能好不好用，得拉出来遛。我用它做了一条 60 秒的主题样片。

## 四、用技能做一条 60 秒《涌现》

选题是"涌现"——简单规则如何凑出意识与智能。三问定栈的答案很干脆：群体模拟必须逐帧可复现，**选栈 B：Remotion+Three**。

八段递进，一句一句往上叠：

| 段 | 画面 | 所讲问题 |
|---|---|---|
| S1 钩子 | 640 个粒子按几何级数出生，从中心弹射成群 | 一只鸟没有方向感 |
| S2 三规则 | 三张科技卡落位后循环点亮 | 每只鸟只看身边三步 |
| S3 撕裂 | 局部威胁斜穿群体，整群被撕开又合回 | 没有总指挥 |
| S4 黏菌 | 金色菌丝递归分叉，同一张网被拉直成地铁图 | 没脑子的东西做了城市规划 |
| S5 生命游戏 | 5 个细胞到 130 代，高亮一只真滑翔机 | 规则里没写它 |
| S6 尺度跳变 | 同一母题铺满背景持续缩小，四行量级依次入场 | 同一套机制每层重演 |
| S7 双面 | 同一批粒子转红崩散，下跌断崖曲线 | 涌现不挑方向 |
| S8 字标 | 粒子汇聚成"涌现"点阵 | 你永远无法从零件读出整体 |

![《涌现》成片 17 个镜头接触印样](https://developer.qcloudimg.com/http-save/yehe-4509753/91a1a6ccbf12767f8e9d666f945e962e.png)

这是成片的 17 个镜头接触印样，视觉手段一轮一换：胞体辉光、孤独同心环、粒子成字、3D 星云、涡旋方块、纸白打字机、单鸟轨迹、640 只鸟群、菌丝分叉、地铁网络、生命游戏、量级卡片、皮层放电、崩盘断崖、印章划掉、字形汇聚、波浪收尾。

两个我最喜欢的片段转成了 GIF。开头那张涡旋之外，先是同一张网的两种读法：金色菌丝递归分叉，长着长着被拉直成地铁图。

![同一张网的两种读法：菌丝分叉，长成地铁图](https://developer.qcloudimg.com/http-save/yehe-4509753/68b06da014eef233e53ef3aa7f8a4099.gif)

收尾是粒子汇聚成"涌现"两个字。这句话是全片的题眼：

> **金句卡：你永远无法从零件，读出整体。**

![粒子汇聚成「涌现」两个字](https://developer.qcloudimg.com/http-save/yehe-4509753/531332ffc814b858cc0108aa745a8a43.gif)

![《涌现》成片字标段](https://developer.qcloudimg.com/http-save/yehe-4509753/42f8e31ed42aa8bddbe43f791e7e337b.png)

有三处效果，不真正实现一次根本拿不到：

**滑翔机是搜出来的。** 生命游戏那段里，`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 层** | — |

同一时间窗口，初版和高密度版的对比：

![同一时间窗口对比：左边初版 8 镜，右边返工版 17 镜](https://developer.qcloudimg.com/http-save/yehe-4509753/433fcae4f357e6051bb775c186fd5e5b.gif)

左边是初版：稀疏的点加一句"没有总指挥"。右边是返工后：拖尾、读数、涡旋、快切。**差距是两倍的切镜频率**。

逐帧质检又抓出 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，片子依然可能很一般，先查节奏。**

现在这条 60 秒的片子有 17 个镜头，**组件覆盖率 85%**，七层特效栈全程在线。而成片、样片、技能、踩坑笔记，全部在上面的仓库里。

你现在做的知识视频，卡在"不会做"还是"做出来很一般"？评论区说一声，下篇拆呼声高的那个。



前阵子刷抖音，被一批 Vibe 知识大赏 视频集中击中。 上面这段动图，没有一帧来自视频剪辑软件，全部由代码逐帧渲染。深色底、金色线条、粒子聚字、字幕逐词上跳，讲的是信息论、涌现、意识这种硬核内容，评论区却一片"求教程"。 我也反复看了好几遍，然后干了件拆家的事：把这批视频的制作方式，从宿主框架到组件库，逐条拆开核验。 这篇文章做三件事：核验组件库哪些真存在、用4条样片试出四套技术栈的能力边界、把

代码渲染知识视频选栈实录：Remotion/GSAP+Three/HyperFrames/Skia 四栈实测与开源技能

音视频

前端

开发工具

解析爆款知识视频《涌现》制作全流程，实测四套技术栈（Remotion、HyperFrames、Skia、GSAP）能力边界，核验组件库真伪，并开源技能motion-stack-director。从粒子动画、3D渲染到节奏把控，附成片对比与踩坑笔记，教你避开选型雷区，做出高密度视觉冲击力作品。

React Native

GitHub

ReAct 

对象存储COS新用户低至1元！


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

代码渲染知识视频选栈实录：Remotion/GSAP+Three/HyperFrames/Skia 四栈实测与开源技能-腾讯云开发者社区-腾讯云

代码渲染知识视频选栈实录：Remotion/GSAP+Three/HyperFrames/Skia 四栈实测与开源技能

代码渲染知识视频选栈实录：Remotion/GSAP+Three/HyperFrames/Skia 四栈实测与开源技能

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐