DavidHDev/canvas-ui

这是什么？

核心功能

• 0135 个效果，涵盖流体、火焰、玻璃、复古故障、粒子和 3D 物体
• 02支持 React、Solid、Preact、Vue、Svelte 和原生 JavaScript
• 03提供 WebGL（GLSL）和 WebGPU（通过 vgpu 使用 WGSL）两种渲染版本
• 04通过兼容 shadcn 的注册表将源码复制到项目中
• 05被包裹的内容在特效下保持可交互
• 06支持 MCP，AI 助手可直接查找并安装组件

适用场景

• 在营销落地页的首屏加入液体或玻璃特效
• 为作品集或设计类网站增加交互式视觉效果
• 在创意网页项目中使用复古故障或 ASCII 放大镜效果
• 在 React 或 Vue 应用中将 GLB 或 SVG 模型渲染为 3D 场景

快速上手

1. 1

   如果尚未初始化 shadcn，请先运行初始化

   npx shadcn@latest init
2. 2

   添加一个组件，例如 React 版 Liquid

   npx shadcn@latest add @canvas-ui/liquid-react
3. 3

   在代码中用该组件包裹你的页面

使用前须知

• !README 称许可证为 MIT 加 Commons Clause，这会限制销售该软件，而元数据显示未检测到许可证。
• !大多数效果依赖实验性的 HTML-in-canvas API，其他环境则回退到 GPU 覆盖层。
• !WebGPU 版本需要较新的浏览器，例如 Chrome 或 Edge 113+、Safari 26+ 或 Firefox 141+。

收录于专题

标签

常见问题

canvas-ui 是什么？

一套可复制到项目中的画布 UI 特效组件库，共 35 个，覆盖液体、玻璃、火焰等效果，框架无关。 Canvas UI 是一组在 canvas 上绘制的创意视觉组件。流体模拟、玻璃折射、火焰、故障effect 和 3D 场景等效果直接叠加在页面实时可交互的 HTML 之上，文字仍可选中，链接仍可点击。组件支持 React、Solid、Preact、Vue、Svelte 和原生 JavaScript。

canvas-ui 可以免费使用吗？用的什么许可证？

canvas-ui 以 Other 许可证开源。用于商业产品前，请先确认许可证条款。

canvas-ui 还在维护吗？

半年内有更新。canvas-ui 最近一次提交是在 2026年10月3日。

canvas-ui 适合用来做什么？

在营销落地页的首屏加入液体或玻璃特效 为作品集或设计类网站增加交互式视觉效果 在创意网页项目中使用复古故障或 ASCII 放大镜效果 在 React 或 Vue 应用中将 GLB 或 SVG 模型渲染为 3D 场景

canvas-ui 怎么安装和运行？

如果尚未初始化 shadcn，请先运行初始化: npx shadcn@latest init 添加一个组件，例如 React 版 Liquid: npx shadcn@latest add @canvas-ui/liquid-react 在代码中用该组件包裹你的页面

在哪里获取 canvas-ui？

源代码和安装说明在 GitHub 上：https://github.com/DavidHDev/canvas-ui