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.

canvasui.dev · Docs · Components · Playground · Installation · Rendering

## What makes it different 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. 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): ```bash npx shadcn@latest add @canvas-ui/liquid-react ``` Swap `liquid` for any component, `react` for `solid`, `preact`, `vue`, `svelte`, or `vanilla`. Source lands in `components/canvasui/`, yours to edit. ```tsx import { Liquid } from "@/components/canvasui/Liquid"; export default function Page() { return ( ); } ``` Most components wrap your content. The subtree stays live and interactive; the effect runs on top. See the [installation guide](https://canvasui.dev/docs/installation) 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 [vgpu](https://vgpu.sh) with WGSL shaders, keeps the same props and public API, and installs with the `-webgpu` registry suffix: ```bash npx shadcn@latest add @canvas-ui/liquid-react-webgpu ``` 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 [rendering guide](https://canvasui.dev/docs/rendering). ## Components Every component ships for all six frameworks in both renderer builds. Compare them in the [playground](https://canvasui.dev/playground).

🌊 Fluid & motion

| Component | What it does | Component | What it does | | --------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------- | -------------------------------------- | | [**Liquid**](https://canvasui.dev/docs/components/liquid) | Pointer-driven fluid simulation | [**Ripple**](https://canvasui.dev/docs/components/ripple) | Water ripples from every click | | [**Cloth**](https://canvasui.dev/docs/components/cloth) | Fabric rippling in the wind | [**Droplets**](https://canvasui.dev/docs/components/droplets) | Rain running down the screen | | [**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 |

🔥 Fire & energy

| 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 | | [**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 |

💎 Glass & optics

| 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 | | [**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 | | [**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 |

📼 Retro & glitch

| 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 | | [**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 | | [**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 |

✨ Particles & structure

| 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 | | [**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 | | [**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 |

🧊 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 | | --------------------------------------------------------------------------- | -------------------------------------- | --------------------------------------------------------------------------- | --------------------------------- | | [**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 | | [**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 | | [**Liquid Object**](https://canvasui.dev/docs/components/liquid-object) | Dragged through swirling liquid | | |

## Browser support | Browser | HTML-in-canvas components | 3D effect components | | ------------------------------------------------------------------------------ | :-----------------------: | :------------------: | | Chrome with the [flag or origin trial](https://canvasui.dev/docs/installation) | ✅ 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 [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). Chrome 150's changes to `texElementImage2D()` and `copyElementImageToTexture()` do not require a migration in Canvas UI. The HTML effects capture content with the 2D `drawElementImage()` API, then upload the canvas with standard `texImage2D()` (WebGL) or `copyExternalImageToTexture()` (WebGPU). Those upload methods keep their existing signatures. This also applies to the generated registry components for all six frameworks. The [later HTML-in-Canvas changes](https://developer.chrome.com/blog/html-in-canvas-ot-changes) also affect capture markup and hit testing. Canvas UI synchronizes the captured element's geometry when the browser requires it, keeping scrolling, clicks, and cursor effects working in Chrome 154. It also selects `content="drawable"` and `drawable` when the newer API is available, while preserving support for `layoutsubtree` and automatic 2D geometry synchronization. Both renderers follow pinch zoom through `visualViewport`, increasing capture and rendering resolution while preserving the HTML's position and interactions. The normal 2× device-pixel-ratio budget is multiplied by the zoom scale, subject to GPU limits, an 8192-pixel maximum dimension, and a 16-megapixel buffer budget. Particle Scroll uses plain HTML without a GPU overlay when HTML-in-Canvas is unavailable, including in Safari. ## Use with AI The registry is [MCP](https://canvasui.dev/docs/mcp) ready, so your assistant can browse and install components: ```bash npx shadcn@latest mcp init --client claude ``` 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. ```bash npm install npm run dev # builds the registry, then starts next dev npm run build # production build npm run deploy # build and deploy to Cloudflare ``` | Path | What lives here | | ---------------------------- | ------------------------------------------------------- | | `src/lib//` | 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](.github/CONTRIBUTING.md). ## License [MIT + Commons Clause](LICENSE.md). Free in your own projects, commercial or not. The Commons Clause only restricts selling the library itself.

_{Built by David Haz · @davidhaz}

canvasui.dev