一句话结论
Canvas UI 发布 35 个基于 WebGL 和 WebGPU 的开源组件，通过实验性 html-in-canvas API 在保留交互性的真实 DOM 内容上运行 GPU 特效。
关键要点
- 组件库提供 35 个组件，包括流体、火焰、玻璃透镜、ASCII 滤镜、VHS 颗粒和粒子显现效果，均支持 React、Solid、Preact、Vue 和 Svelte 以及原生 TypeScript。
- 每种效果都提供由 GLSL 实现的 WebGL 版本，以及通过 vgpu 使用 WGSL 实现的 WebGPU 版本，代码通过兼容 shadcn 的注册表以源代码形式分发，而非 npm 软件包。
- 完整体验需在 Chrome 中启用 canvas-draw-element 标志，或绑定单一域名的源试用令牌，试用周期覆盖 Chrome 148 至 Chrome 150 版本。
- 项目采用 MIT 许可证加 Commons Clause，允许商业使用但禁止转售，代码仓库 Star 数已超 4600，并支持通过 MCP 协议让智能助手浏览安装组件。
背景与事实
Canvas UI 是由 React Bits 作者 David Haz 推出的开源组件库，它是首个基于实验性 html-in-canvas API 构建的组件系统。该系统的核心机制并非绘制静态位图，而是利用 Chrome 的 html-in-canvas API，在 Canvas 中布局实时 DOM，通过 drawElementImage 捕获内容并上传为纹理，再利用着色器进行变形处理。在这种架构下，文本依然可选，链接能够点击，内容也会保留在无障碍树中，从而在视觉特效与原有交互性之间取得平衡。
项目提供了 35 个组件，包括指针驱动的流体、火焰、玻璃透镜、ASCII 滤镜、VHS 颗粒和粒子显现效果。每种效果均提供两种渲染路径：使用 GLSL 实现的 WebGL 版本，以及通过 vgpu 使用 WGSL 实现的 WebGPU 版本。为降低接入门槛，开发者可以使用官方提供的安装命令 npx shadcn@latest add @canvas-ui/liquid-react 将代码引入项目。切换渲染器时，只需将已安装文件替换为注册表中带 -webgpu 后缀的版本，并添加 vgpu 和 @webgpu/types 依赖即可。
由于 html-in-canvas 功能仍处于实验阶段，要获得完整体验需在 Chrome 中启用 canvas-draw-element 标志，或者使用绑定到特定域名的源试用令牌，该试用从 Chrome 148 持续到 Chrome 150。在其他不支持该特性的浏览器环境中，特效会回退为普通 GPU 叠加层或保持内容原样渲染，而 3D 对象组件则可在所有环境中运行。项目文档指出，Chrome 150 对 texElementImage2D 和 copyElementImageToTexture 的修改不需要迁移，因为内容捕获通过 2D API 完成，纹理上传使用标准的 texImage2D 或 copyExternalImageToTexture。
该项目采用 MIT 许可证加 Commons Clause 发布，允许商业使用但禁止转售组件。代码仓库 Star 数已超过 4600，组件注册表已支持 MCP（Model Context Protocol），允许智能助手通过 shadcn MCP 服务器浏览并安装组件。
影响分析
这一进展对中文前端开发者和 UI 工程师产生直接影响。Canvas UI 将视觉效果从背景图层前移至真实内容之上，解决了传统 Canvas 特效无法与 DOM 交互的痛点。但依赖 Chrome 专有功能意味着跨浏览器体验存在降级，开发者需为 Safari 和 Firefox 用户准备回退方案。使用 shadcn 注册表分发源代码而非 npm 包的方式，将升级管理成本转嫁给项目维护者，需在 CI/CD 流程中处理本地修改与版本同步。结合 MCP 支持，AI 辅助开发工具可直接调用这些特效组件，降低了复杂 GPU 动画的技术门槛。
适用边界
该结论仅适用于主要用户群体为 Chrome 浏览器、且页面允许视觉特效的项目。在严格要求全平台一致性的企业级应用、面向 Safari 或 Firefox 用户为主的场景、以及结账流程、仪表盘等对无障碍和性能有严苛要求的网站中，这种依赖实验性 API 的方案不适用或需谨慎评估。组件禁止转售的限制也不适用于计划将 UI 组件作为商业服务打包销售的 SaaS 平台。
孤本观察
从工程实现看，Canvas UI 通过 IntersectionObserver 停止离屏动画、遵循 prefers-reduced-motion 设置、并在卸载时释放纹理和事件监听器，体现出扎实的底层资源管理意识。该项目以 Chromium 专有 API 为技术支点，在 web 视觉领域构建了新的交互范式，同时也引发了浏览器标准化进程中"先实现后规范"路径的现实争议。
常见问题
Canvas UI 发布了多少个组件，支持哪些框架？
Canvas UI 发布了 35 个组件，包括流体、火焰、玻璃透镜等，支持 React、Solid、Preact、Vue、Svelte 及原生 TypeScript。
在 Chrome 中启用 html-in-canvas 特效需要满足什么条件？
需在 Chrome 中启用 canvas-draw-element 标志，或使用绑定单一域名的源试用令牌，试用周期覆盖 Chrome 148 至 150 版本。
Canvas UI 的许可证类型是什么，允许商业使用但禁止什么行为？
项目采用 MIT 许可证加 Commons Clause，允许商业使用，但禁止转售组件，不适用于将组件打包销售的 SaaS 平台。
如何从 WebGL 版本切换到 WebGPU 版本渲染特效？
将已安装文件替换为注册表中带 -webgpu 后缀的版本，并添加 vgpu 和 @webgpu/types 依赖即可切换。
在不支持 html-in-canvas 的浏览器中，Canvas UI 的特效如何表现？
特效会回退为普通 GPU 叠加层或保持内容原样渲染，而 3D 对象组件可在所有环境中正常运行。
来源：InfoQ 中文 AI