这是什么？
Canvas UI 是一个开源的创意画布组件库，用于构建生动的交互式网页效果。每个组件直接在你的真实、仍可点击的 HTML 上绘制流体模拟、着色器效果或 3D 场景。
Canvas UI 是一个开源的创意画布组件库，用于构建生动的交互式网页效果。每个组件直接在你的真实、仍可点击的 HTML 上绘制流体模拟、着色器效果或 3D 场景。我是把它作为 npm 包安装，还是把源码复制进项目？按通常意义来说两者都不是——组件通过兼容 shadcn 的注册表复制到你自己的仓库，源码直接进入你的代码库（components/canvasui/）供你编辑，而不是作为隐藏依赖。
按通常意义来说两者都不是——组件通过兼容 shadcn 的注册表复制到你自己的仓库，源码直接进入你的代码库（components/canvasui/）供你编辑，而不是作为隐藏依赖。怎么把组件加到我的项目里？如果还没设置过 shadcn，先运行 'npx shadcn@latest init'，然后用 shadcn CLI 添加具体组件，替换为组件名和你的框架（react、solid、preact、vue、svelte 或 vanilla）。
如果还没设置过 shadcn，先运行 'npx shadcn@latest init'，然后用 shadcn CLI 添加具体组件，替换为组件名和你的框架（react、solid、preact、vue、svelte 或 vanilla）。它支持哪些框架？每个组件都为六个框架发布——React、Solid、Preact、Vue、Svelte 和原生 JS——同时提供 WebGL 和 WebGPU 两种构建。
每个组件都为六个框架发布——React、Solid、Preact、Vue、Svelte 和原生 JS——同时提供 WebGL 和 WebGPU 两种构建。HTML 上屏的实时效果在所有浏览器里都能用吗？不是——完整的 HTML 上屏（HTML-in-canvas）效果会重绘并扭曲你的真实 DOM，目前需要开启 canvas-draw-element 标志的 Chrome 或 origin trial 令牌。在其他环境中，组件会回退到 GPU 覆盖层以保证页面正常工作；而独立的 3D 物体效果在任何浏览器都能渲染，完全不需要标志。
不是——完整的 HTML 上屏（HTML-in-canvas）效果会重绘并扭曲你的真实 DOM，目前需要开启 canvas-draw-element 标志的 Chrome 或 origin trial 令牌。在其他环境中，组件会回退到 GPU 覆盖层以保证页面正常工作；而独立的 3D 物体效果在任何浏览器都能渲染，完全不需要标志。可以不受限制地商用吗？基本上可以——它采用 MIT 加 Commons Clause 许可，因此无论是否商用，在自己的项目中都可以免费使用。Commons Clause 只是禁止你把 Canvas UI 本身当作产品转售。
基本上可以——它采用 MIT 加 Commons Clause 许可，因此无论是否商用，在自己的项目中都可以免费使用。Commons Clause 只是禁止你把 Canvas UI 本身当作产品转售。WebGL 和 WebGPU 两种构建有什么区别？WebGL 构建是默认渲染器，直接使用 WebGL2 和 GLSL，除了用于 3D 效果的 three 之外没有其他依赖。WebGPU 构建通过一个叫 vgpu 的库用 WGSL 着色器渲染，保持相同的 props 和 API，但需要支持 WebGPU 的浏览器，如 Chrome/Edge 113+、Safari 26+ 或 Firefox 141+。
WebGL 构建是默认渲染器，直接使用 WebGL2 和 GLSL，除了用于 3D 效果的 three 之外没有其他依赖。WebGPU 构建通过一个叫 vgpu 的库用 WGSL 着色器渲染，保持相同的 props 和 API，但需要支持 WebGPU 的浏览器，如 Chrome/Edge 113+、Safari 26+ 或 Firefox 141+。一共有多少个组件，覆盖哪些类型的效果？共有 35 个组件，分为几大类：流体与运动（Liquid、Ripple、Cloth）、火焰与能量（Blaze、Force Field、Laser）、玻璃与光学（Glass、Frost、Magnify）、复古与故障（VHS、Glitch、Asciify）、粒子与结构（Shatter、Particle Reveal），此外还有可渲染任意 GLB/glTF 模型、SVG 或图像的 3D 物体效果。
共有 35 个组件，分为几大类：流体与运动（Liquid、Ripple、Cloth）、火焰与能量（Blaze、Force Field、Laser）、玻璃与光学（Glass、Frost、Magnify）、复古与故障（VHS、Glitch、Asciify）、粒子与结构（Shatter、Particle Reveal），此外还有可渲染任意 GLB/glTF 模型、SVG 或图像的 3D 物体效果。我的 AI 编码助手能帮我安装这些组件吗？可以——组件注册表支持 MCP，Claude Code、Cursor、VS Code、Codex 和 OpenCode 等助手只需一句话就能浏览并安装组件，例如“从 Canvas UI 添加 Liquid 组件”。
可以——组件注册表支持 MCP，Claude Code、Cursor、VS Code、Codex 和 OpenCode 等助手只需一句话就能浏览并安装组件，例如“从 Canvas UI 添加 Liquid 组件”。3D 物体效果也需要那个特殊的 Chrome 标志吗？不需要——Shatter、Particle Object、Glass Object 等 3D 效果组件在所有浏览器中都能工作，无需任何标志；而 HTML 上屏组件则不同，它们需要 Chrome 的 canvas-draw-element 标志，否则回退到 GPU 覆盖层。
不需要——Shatter、Particle Object、Glass Object 等 3D 效果组件在所有浏览器中都能工作，无需任何标志；而 HTML 上屏组件则不同，它们需要 Chrome 的 canvas-draw-element 标志，否则回退到 GPU 覆盖层。Which topics is it in?glsl, preact, solidjs, shader, shadcn, vanilla-javascript, shaders, shadcn-ui, creative-coding, components, svelte, ui-library
glsl, preact, solidjs, shader, shadcn, vanilla-javascript, shaders, shadcn-ui, creative-coding, components, svelte, ui-library