Agu Seguí 发布了为设计访谈节目《First of Kind》（第三季首集对话 Vercel 创始人 Guillermo Rauch）定制的网页生成式动画引擎 Mosaic Studio。该引擎把受访者的代表词汇排布成动态文字肖像，既支撑了网页端的实时动画，也能按帧渲染导出用于片头与社媒宣传的高清视频物料。

画面呈现的是一张以红、白、黑为主的人物侧脸肖像。镜头拉远时能够看清完整的面部轮廓；推近到局部，构成明暗的并不是平滑过渡的像素色块，而是一个个紧密排列、长短不一的矩形文字框，里面放置着 BORGES、LANUS、ARGENTINA 以及 DEPLOY、VELOCITY、SLOP、LATENT 等英文大写单词。

近看是词，远看为什么是一张脸？

文字肖像的核心在于“微观可读”与“宏观成形”的结合。

在近处观察时，每个词块呈现为独立可辨认的英文单词；当视角拉远时，视线不再聚焦于单个字母，而是感知整体的明暗对比与色块。此时，各个词块的位置、大小、文字颜色与背景底色，共同承担了面部的轮廓和光影，如同绘画中的笔触。

作者 Agu Seguí 在复盘时提到，这种以词成画的视觉结构让他联想到查克·克洛斯（Chuck Close）的分块肖像、修拉（Georges Seurat）的点彩画法以及梵高的笔触：每个独立的符号在局部保持自身形态，经由位置和明暗排布，汇聚出连贯的人物面孔。

词语的含义，决定它采用哪套动态皮肤

如果仅把词语当作静态字块排布，画面只是一张字符拼贴。Mosaic Studio 的特色在于根据词义为不同词语分配视觉“皮肤”（Skins）：同类词采用同一组绘图效果和运动规则。

在访谈中，Guillermo Rauch 谈及自身成长、学习编程以及对前端和 AI 的思考。Agu Seguí 意识到，词语带有不同的情感属性：当读到 BORGES（阿根廷作家博尔赫斯）或 LANUS（布宜诺斯艾利斯省拉努斯）时，触动的是人文与文化记忆；而读到 DEPLOY、SLOP、JSON、LATENT 时，唤起的是工程与计算语汇。

系统把这些联想整理为一条贯穿人与机器的语义轴：从人的经历与记忆、手工判断，延伸到商业与受众、代码工具与机器智能，而速度与噪声（摩擦）则作为两组外力横跨两端。这些类别来自设计者的预设约定。作者为不同类别的词语绑定了对应的着色器皮肤，赋予词块截然不同的可见动态：

• BORGES（过往记忆 → emulsion）：用胶片颗粒呼应文化记忆。背景和字母边缘由微小颗粒构成，入场时先出现颗粒团，再逐渐显出单词，像一段显影过程。
• CRAFT（手工工艺 → ink）：对应人的手工审美与判断。近看带有微细的纸纹质感与文字墨边渗开效果，入场时如同一笔毛刷从左到右扫入，且不受相邻故障抖动的影响。
• VELOCITY（速度节奏 → smear）：对应工程交付的步调与速度。画面沿水平 X 轴产生动态拖尾，词块入场时带着向左拉长的残影从左侧涂抹切入，底色带有横向拉伸的噪点条纹，并不时有明亮的光带横掠而过。
• SLOP（摩擦阻力 → corrupt）：表现系统中的混乱、噪声与摩擦。画面呈现故障错块、行滑动与 RGB 色彩分离，并在动态事件中向相邻词块蔓延扩散。
• JSON（代码工具 → cursor）：JSON 是程序常用的数据格式，这里用终端输入的样子表现它。方块光标逐字打出单词，换词时可以先选中旧词、再输入新词；输入结束后，部分获得焦点的词块保留闪烁光标。
• LATENT（机器智能 → latent）：指向尚未定型的模型潜空间。画面表现为持续微动的不稳定点阵，词块入场与切换时经历从粗方块逐步变成清晰字形的过程，词语中间还会显出预先设定的分段接缝（如 LAT|ENT）；这是表现机器智能的视觉隐喻。

这样，一个词不仅带着文字内容，还关联着一套具体的表现规则。换到另一位嘉宾时，可以沿用这些分类与皮肤，再填入新一集的词语和肖像版式。

