Canvas UI 是 React Bits 创建者 David Haze 的开源组件库，它是第一个基于实验性 HTML-in-Canvas API 构建的库，该 API 在真实的交互式页面内容之上运行 GPU 效果。
该库附带 35 种物品，包括液体、火、玻璃镜片、ASCII 滤镜、VHS 比特和颗粒。每个效果都具有使用 GLSL 的 WebGL 和通过 vgpu 使用 WGSL 的 WebGPU 渲染，以及 React、Solid、Preact、Vue、Svelte 和 vanilla TypeScript 依赖项的包装器。
大多数组件使用 Chrome，而不是绘制死地图 html-in-canvas 用于将实时 DOM 放置在画布内并注册它的 API drawElementImage将其作为文本加载并在着色器中扭曲它。文本保持可选择，链接保持可点击，内容保持在访问树中。成分作为来源通过 shadcn-compatible 不注册为包：
npx shadcn@latest add @canvas-ui/liquid-react
完整的 Chrome 体验 canvas-draw-element 从 Chrome 148 到 150 运行并绑定到单个域的初始测试标志或令牌。别处， html-in-canvas 效果回落到简单的 GPU 层或完整地包裹内容，并且 3D 对象组件在任何地方都可以工作。
由于代码已复制到存储库，因此更新意味着再次运行安装命令并匹配本地编辑。切换渲染器基本上将安装的文件替换为 -webgpu 添加的注册表项 vgpu 和 @webgpu/types。该项目还记录了 Chrome 150 将做出的更改 texElementImage2D 和 copyElementImageToTexture 不需要迁移，因为记录是通过 2D API 完成的并使用标准上传 texImage2D 或者 copyExternalImageToTexture。
shadcn 称其为他们见过的最令人印象深刻的注册表之一，Chrome for Developers 帐户表示很高兴看到 html-in-canvas 强化新框架。弗拉维奥·科普斯（Flavio Copes）在撰写一篇详细的文章时赞扬了令人难以置信的工程技术：液体部件随之停止旋转。 IntersectionObserver 当离开屏幕时，荣誉 prefers-reduced-motion并卸载文本、程序和侦听器。他的建议是使用一种强大的效果而不是六种，并避免仪表板、现金流和文档站点。
在 Hacker News 上，一位评论者对展示横幅做出了回应，对 Google 单独的能力表示怀疑：
使用 Chrome…我们难道不应该拒绝这些允许 Google 范围、扩展和禁用的技术吗？
尽管存在这种不幸的深奥担忧（我希望不是），但还是对艺术家表示敬意
另一位用户回复：
标准化过程需要实施 前 标准化。 WHATWG 的最新评论来自 Jake Archibald (Mozilla) 和 Anne van Kesteren (Apple)。这不是一个单方面的谷歌项目。
WICG 描述符中的可访问性讨论仍然开放，包括如何在不更新几何图形的情况下绘制子树。
Paper Shaders 提供从 npm 安装的零依赖性画布着色器，但它们作为文本位于内容后面或周围。来自同一作者的 React Bits 直接对 DOM 进行动画处理。 Canvas UI 是唯一使用页面本身作为着色器输入的选项，因此它依赖于 Safari 和 Firefox 不具备的功能。
许可证是 MIT 和 Commons 条款，因此允许商业使用，但禁止转售组件。该存储库已超过 4600 星，该目录已准备好 MCP，允许帮助者通过 MCP 的 shadcn 服务器浏览和安装项目。
