You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
An open source library of creative, framework-agnostic components drawn on canvas. Fluid simulations, shader effects, and 3D scenes that run over your live, fully interactive interface.
Most of the library is built on the experimental [HTML-in-canvas](https://chromestatus.com/feature/5172548013916160) API, which lets WebGL effects read and redraw your live DOM. Text stays selectable, links stay clickable, and the whole page becomes a texture that fire, fluid, and glass can distort in real time.
14
-
15
-
Where html-in-canvas is not supported, components degrade gracefully to pure WebGL overlays, so every visitor gets a working page.
16
-
17
-
-**33 components** and counting: Liquid, Glass, Shatter, VHS, Particle Reveal, Force Field, Decrypt Reveal, and more
18
-
-**Framework agnostic**: React, Solid, Preact, Vue, Svelte, and vanilla JS builds for every component
19
-
-**Copy, do not install**: components ship as source through a shadcn-compatible registry
20
-
-**Zero config**: each component is self-contained with sensible defaults and typed props
21
-
-**MCP ready**: point the shadcn MCP server at the registry and let your AI assistant install components
43
+
Most components use the experimental [HTML-in-canvas](https://chromestatus.com/feature/5172548013916160) API to read and redraw your live DOM. Text stays selectable, links stay clickable, and the page becomes a texture that fire, fluid, and glass distort in real time.
44
+
45
+
Where it is not supported, components fall back to WebGL overlays, so every visitor gets a working page.
46
+
47
+
<table>
48
+
<tr>
49
+
<tdalign="center">🎨</td>
50
+
<td><b>33 components</b> and counting: Liquid, Glass, Shatter, Force Field, Decrypt Reveal, and more</td>
51
+
</tr>
52
+
<tr>
53
+
<tdalign="center">🧩</td>
54
+
<td><b>Framework agnostic</b>: every component ships for React, Solid, Preact, Vue, Svelte, and vanilla</td>
55
+
</tr>
56
+
<tr>
57
+
<tdalign="center">📋</td>
58
+
<td><b>Copy, do not install</b>: source lands in your repo via a shadcn-compatible registry</td>
59
+
</tr>
60
+
<tr>
61
+
<tdalign="center">⚡</td>
62
+
<td><b>Zero config</b>: self-contained, with sensible defaults and typed props</td>
63
+
</tr>
64
+
<tr>
65
+
<tdalign="center">🤖</td>
66
+
<td><b>MCP ready</b>: let your AI assistant find and install components for you</td>
67
+
</tr>
68
+
</table>
22
69
23
70
## Quick start
24
71
25
-
Add a component with the shadcn CLI (run `npx shadcn@latest init` first if you have not used it before):
72
+
Add a component with the shadcn CLI (run `npx shadcn@latest init` first if you have not):
26
73
27
74
```bash
28
75
npx shadcn@latest add @canvas-ui/liquid-react
29
76
```
30
77
31
-
Swap `liquid` for any component and `react` for `solid`, `preact`, `vue`, `svelte`, or `vanilla`. The source lands in `components/canvasui/` in your project, yours to edit.
78
+
Swap `liquid` for any component, `react` for `solid`, `preact`, `vue`, `svelte`, or `vanilla`. Source lands in `components/canvasui/`, yours to edit.
|[**Liquid**](https://canvasui.dev/docs/components/liquid)| Pointer-driven fluid simulation |[**Ripple**](https://canvasui.dev/docs/components/ripple)| Water ripples from every click |
106
+
|[**Cloth**](https://canvasui.dev/docs/components/cloth)| Fabric rippling in the wind |[**Droplets**](https://canvasui.dev/docs/components/droplets)| Rain running down the screen |
107
+
|[**Bubble**](https://canvasui.dev/docs/components/bubble)| Metaball droplet trailing the cursor |[**Displacement**](https://canvasui.dev/docs/components/displacement)| Grid that ripples away from the cursor |
108
+
109
+
</details>
110
+
111
+
<detailsopen>
112
+
<summary><b>🔥 Fire & energy</b></summary>
113
+
114
+
| Component | What it does | Component | What it does |
|[**Blaze**](https://canvasui.dev/docs/components/blaze)| Sparks, smoke, and heat distortion |[**Flame Wrap**](https://canvasui.dev/docs/components/flame-wrap)| Border of fire around any element |
117
+
|[**Force Field**](https://canvasui.dev/docs/components/force-field)| Energy shield with click shockwaves |[**Laser**](https://canvasui.dev/docs/components/laser)| Beam that reveals content on scroll |
118
+
119
+
</details>
120
+
121
+
<detailsopen>
122
+
<summary><b>💎 Glass & optics</b></summary>
123
+
124
+
| Component | What it does | Component | What it does |
|[**Glass**](https://canvasui.dev/docs/components/glass)| Crystal-ball lens that follows the cursor |[**Frost**](https://canvasui.dev/docs/components/frost)| Ice that melts under the cursor and refreezes |
127
+
|[**Magnify**](https://canvasui.dev/docs/components/magnify)| Sci-fi scanner lens with a HUD reticle |[**Bend**](https://canvasui.dev/docs/components/bend)| Folds the page like the face of a cube |
128
+
|[**Peel**](https://canvasui.dev/docs/components/peel)| Peels back to reveal a second layer |[**Clouds**](https://canvasui.dev/docs/components/clouds)| Mist parted by cursor wind |
129
+
130
+
</details>
32
131
33
-
See the [installation guide](https://canvasui.dev/docs/installation) for manual setup and framework notes.
132
+
<detailsopen>
133
+
<summary><b>📼 Retro & glitch</b></summary>
134
+
135
+
| Component | What it does | Component | What it does |
|[**VHS**](https://canvasui.dev/docs/components/vhs)| Worn tape wave, chroma bleed, and grain |[**Glitch**](https://canvasui.dev/docs/components/glitch)| Broadcast tearing with RGB splits |
138
+
|[**Retro Dither**](https://canvasui.dev/docs/components/retro-dither)| Dither lens that pixelates the page |[**Asciify**](https://canvasui.dev/docs/components/asciify)| ASCII lens that follows the cursor |
139
+
|[**Decrypt Reveal**](https://canvasui.dev/docs/components/decrypt-reveal)| Cipher text decrypting at the cursor |[**Glyph Rain**](https://canvasui.dev/docs/components/glyph-rain)| Falling glyphs that light up the page |
140
+
141
+
</details>
142
+
143
+
<detailsopen>
144
+
<summary><b>✨ Particles & structure</b></summary>
145
+
146
+
| Component | What it does | Component | What it does |
|[**Particle Reveal**](https://canvasui.dev/docs/components/particle-reveal)| Particles merging into crisp UI |[**Particle Scroll**](https://canvasui.dev/docs/components/particle-scroll)| Sand that reassembles on scroll |
149
+
|[**Shatter**](https://canvasui.dev/docs/components/shatter)| 3D glass shards that lift and refract |[**Grid**](https://canvasui.dev/docs/components/grid)| 3D tiles rippling around the cursor |
150
+
|[**Hex Float**](https://canvasui.dev/docs/components/hex-float)| Floating hex tiles with cursor lift |[**Canvas**](https://canvasui.dev/docs/components/canvas)| Woven canvas you drag wet paint across |
151
+
152
+
</details>
153
+
154
+
<detailsopen>
155
+
<summary><b>🧊 3D effects</b>: no flag needed, these work everywhere</summary>
156
+
157
+
Point these at a GLB/glTF model, SVG, or image to render it as a 3D scene.
158
+
159
+
| Component | What it does | Component | What it does |
|[**ASCII Object**](https://canvasui.dev/docs/components/ascii-object)| Redrawn as shape-matched ASCII |[**Glass Object**](https://canvasui.dev/docs/components/glass-object)| Liquid glass with real dispersion |
162
+
|[**Particle Object**](https://canvasui.dev/docs/components/particle-object)| Particles that scatter and spring back |[**Dithered Object**](https://canvasui.dev/docs/components/dithered-object)| Rendered through a 1-bit dither |
163
+
|[**Liquid Object**](https://canvasui.dev/docs/components/liquid-object)| Dragged through swirling liquid |||
164
+
165
+
</details>
34
166
35
167
## Browser support
36
168
37
-
The full html-in-canvas experience currently requires Chrome or Edge 140+ with the `chrome://flags/#canvas-draw-element` flag enabled (for production sites, an [origin trial](https://canvasui.dev/docs/installation) token is available). Everywhere else, components automatically fall back to WebGL overlay rendering. Details in the [docs](https://canvasui.dev/docs).
169
+
| Browser | HTML-in-canvas components | 3D effect components |
Html-in-canvas needs Chrome with the `chrome://flags/#canvas-draw-element` flag. An [origin trial](https://canvasui.dev/docs/installation) token lifts that for your visitors. That is how canvasui.dev runs in a plain Chrome install. Details in the [docs](https://canvasui.dev/docs).
175
+
176
+
## Use with AI
177
+
178
+
The registry is [MCP](https://canvasui.dev/docs/mcp) ready, so your assistant can browse and install components:
179
+
180
+
```bash
181
+
npx shadcn@latest mcp init --client claude
182
+
```
183
+
184
+
Works with Claude Code, Cursor, VS Code, Codex, and OpenCode. Then just ask: _"add the Liquid component from Canvas UI"_.
38
185
39
186
## Development
40
187
41
-
This repo contains the library source (`src/lib`), the documentation site (Next.js 16, Tailwind v4, deployed to Cloudflare Workers), and the registry build.
188
+
This repo holds the library source, the docs site (Next.js 16, Tailwind v4, on Cloudflare Workers), and the registry build.
42
189
43
190
```bash
44
191
npm install
@@ -47,10 +194,27 @@ npm run build # production build
|`src/lib/<Component>/`| The engine (`*Vanilla.ts`) plus five framework wrappers |
200
+
|`src/demos/`| Interactive demo and controls for each component |
201
+
|`src/app/`| Documentation site routes |
202
+
|`scripts/build-registry.mts`| Generates `public/r/*.json` for the shadcn CLI |
203
+
204
+
Each component is one engine in plain TypeScript and WebGL, with thin framework wrappers. Nothing depends on anything else, and the engine defines its own props.
205
+
50
206
## Contributing
51
207
52
-
Issues and pull requests are welcome. See [CONTRIBUTING.md](.github/CONTRIBUTING.md) to get started.
208
+
Issues and pull requests welcome. See [CONTRIBUTING.md](.github/CONTRIBUTING.md).
53
209
54
210
## License
55
211
56
-
[MIT + Commons Clause](LICENSE.md). Free to use in your own projects, commercial or not. The Commons Clause only restricts selling the library itself.
212
+
[MIT + Commons Clause](LICENSE.md). Free in your own projects, commercial or not. The Commons Clause only restricts selling the library itself.
213
+
214
+
<divalign="center">
215
+
<br />
216
+
<sub>Built by <ahref="https://github.com/DavidHDev">David Haz</a> · <ahref="https://x.com/davidhdev">@davidhdev</a></sub>
0 commit comments