2026-09-25
每日一文 · 长文精读
Canvas UI Ships 35 HTML-in-Canvas Components That Run WebGL and WebGPU Effects Over Live DOM
Canvas UI 发布 35 个基于 HTML-in-Canvas 的组件，可在实时 DOM 上运行 WebGL 和 WebGPU 特效
作者：Daniel Curtis · InfoQ 原文
摘要：Canvas UI 是一个开源组件库，由 React Bits 的作者 David Haz 创建，是首个基于实验性 HTML-in-Canvas API 的库，能在实时交互式页面内容上运行 GPU 特效。它提供 35 个组件，包括流体、火焰、玻璃透镜等效果，每个效果都有 WebGL 和 WebGPU 实现，并支持多种框架。组件使用 Chrome 的 html-in-canvas API 在 canvas 中布局实时 DOM，保留文本可选、链接可点击和可访问性。项目通过 shadcn 兼容的注册表分发源码，需要 Chrome 148-150 或 origin trial token，其他浏览器会回退。许可为 MIT 加 Commons Clause。
Canvas UI, an open source component library from React Bits creator David Haz, has launched as the first library built on the experimental HTML-in-Canvas API, running GPU effects over real, interactive page content.
Canvas UI 是由 React Bits 的创建者 David Haz 开发的开源组件库，作为首个基于实验性 HTML-in-Canvas API 构建的库发布，能在真实的交互式页面内容上运行 GPU 特效。
The library ships 35 components, including pointer-driven fluid, fire, glass lenses, ASCII filters, VHS grain and particle reveals.
该库包含 35 个组件，包括指针驱动的流体、火焰、玻璃透镜、ASCII 滤镜、VHS 颗粒和粒子揭示效果。
Every effect has a WebGL build using GLSL and a WebGPU build using WGSL through vgpu, with wrappers for React, Solid, Preact, Vue, Svelte and dependency-free vanilla TypeScript.
每个效果都有使用 GLSL 的 WebGL 构建和使用 WGSL 通过 vgpu 的 WebGPU 构建，并带有 React、Solid、Preact、Vue、Svelte 和无依赖的原生 TypeScript 的封装器。
Rather than painting a dead bitmap, most components use Chrome's html-in-canvas API to lay out live DOM inside a canvas, capture it with drawElementImage, upload it as a texture and distort it in a shader.
大多数组件并非绘制静态位图，而是使用 Chrome 的 html-in-canvas API 在 canvas 内部布局实时 DOM，通过 drawElementImage 捕获，作为纹理上传并在着色器中扭曲。
Text stays selectable, links stay clickable, and the content stays in the accessibility tree.
文本保持可选，链接保持可点击，内容保持在无障碍树中。
Components are distributed as source through a shadcn-compatible registry rather than as a package: npx shadcn@latest add @canvas-ui/liquid-react
组件通过 shadcn 兼容的注册表以源码形式分发，而非作为包：npx shadcn@latest add @canvas-ui/liquid-react
The full experience needs Chrome with the canvas-draw-element flag, or an origin trial token, which runs from Chrome 148 through 150 and is bound to a single domain.
完整体验需要 Chrome 启用 canvas-draw-element 标志，或使用 origin trial token，该 token 在 Chrome 148 至 150 版本中有效，并绑定到单个域名。
Elsewhere, html-in-canvas effects fall back to a plain GPU overlay or render the wrapped content unchanged, and the 3D object components work everywhere.
在其他浏览器上，html-in-canvas 效果会回退为简单的 GPU 覆盖层或直接渲染包装内容不变，而 3D 对象组件可在所有平台上工作。
Because code is copied into the repository, upgrades mean re-running the install command and reconciling local edits.
由于代码被复制到仓库中，升级意味着重新运行安装命令并协调本地编辑。
Switching renderers is mostly replacing the installed file with the -webgpu registry item, which adds vgpu and @webgpu/types.
切换渲染器主要是将已安装的文件替换为 -webgpu 注册表项，这会添加 vgpu 和 @webgpu/types 依赖。
The project also documents that Chrome 150's changes to texElementImage2D and copyElementImageToTexture require no migration, since capture happens through the 2D API and uploads use standard texImage2D or copyExternalImageToTexture.
该项目还指出，Chrome 150 对 texElementImage2D 和 copyElementImageToTexture 的更改无需迁移，因为捕获通过 2D API 进行，上传使用标准的 texImage2D 或 copyExternalImageToTexture。
shadcn called it one of the most impressive registries they have seen, and the Chrome for Developers account said it was good to see html-in-canvas empowering new frameworks.
shadcn 称这是他们见过的最令人印象深刻的注册表之一，而 Chrome for Developers 账户则表示很高兴看到 html-in-canvas 为新框架赋能。
Writing a detailed teardown, Flavio Copes praised the unglamorous engineering: the Liquid component stops its loop with IntersectionObserver when off-screen, honours prefers-reduced-motion, and releases textures, programs and listeners on unmount.
Flavio Copes 撰写了详细分析，赞赏那些不显眼的工程细节：Liquid 组件在屏幕外时通过 IntersectionObserver 停止循环，尊重 prefers-reduced-motion，并在卸载时释放纹理、程序和监听器。
His advice was to use one strong effect rather than six, and to avoid dashboards, checkout flows and documentation sites.
他的建议是使用一个强烈的效果而不是六个，并避免在仪表盘、结账流程和文档站点中使用。
On Hacker News, one commenter responded to a demo's banner with scepticism about a Google-only capability: Use Chrome... and aren't we supposed to reject these technologies that allow Google to Embrace, Extend, Extinguish?
在 Hacker News 上，一位评论者回应了演示的横幅，对仅限 Google 的功能表示怀疑：使用 Chrome……难道我们不应该拒绝这些让 Google 拥抱、扩展、消灭的技术吗？
Kudos to the artist in spite of this unfortunately esoteric (wish it weren't) concern
尽管有这种不幸的深奥（希望不是）担忧，还是向创作者致敬
Another user replied: The standardization process requires implementations before standardization. And the most recent comments on the WHATWG issue are from Jake Archibald (Mozilla) and Anne van Kesteren (Apple). This isn't a unilateral Google project.
另一位用户回复：标准化过程需要在标准化之前有实现。而 WHATWG 问题上的最新评论来自 Jake Archibald（Mozilla）和 Anne van Kesteren（Apple）。这不是一个单方面的 Google 项目。
Accessibility discussion in the WICG explainer is still open, including how drawable subtrees without updated geometry are exposed.
WICG 解释器中的无障碍讨论仍在进行中，包括如何暴露没有更新几何图形的可绘制子树。
Paper Shaders offers zero-dependency canvas shaders installed from npm, but they sit behind or around content as texture.
Paper Shaders 提供了从 npm 安装的零依赖 canvas 着色器，但它们作为纹理位于内容之后或周围。
React Bits, from the same author, animates DOM directly.
来自同一作者的 React Bits 直接为 DOM 添加动画。
Canvas UI is the only option using the page itself as shader input, which is also why it depends on a feature that Safari and Firefox do not implement.
Canvas UI 是唯一使用页面本身作为着色器输入的选项，这也是它依赖于 Safari 和 Firefox 未实现的功能的原因。
Licensing is MIT plus the Commons Clause, so commercial use is allowed but reselling the components is not.
许可为 MIT 加 Commons Clause，因此允许商业使用，但不得转售组件。
The repository has passed 4,600 stars, and the registry is MCP-ready, letting assistants browse and install components through the shadcn MCP server.
该仓库已获得超过 4600 星，注册表已为 MCP 做好准备，允许助手通过 shadcn MCP 服务器浏览和安装组件。
阅读理解
1. What is the primary advantage of Canvas UI's components over traditional bitmap-based canvas effects?
2. Why might some developers be skeptical about Canvas UI's reliance on the html-in-canvas API?