Canvas UI: Creative Canvas and WebGL Component Library

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. WebGL or WebGPU via vgpu, your choice.

· · · · ·

[blocked]

What makes it different

Most components use the experimental 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.

Where it is not supported, components fall back to GPU overlays, so every visitor gets a working page.

🎨	35 components and counting: Liquid, Glass, Shatter, Force Field, Decrypt Reveal, and more
🧩	Framework agnostic: every component ships for React, Solid, Preact, Vue, Svelte, and vanilla, in both WebGL and WebGPU builds
🖥️	Two renderers: WebGL with GLSL, or WebGPU through vgpu with WGSL
📋	Copy, do not install: source lands in your repo via a shadcn-compatible registry
⚡	Zero config: self-contained, with sensible defaults and typed props
🤖	MCP ready: let your AI assistant find and install components for you

Quick start

Add a component with the shadcn CLI (run npx shadcn@latest init first if you have not):

Swap liquid for any component, react for solid, preact, vue, svelte, or vanilla. Source lands in components/canvasui/, yours to edit.

Most components wrap your content. The subtree stays live and interactive; the effect runs on top.

See the for manual setup.

WebGL and WebGPU

Every effect ships in two renderer builds. The WebGL build is the default: raw WebGL2 and GLSL, zero dependencies except three for the object effects. The WebGPU build renders through with WGSL shaders, keeps the same props and public API, and installs with the -webgpu registry suffix:

WebGPU builds ship for all six frameworks. They need a browser with WebGPU, Chrome/Edge 113+, Safari 26+ / iOS 26, or Firefox 141+. If WebGPU is missing, the wrapped content renders unchanged. Details in the .

Components

Every component ships for all six frameworks in both renderer builds. Compare them in the .

🌊 Fluid & motion

Component	What it does	Component	What it does
	Pointer-driven fluid simulation		Water ripples from every click
	Fabric rippling in the wind		Rain running down the screen
	Metaball droplet trailing the cursor		Grid that ripples away from the cursor

🔥 Fire & energy

Component	What it does	Component	What it does
	Sparks, smoke, and heat distortion		Border of fire around any element
	Energy shield with click shockwaves		Beam that reveals content on scroll

💎 Glass & optics

Component	What it does	Component	What it does
	Crystal-ball lens that follows the cursor		Ice that melts under the cursor and refreezes
	Sci-fi scanner lens with a HUD reticle		Folds the page like the face of a cube
	Peels back to reveal a second layer		Mist parted by cursor wind

📼 Retro & glitch

Component	What it does	Component	What it does
	Worn tape wave, chroma bleed, and grain		Broadcast tearing with RGB splits
	Dither lens that pixelates the page		ASCII lens that follows the cursor
	Cipher text decrypting at the cursor		Falling glyphs that light up the page

✨ Particles & structure

Component	What it does	Component	What it does
	Particles merging into crisp UI		Sand that reassembles on scroll
	3D glass shards that lift and refract		3D tiles rippling around the cursor
	Floating hex tiles with cursor lift		Woven canvas you drag wet paint across

🧊 3D effects: no flag needed, these work everywhere

Point these at a GLB/glTF model, SVG, or image to render it as a 3D scene.

Component	What it does	Component	What it does
	Redrawn as shape-matched ASCII		Liquid glass with real dispersion
	Particles that scatter and spring back		Rendered through a 1-bit dither
	Dragged through swirling liquid

Browser support

Browser	HTML-in-canvas components	3D effect components
Chrome with the	✅ Full effect	✅ Full effect
Everything else	⚠️ GPU overlay fallback	✅ Full effect

Html-in-canvas needs Chrome with the chrome://flags/#canvas-draw-element flag. An token lifts that for your visitors. That is how canvasui.dev runs in a plain Chrome install. Details in the .

Use with AI

The registry is ready, so your assistant can browse and install components:

Works with Claude Code, Cursor, VS Code, Codex, and OpenCode. Then just ask: "add the Liquid component from Canvas UI".

Development

This repo holds the library source, the docs site (Next.js 16, Tailwind v4, on Cloudflare Workers), and the registry build.

Path	What lives here
`src/lib/<Component>/`	WebGL and WebGPU engines plus framework wrappers
`src/demos/`	Interactive demo and controls for each component
`src/app/`	Documentation site routes
`scripts/build-registry.mts`	Generates `public/r/*.json` for the shadcn CLI

Each component is plain TypeScript with thin framework wrappers. WebGL builds use raw WebGL2 and GLSL. WebGPU builds use vgpu and WGSL. Nothing depends on another Canvas UI component, and each engine defines its own props.

Contributing

Issues and pull requests welcome. See CONTRIBUTING.md [blocked].

License

MIT + Commons Clause [blocked]. Free in your own projects, commercial or not. The Commons Clause only restricts selling the library itself.

_{Built by ·}