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.

canvasui.dev · Docs · Components · Playground · Installation

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 WebGL overlays, so every visitor gets a working page.

🎨	33 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
📋	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.

Components

Every component ships for all six targets. 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	⚠️ WebGL 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.

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>/	The engine (*Vanilla.ts) plus five 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 one engine in plain TypeScript and WebGL, with thin framework wrappers. Nothing depends on anything else, and the engine defines its own props.

Contributing

Issues and pull requests welcome. See CONTRIBUTING.md.

License

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

_{Built by David Haz · @davidhdev}

canvasui.dev