canvas-ui

What makes it different

Most components use the experimental HTML-in-canvas 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):

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.

import { Liquid } from "@/components/canvasui/Liquid";

export default function Page() {
  return (
    <Liquid>
      <YourEntirePage />
    </Liquid>
  );
}

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

See the installation guide 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 with WGSL shaders, keeps the same props and public API, and installs with the -webgpu registry suffix:

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.

Components

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

Fluid & motion Component What it does Component What it does Liquid Pointer-driven fluid simulation Ripple Water ripples from every click Cloth Fabric rippling in the wind Droplets Rain running down the screen Bubble Metaball droplet trailing the cursor Displacement Grid that ripples away from the cursor Fire & energy Component What it does Component What it does Blaze Sparks, smoke, and heat distortion Flame Wrap Border of fire around any element Force Field Energy shield with click shockwaves Laser Beam that reveals content on scroll Glass & optics Component What it does Component What it does Glass Crystal-ball lens that follows the cursor Frost Ice that melts under the cursor and refreezes Magnify Sci-fi scanner lens with a HUD reticle Bend Folds the page like the face of a cube Peel Peels back to reveal a second layer Clouds Mist parted by cursor wind Retro & glitch Component What it does Component What it does VHS Worn tape wave, chroma bleed, and grain Glitch Broadcast tearing with RGB splits Retro Dither Dither lens that pixelates the page Asciify ASCII lens that follows the cursor Decrypt Reveal Cipher text decrypting at the cursor Glyph Rain Falling glyphs that light up the page ✨ Particles & structure Component What it does Component What it does Particle Reveal Particles merging into crisp UI Particle Scroll Sand that reassembles on scroll Shatter 3D glass shards that lift and refract Grid 3D tiles rippling around the cursor Hex Float Floating hex tiles with cursor lift 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 Redrawn as shape-matched ASCII Glass Object Liquid glass with real dispersion Particle Object Particles that scatter and spring back Dithered Object Rendered through a 1-bit dither Liquid Object Dragged through swirling liquid

Browser support

Browser HTML-in-canvas components 3D effect components Chrome with the flag or origin trial ✅ 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 token lifts that for your visitors. That is how canvasui.dev runs in a plain Chrome install. Details in the 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.

Use with AI

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

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.

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/<Component>/ WebGL and WebGPU engines plus framework wrappers