Canvas UI发布35个组件：基于HTML-in-Canvas实现GPU特效

React Bits作者David Haz推出开源组件库Canvas UI，这是首个基于实验性HTML-in-Canvas API构建的组件库，可在真实、可交互的页面内容上运行GPU特效。该库提供35个组件，涵盖指针驱动的流体、火焰、玻璃透镜、ASCII滤镜、VHS颗粒和粒子显现等效果。

每种效果均提供使用GLSL实现的WebGL版本，以及通过vgpu使用WGSL实现的WebGPU版本，并为React、Solid、Preact、Vue和Svelte提供封装，同时支持无依赖的原生TypeScript。多数组件并非绘制静态位图，而是使用Chrome的html-in-canvas API在Canvas中布局实时DOM，通过drawElementImage捕获内容并上传为纹理，再利用着色器进行变形处理，文本仍可选择、链接仍可点击，内容也保留在无障碍树中。

组件并非以软件包形式发布，而是通过兼容shadcn的注册表以源码形式分发。要获得完整体验，需在Chrome中启用canvas-draw-element标志或使用源试用令牌，该源试用从Chrome 148持续到Chrome 150，令牌只能绑定一个域名；其他环境中特效会回退为普通GPU叠加层或保持原样渲染，3D对象组件则可在所有环境运行。由于代码直接复制到项目仓库，升级时需重新运行安装命令并处理本地修改。

shadcn称这是其见过最令人印象深刻的注册表之一，Chrome for Developers账号也表示乐见html-in-canvas为新框架赋能。Flavio Copes撰文称赞其扎实的工程实现：Liquid组件离开可视区域时通过IntersectionObserver停止动画循环，遵循prefers-reduced-motion设置，并在卸载时释放纹理、程序和事件监听器；他建议只用一个足够亮眼的特效，避免在仪表盘、结账流程和文档网站中使用。

在Hacker News上，有评论者看到演示页面的提示横幅后，对这项仅限Chrome使用的能力表示怀疑，担心重演“拥抱、扩展再消灭”的路径。不过标准化流程要求先有实现再制定标准，WHATWG相关议题中近期评论分别来自Mozilla的Jake Archibald和Apple的Anne van Kesteren，并非Google单方面推动；WICG关于无障碍访问的讨论仍在继续。