代码中的分类规则属于预先设定的设计约定，现有词语与皮肤之间建立了明确的数据映射。至于访谈录音中的词汇如何被筛选提取、通过何种流程归入这些类别，公开材料未披露具体过程。

着色器怎样把规则变成画面？

在常规网页中，若用大量独立的 HTML 元素逐个排版并施加复杂动画，浏览器容易出现性能瓶颈。Mosaic Studio 使用 WebGL2 来驱动整套文字网格，其核心在于运用着色器（Shader）——一种运行在 GPU 上的绘图程序，专门负责接收当前帧的状态数据，逐像素计算文字的颜色填充、轮廓变形、发光以及噪点等视觉效果。

整个系统的绘制过程主要由 JavaScript 编写的调度器（scheduler.js）与 WebGL 渲染器（renderer.js）配合，遵循“先算每个词的本帧状态，再批量绘制”的分工：

1. 调度器先算状态：JavaScript 调度器在 CPU 上算出每个词块这一帧该显示什么词、正在出现还是退出、抖动与光晕有多强，再把这些结果成批交给显卡。
2. 渲染器再画画面：系统预先把常用字母画在一张共用的“字母素材表”中，这叫字形图集。GPU 绘制一个词块时，先按索引取出所需的字形，按位置与尺寸排好，再应用对应皮肤的颜色与变化规则。同一套矩形模板可以批量绘制许多词块，不必为每个词单独维护一个网页文字元素。

动态事件与视觉扩散

在调度器的事件表中，词块并不仅是各自静止或独立闪烁，某些视觉效果会在相邻词块之间传播。例如，属于 corrupt（故障）皮肤的抖动事件会向周围词块蔓延。这些变化由预设的动画规则驱动：

• 遇到 ink（墨水）皮肤的词块时，程序会直接跳过（代码中的 continue），不对其施加故障事件；
• 遇到 latent（潜空间）皮肤的词块时，系统触发再生动画（Regen），让词块再次经历由粗块到清晰文字的变化；
• 带有 detox（净化）标记的词块，在接收到故障后会接一段擦除般的动画（Sweep），清除故障显示。

相机运动模糊

早期版本的转场平移与缩放曾显得呆滞生硬。为了增强动感，作者在渲染管线中加入了相机运动模糊（motion.js）：当虚拟相机进行平移或推拉缩放时，着色器沿运动轨迹进行多重取样并混合，让快速运动的文字带上自然的方向感；而在镜头静止或位移极小时，系统会自动跳过模糊通道，既保持文字锐利清晰，也节省渲染开销。

同一套动画，怎样同时用于网页和视频？

在常见的数字创意流程中，网页动画与宣传视频往往由不同工种分别实现：网页端通过前端代码编写交互动画，视频则在动态设计软件中重新排版、打关键帧并渲染导出。一旦文案或视觉版式发生变动，两边往往需要各自修改。

Mosaic Studio 能够同时支持在线网站展示与高清视频导出，其核心在于确定性的帧状态机制：

• 系统中的状态计算函数 evalState(schedule, frame, out) 与绘制函数 draw(f) 不依赖浏览器系统时钟（如 Date.now()），而是由固定的场景配置、预生成的事件表、确定的随机种子以及当前帧号共同决定状态；
• 所有的随机事件均由确定性的伪随机哈希流按种子生成；运动模糊在采样时也会读取确定的前后分数帧相机参数；
• 只要输入相同的场景、事件表、随机种子与帧号，系统便能推导出一致的动画状态。

这种机制让同一套动画逻辑可以按需输出到不同载体：

• 网页端运行：通过浏览器的渲染循环（如 requestAnimationFrame）随时间轴向前推进，实时计算并在画布上绘制。读者可直接访问成品网站 First of Kind 体验实时效果；
• 视频导出：与网页端必须保持实时刷新不同，视频渲染可以按帧逐一推进。可以等这一帧算完再处理下一帧，算得慢会增加导出耗时。画面渲染完成后再编码，例如作者提到的 ProRes 输出；最后仍需按平台规格和后期流程适配。

网页端的交互叙事

在网页端，动画并非单向播放的线性视频，而是一套由状态机调度的交互叙事：

