企业官网建设流程全解析

Animate 是一款面向 Claude Code 的程序化动画技能，用单个<canvas>逐帧确定性绘制短片，并渲染成 MP4。它的下一站是全新的WebGL 动效风格：光线行进（ray-marching）3D、子帧运动模糊与 Bloom 辉光，让画面拥有"昂贵的质感"。本文带你提前看懂这一前瞻方向。

🎬 先认识 Animate：一个 canvas 写动画

Animate 的工作方式非常工程师友好——一个文件、一套时间轴、逐帧确定性渲染：

• 每个"作品"（piece）是一个自包含的index.html，由 build.mjs 从模板拼装而来；
• 故事、镜头、音乐全部由代码驱动，renderFrame(t)给定任意时间就能画出精确的一帧；
• 导出时用 headless 浏览器逐帧截图，再交给 ffmpeg 合成视频。

目前内置7 种手绘风格（剪纸、交叉线稿、Riso 印刷、素描本、数学、像素、等距）+ 第 8 个插槽：由你的参考图自动匹配出"你的风格"：

每个风格文件夹都自带 STYLE.md 规则文档、绘制工具包 kit.js、样片和小型 demo，规则见 styles/README.md。

🧩 风格即插件：WebGL 为什么"装得上"

Animate 的架构里，故事语法、时间轴、音频和工具链都不变，变的只是"画法"。风格通过piece.json里的"style": "riso"一行接入。

这意味着未来的 WebGL 风格不需要重构核心：新工具包只需实现同一套钩子（背景、主角、字幕、后处理等），kit/morph.js 的形状变形过渡、镜头系统和 grammar/ 故事语法可以原样复用——甚至 3D 世界之间也能用"旧世界收拢成一个物体、变形为新世界"的招牌转场。

而 new-style.md 描述的"测量参考图 → 画 1–2 帧比对 → 存成风格"流程，将来同样适用于"参考一段 3D 动效视频"。

🌀 前瞻三大件

1️⃣ 光线行进 3D：把世界装进一个着色器

ray-marching（光线行进 / SDF 距离场）技术用一段片元着色器就能渲染出程序化的 3D 世界：没有模型文件，几何体由数学函数描述。

这与 Animate "逐帧确定性" 的理念天然契合——renderFrame(t)传入时间，着色器就能算出那一刻的完整 3D 场景，重渲染任意帧都得到像素级一致的结果，导出与回看都可靠。

2️⃣ 子帧运动模糊：模糊能力已就位

其实 Animate已经有子帧运动模糊，只是目前作用于 2D 风格：

• 导出时加--blur 4，每帧在半个帧间隔内（相当于 180° 快门）画 4 个子帧再取平均，见 export.mjs；
• 渲染接口renderFrame(t, canvas, sub)中的sub参数就是为"帧之间的精确时刻"设计的（kit/morph.js）；

到了 WebGL 时代，子帧模糊可以下放到 GPU 端完成，成本更低、范围更大——快速甩镜、抛物线跳跃等镜头将拥有摄像机实拍般的质感。

3️⃣ Bloom 辉光：让高光"发光"

README 用"Motion that feels expensive（有贵气的运动）"形容 Animate 的追求：闭式弹簧曲线 + 可选运动模糊。Bloom 辉光后处理是最后拼图——让能量条、霓虹灯、粒子拖尾产生光晕溢出，是高成本动效设计的标志性视觉语言，也是纯 2D 手绘风格难以企及的效果。

🛠 地基已打好：导出与评审工具已支持 GPU

值得注意：WebGL 风格还没上架，但工具链已经准备好了——

也就是说，等 WebGL 风格落地那天，build → export → review的既有流水线零改动直接可用。

📋 顺带一提：三道"便宜检查点"不会变

无论 2D 还是 WebGL，Animate 都坚持"先让你批准三样便宜的东西，再花时间渲染"：故事表 → 风格帧（对照参考图）→ 全片分镜板。下图中每个分镜格都标注了时间码、音效和转场去向，可以按格数点赞或点踩：

⏭ 值得期待的节奏

• 当前状态：SKILL.md 明确写着"WebGL motion designnot a shipped style yet"（尚未作为正式风格上架）；
• 关注点：新的styles/风格包、TIMELINE.gpu标记的 demo 作品，以及 export 工具中--blur在 3D 下的表现；
• 如果你想提前理解风格契约，建议读 styles/README.md 的风格钩子列表和 craft.md 的实践经验笔记。

一句话总结：Animate 正把"程序化"从纸面推入空间——光线行进 3D 负责"能画什么"，子帧运动模糊负责"怎么动"，Bloom 负责"多有质感"，而 GPU 工具链已经在门口候着了。