AiRobotNews 人工智能机器人技术网

Claude Opus 5.5 的开源动效栈：10 个仓库的星数、许可与上手命令核对

ROBOT@qwh 13 分钟阅读 开源工具
Claude Opus 5.5 的开源动效栈：10 个仓库的星数、许可与上手命令核对

2026 年 10 月 13 日，@skunzu 发了一条推文，把 10 个开源仓库打包成一套「给 Claude Opus 5.5 用的动效设计栈」，附了一段方形（1080×1080）演示视频。发稿时这条推文约 2.3 万次浏览、281 个赞、34 次转发。

清单里没有一个是新项目。three.js 早过了 11.6 万 star，canvas-confetti 上一次提交停在 2025 年 10 月。这套组合覆盖了 3D 场景、2D 矢量、数据可视化、粒子特效和浏览器内视频转码，这几块正好是让模型生成前端视觉时最容易缺的。

作者说这套栈能让 Opus 5.5「直接写 WebGL 着色器、镜头轨道和实时体积场景」。这句话有宣传成分，仓库本身的状态见下表。下面逐个过一遍，数据取自 GitHub API 与 npm registry，核对时间 2026 年 10 月 14 日。推文里给的是四舍五入的整数（116k、34k……），和实测值对得上。

推文所附演示视频的封面帧，方形 1080×1080

十个仓库一览

#仓库安装包（npm 最新版）star主语言许可最近提交
1mrdoob/three.jsthree 0.186.1116,387JavaScriptMIT2026-10-14
2motiondivision/motionmotion 14.2.034,092TypeScriptMIT2026-10-14
3fabricjs/fabric.jsfabric 7.4.031,489TypeScriptMIT2026-10-12
4ffmpegwasm/ffmpeg.wasm@ffmpeg/ffmpeg 0.12.1517,869CMIT2026-09-29
5visgl/deck.gldeck.gl 9.4.014,661TypeScriptMIT2026-10-13
6catdad/canvas-confetticanvas-confetti 1.9.412,801JavaScriptISC2025-10-25
7pmndrs/drei@react-three/drei 10.7.99,944JavaScriptMIT2026-10-05
8shuding/cobecobe 2.0.15,964TypeScriptMIT2026-09-22
9greggman/twgl.jstwgl.js 7.0.03,016JavaScriptMIT2026-09-09
10rive-app/rive-runtime@rive-app/canvas 2.44.21,219C++MIT2026-10-14

十个里九个 MIT，canvas-confetti 用 ISC，都是宽松许可，商用不需要额外授权。

表格里的 star 数是 2026 年 10 月 14 日的实测值；推文当时写的是 116,000+、34,000+、31,000+、17,800+、14,600+、12,700+、9,900+、5,900+、3,000+、1,200+ 这样带加号的整数，逐个对得上，差的只是零头。

一、three.js：Web 3D 的默认答案

116,387 star，MIT，主语言 JavaScript，最近一次提交就在 2026 年 10 月 14 日。这个体量基本说明它是「网页上做 3D」的默认选择：文档密、示例全、周边工具多。

模型见过的 three.js 代码比小众引擎多，这在生成式工作流里是实打实的优势。

npm i three
import * as THREE from 'three';

const renderer = new THREE.WebGLRenderer({ antialias: true });

仓库：https://github.com/mrdoob/three.js

二、Motion：动画运行时（就是原来的 Framer Motion）

34,092 star，MIT，TypeScript，包版本 14.2.0。这个仓库有一个必须知道的变化：它就是原来的 Framer Motion，README 里写着「Framer Motion is now Motion」，React 项目的导入路径也从 framer-motion 换成了 motion/react，老项目升级要改的就是这一行。

弹簧物理、手势追踪、布局过渡都是开箱的。README 强调它的混合引擎把 JavaScript 和浏览器原生 API 结合起来，能在 GPU 加速下跑到 120fps，这个说法来自官方，实际帧率看具体动画。

React / 原生 JS 装 motion，Vue 项目装 motion-v：

npm install motion
import { motion } from "motion/react"

仓库：https://github.com/motiondivision/motion

三、fabric.js：给 canvas 补上对象模型

31,489 star，MIT，7.4.0，TypeScript。原生 canvas 只给你像素，fabric.js 在上面加了一层对象模型：每个图形都可寻址，能生成、序列化、加动画，也能把 SVG 解析进画布。官方定位就写着「HTML5 canvas 的对象模型与 SVG 解析器」。

npm i fabric
import { Canvas } from 'fabric';

要做「模型生成海报，用户还能自己拖元素改」这类可编辑画布，这层对象模型省不掉。README 里另外列了 @fabricjs/browser 和 @fabricjs/node 两个分发包。

仓库：https://github.com/fabricjs/fabric.js

四、ffmpeg.wasm：把 FFmpeg 搬进浏览器

17,869 star，MIT，包版本 0.12.15。仓库主语言是 C，因为它是 FFmpeg 的 WebAssembly/JavaScript 移植版，录制、转换、串流音视频全在浏览器里完成，文件不用传服务器。README 自己挂的徽章是 stability: experimental，文档在 ffmpegwasm.netlify.app。

包分两个：@ffmpeg/ffmpeg 是主体，@ffmpeg/util（0.12.2）放常用工具函数。

npm i @ffmpeg/ffmpeg @ffmpeg/util