1. 页面以单个核心词 DRAGON 开场；
2. 首次点击（或按 Enter、空格键）触发波纹，从该词向外展开一片背景词墙；
3. 再次交互引入节目片名 FIRST / OF / KIND，随后访谈关键短句逐段自动播放，并在每句后保留阅读停顿，短句周围的关联词块随之高亮；
4. 叙事结束时，一记配色波纹扫过全场，虚拟相机向后拉远，背景填充词逐步退场，剩下的红、白、黑词块聚合成 Guillermo Rauch 的肖像面孔，并浮现节目信息与观看入口。

前两步若无操作，闲置约 3 秒也会自动向下推进；开场也可以用 Enter 或空格键推进，后续短句会自动播放；REVEAL 按钮可跳过叙事直接查看肖像，声音可单独开关。

横竖画幅与镜头适配

确定性机制解决了同帧重算状态一致的问题，但面对不同终端与物料形式，画幅本身仍需专门的布局与取景设计。

在成品网站中，宽屏桌面端采用人物肖像居左、信息面板居右的横向分割；窄屏移动端则转为信息面板居上、肖像横跨整屏宽度的纵向排布。系统并非把全图机械缩小，而是针对不同屏幕重新计算肖像占比、相机取景中心与视口裁剪。原作者在工作台演示中也展示了多画幅比例的预览界面。下方用原视频中的肖像静帧做一个构图练习。切换横竖画幅，观察人物与标题区怎样重排；再放大肖像，比较完整面孔与局部文字。

动手试构图

画幅变了，脸和标题放在哪里？

切换画幅看区域重排，再放大肖像，看“整张脸”怎样变成“一个个词”。

16:9 横屏9:16 竖屏

重置构图

肖像区

FIRST OF KIND · S03/E01One Stroke
DragonGUILLERMO RAUCH节目标题 / 嘉宾 / 合作信息

肖像缩放

1.0×

16:9：肖像在左，节目信息在右。1 倍看整体轮廓。

原图取自主题帖第 2 段视频的高分辨率静帧，裁去原片顶部标题。此处独立重排为教学示意：横竖版共用人物和文案，各自安排区域；数值并非 Studio 的导出预设，未运行原版动画引擎。

一个周末做出来，靠哪些已有基础？

面对这样一个高完成度的系统，很容易让人产生一种误解：是不是向 AI 输入一个简单的提示词，就能自动吐出这样一套系统？

Agu Seguí 把这次工作形容为一个周末里的“低精力投入”。在他看来，原有设计已经完成了大约 80% 的重活。这个判断道出了此次快速制作的前提：他接手时，视觉语言已经成立。

1. 先决的平面设计系统：原有视觉识别与设计语言由设计师 Oliver Hamrin 和 @haris_chc 打造，为系列奠定了基础的版式规范与字体排印体系。系统在此基础上将现成排印转换为屏幕动态形式，而非从零构建视觉风格。
2. AI 的具体定位与职责：作者凭借自身对图形概念与技术的理解来构思提示词；在视频制作环节，他把 FFmpeg 这款音视频工具的大部分编码决策交给了 Claude Opus 5.5。他没有逐项交代 AI 参与了哪些着色器和数学实现。
3. 创作生态工具链互通：设计师在 Paper 中进行词块排版，系统通过 HTML canvas 解析版式并导入 Mosaic Studio 绘制；生成的肖像也可经 MCP 接口送回 Paper 继续调整。多数视觉皮肤来自 Paper Shaders 库，作者特别致谢了开发者 @uuuuuulala 的工程贡献。

编辑器的几个工作区，又把制作分成了不同层次。从演示可以归纳一条由局部到整体的检查路径：先在 Cell Lab 看单个词的皮肤与运动是否合适，再到 Portrait 检查整张脸能否辨认，最后在 Plate、Intro、Outro 等工作区查看不同用途的片段与多画幅预览。这是根据界面提炼的制作方法；作者没有给出逐个按钮的操作教程，Plate 的具体职责也未详细说明。

这几层需要反复往返：一个词的闪烁或拖尾单看很精彩，放回整张脸却可能盖过五官的明暗。先检查整体，再回到局部减弱效果、修改排布，才能兼顾“近看是词、远看是脸”。后续剧集可以沿用皮肤与运动规则，再调整人物版式、核心词汇和节目信息。

此外，系统利用 Web Audio API 将声音设计与词语语义结合：词块状态变化时会触发微小音频颗粒（音粒），其音色按对应的着色器皮肤发声。整个音频分为三层：主体词与片名标题的声音居于前景，虚拟相机位移与配色波纹构成中层起伏，其他背景词块的微弱音粒则形成低音量的环境背景层；作者明确表示这套音频系统目前仍处于半成品状态（WIP），随新剧集推出还将继续演进。

