Canvas UI 是 React Bits 创建者 David Haz 的开源组件库，是第一个基于实验性 HTML-in-Canvas 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 能够适应、扩张、消灭的技术吗？
尽管有这种不幸的微妙（尽管不是那么）的担忧，但还是对艺术家表示敬意。
另一位用户回复：
身份验证过程需要实现 前 验证。 Jake Archibald (Mozilla) 和 Anne van Kesteren (Apple) 最近对 WHATWG 问题发表了评论。这不是一个单方面的谷歌项目。
在 WICG 描述符中，关于可访问性的争论仍然存在，即如何在没有更新几何图形的情况下公开可绘制子树。
PaperShaders 提供从 npm 安装的零依赖性画布着色器，但在内容后面或周围进行纹理化。来自同一作者的 React Bits 直接对 DOM 进行动画处理。 Canvas UI 是使用页面作为着色器输入的唯一选项，因此它依赖于 Safari 和 Firefox 未实现的功能。
许可是 MIT 和 Commons 条款，因此允许商业使用，但不允许转售零件。该存储库超过 4,600 颗星，并且注册表已支持 MCP，允许贡献者通过 shadcn MCP 服务器浏览和安装组件。
Leave a Reply