仓库的 apps/ 目录下有六个能直接跑的示例工程：Angular、Next.js、React（Vite）、SolidStart、SvelteKit 和 vanilla。自己从头接线卡住时，照抄比摸索快。

仓库：https://github.com/ffmpegwasm/ffmpeg.wasm

五、deck.gl：交给 GPU 的数据图层

14,661 star，MIT，9.4.0，TypeScript。它做数据驱动的 3D 可视化图层，地图、轨迹、大规模散点这类场景都用得上；推文给的量级是在 GPU 上渲染几百万个带动画的 3D 数据点。npm 上可以装伞包 deck.gl，也可以按需装 @deck.gl/core 这类子包。

npm i deck.gl

仓库：https://github.com/visgl/deck.gl

六、canvas-confetti：零依赖的粒子效果

12,801 star，1.9.4，这套清单里唯一用 ISC 许可的库。功能单一，往 canvas 上打粒子，零依赖，一行调用出效果。

npm install --save canvas-confetti
const confetti = require('canvas-confetti');
confetti();

两个提醒。README 说明它是客户端组件，在 Node 里跑不起来。另外它最近一次提交是 2025 年 10 月 25 日，将近一年没动。这种体量的库不更新多半是够用了，但别指望新特性。

仓库：https://github.com/catdad/canvas-confetti

七、drei：three.js 的现成零件

9,944 star，MIT，10.7.9。它是 react-three-fiber 的配套工具集，npm 上的描述原话是 “useful add-ons for react-three-fiber”，把光照、HDR 环境贴图、相机控制这些重复劳动包成组件。用 three.js 做 React 项目，通常会连着一起装：

npm i three @react-three/fiber @react-three/drei

仓库：https://github.com/pmndrs/drei

八、cobe：5KB 的点阵地球

5,964 star，MIT，2.0.1，TypeScript。一个能交互的 WebGL 地球，点阵风格，推文说塞进 hero 区不到 5KB。API 只有一个默认导出的工厂函数。

npm i cobe
import createGlobe from 'cobe'

落地页想加个「全球可用」的视觉符号，又不想为此引整套 3D 引擎，这种小库更划算。

仓库：https://github.com/shuding/cobe

九、twgl.js：把 WebGL 的样板代码收起来

3,016 star，MIT，7.0.0。原生 WebGL 的样板代码又多又容易写错，twgl.js 把编译着色器、绑定缓冲、设置顶点属性这些动作收成几行调用，README 的定位是「一个小型 WebGL 辅助库」。它不接管渲染循环，适合想自己控制绘制流程的场合。

npm install twgl.js

README 里另有一个 twgl-base.js 分发包。

仓库：https://github.com/greggman/twgl.js

十、rive-runtime：状态机矢量动画的内核（网页端别直接装这个）

1,219 star，MIT，主语言 C++，最近提交 2026-10-14。这个仓库需要单独说明：它是最底层的 C++ 运行时，负责加载 .riv 文件、推进状态机和动画，通过抽象的 Renderer 接口绘制，内置 GPU 渲染后端覆盖 Metal、Vulkan、D3D11、D3D12 和 OpenGL/WebGL。苹果、安卓、Flutter、Unity、Unreal 以及 Web 的运行时，都是在它外面包的壳。

所以网页项目别直接装 rive-runtime：Web 端用 @rive-app/canvas（2.44.2），React 项目再加 @rive-app/react-canvas（4.36.0）。想自己编译这份 C++ 代码的话，README 要求 C++17 工具链，macOS 上先装 Xcode Command Line Tools。

npm i @rive-app/canvas

仓库：https://github.com/rive-app/rive-runtime

同层重叠的几个库，怎么分工

three.js、deck.gl、cobe、twgl.js 都跑在 WebGL 上，层级不一样，按需求挑就不会纠结：

库层级什么时候选它
three.js完整 3D 引擎要场景、相机、灯光、材质这一整套
deck.gl数据可视化图层数据量大、以地图或坐标为主，不想自己搭渲染管线
twgl.js辅助函数库想自己控制渲染流程，只是不想重复写样板代码
cobe单一组件只要一个地球，别的都不要

2D 这边是两条不同的路。fabric.js 面向可编辑的画布对象，适合做编辑器、海报、标注这类要给用户改的东西；Rive 面向设计输出的矢量动画，动效在 Rive 编辑器里做好再导出，由状态机驱动。前者数据结构好生成，后者更贴近设计师的工作流。

动画层面，Motion 管的是 DOM 与 React 元素的入场、退场和布局过渡；三维场景内部的动画仍然要靠自己写。两者不冲突，一个页面里常常是同时用。

这套栈怎么组合

几条现成的搭配，按项目类型挑：

场景组合
3D 产品页three.js + drei 打底，Motion 管页面与场景之间的过渡
数据大屏deck.gl 铺图层，cobe 放地球，canvas-confetti 做指标达成的反馈
图像 / 视频工具fabric.js 负责画布编辑，ffmpeg.wasm 负责合成与转码
品牌矢量动效Rive 的状态机动画替手写关键帧

最小依赖示例：

npm i three @react-three/fiber @react-three/drei motion

这十个仓库都不是新东西，它们本来就是前端视觉的常用件。推文的作用是把「做动效该装什么」整理成了一份能照着抄的清单。

资料来源

#three.js#WebGL#前端动画#开源仓库#动效设计