在输出与后期环节，合作工作室 Room3 负责接收引擎制作的各类动态物料，在专业流程中进行剪辑、调整并最终导出营销宣传资产。

照着做一遍：从三个词到两版构图

先用本文的词效台与构图台完成下面的练习，再把这套检查方法用于自己的素材。这是根据案例设计的练习；两处工具演示运动规则和构图，不包含自选照片自动生成肖像或导出影片的功能。Mosaic Studio 的公开编辑器、安装包与完整提示词尚未给出。

1. 写下三个词，以及你希望观众想到什么。 可以先选“个人手记、运算逻辑、命令行界面”，分别写成 NOTEBOOK、ALGORITHM、TERMINAL。每个词后面补一句含义，避免只因某个词流行就把它塞进画面。

2. 在词效台比较三种入场。 向上找到“同一个词，加上运动规则会怎样？”，依次选 BORGES、JSON、LATENT。每次把“入场进度”拖到 0%、50%、100%，观察颗粒显现、逐字输入和粗块变清晰；再把“效果强度”从 0% 拖到 75%，与静态词块比较。也可以点“播放”，看到连续入场。判断重点是：这种运动是否能呼应词的含义，以及停留到最后能否读清单词。

3. 给自己的词手工分配皮肤。 按下表写三行，再回词效台查看相近的样例。这里的映射是练习中的设计选择，换一个语境可以作不同判断；本文工具不会自动提取或分类你的词。

4. 先看脸，再看字。 在“画幅变了，脸和标题放在哪里？”构图台里，把“肖像缩放”设为 1 倍，再推到 3 倍。1 倍检查五官、轮廓和明暗；3 倍检查文字是否读得清、词块怎样组成脸部光影。换成自己的作品时，也用这两个距离检查，不能只盯着某个漂亮的局部效果。

5. 为横版和竖版各留一张构图草稿。 切换“16:9 横屏”和“9:16 竖屏”，把肖像缩放拖回 1 倍。横版看左右分栏，竖版看标题上移和人物重新取景。照此在纸上或设计工具中画两版区域：肖像占多少、标题放哪里、节目与合作信息留在哪里。检查两版的字是否被裁掉、人物是否被挤得太小。这里的比例是练习画幅，不是原版导出预设。

6. 把检查顺序用到自己的制作中。 先在设计工具里完成一张静态文字肖像，再只实现三种代表词的动态；单词效果成立后，放回整张脸检查，最后制作片头、片尾和横竖版。为各版本留一张同一时点的样张，核对标题、词语和人物是否一致。网页另查点击、键盘和窗口变化；视频另查首尾帧、字幕或标志的安全位置及播放效果，再进入剪辑后期。本轮练习可以先完成词语表与两版构图，不必等整套引擎做好才发现设计问题。

开发者实践：Paper Shaders 基础入门

如果想在自己的前端项目中探索着色器动态纹理，可以从开源的 Paper Shaders 开始。以已有的 Vite + React 项目为例，先在项目目录安装依赖。官方建议固定依赖版本，可用 --save-exact 将当前安装版本写入 package.json：

npm i --save-exact @paper-design/shaders-react

新建 src/ShaderDemo.jsx，放入下面的完整组件：

import { MeshGradient } from '@paper-design/shaders-react';

export default function ShaderDemo() {
  return (
    <MeshGradient
      colors={['#5100ff', '#00ff80', '#ffcc00', '#ea00ff']}
      distortion={1}
      swirl={0.8}
      speed={0.2}
      style={{ width: 300, height: 300 }}
    />
  );
}

再在 src/App.jsx 引入 ShaderDemo 并返回 <ShaderDemo />，运行 npm run dev，打开终端显示的本地地址。应当看到一个 300 × 300 的彩色渐变区域。

通过将 speed 参数由 0 调整至 0.2，可以直观观察画面从静态色彩分布变为平滑流动的过程。这是理解着色器绘制背景的基础练习；至于文字蒙版遮罩、多词块状态调度与相机运动模糊等高级功能，则需在此基础上结合 Canvas 与状态逻辑自行实现。

目前可直接访问 First of Kind 成品网站体验完整交互；探索更多效果亦可参考 Paper Shaders 官方文档。