By The person who built the shadcn registry called Canvas UI “one of the most impressive registries I’ve seen” and admitted he does not know how half of it works. That is your signal to pay attention.
Canvas UI is a new open-source component library from David Haz — creator of React Bits — that runs real WebGL and WebGPU shader effects directly over live, interactive HTML. Not a screenshot. Not a frozen bitmap. Your actual DOM, with text still selectable and links still clickable, distorted by GPU shaders in real time. It shipped with 35 components in September 2026 and crossed 4,600 GitHub stars within weeks.
Why This Is Different From Every Other Effect Library
Every previous approach to applying visual effects to HTML falls into one of two categories: CSS filters (limited, no real 3D distortion) or canvas-based effects that paint a static screenshot of your DOM and distort the pixels. The screenshot approach always broke the same things: text was no longer selectable, links stopped working, screen readers saw nothing.
Canvas UI uses Chrome’s experimental HTML-in-Canvas API to solve this. Instead of taking a screenshot, it captures a live DOM snapshot as a WebGL or WebGPU texture using drawElementImage. The DOM remains real DOM — the GPU just gets to distort it. Text stays selectable. Links stay clickable. The accessibility tree is intact. Find-in-page (Ctrl+F) finds text inside your WebGL textures. That last detail sounds impossible, which is why it keeps coming up in developer discussions.
This collapses a tradeoff web developers have lived with for 20 years: DOM for semantics and accessibility, or canvas for GPU performance and visual richness. We covered the HTML-in-Canvas API when Chrome first shipped the origin trial — Canvas UI is the first library built to take full advantage of it.
Getting Started Is One Command
Canvas UI distributes through a shadcn-compatible registry. You install a component, get its source file in your project, and own it from that point forward. No npm package to maintain, no dependency version drift.
npx shadcn@latest add @canvas-ui/droplets-reactThe file lands in components/canvasui/. Usage is a wrapper:
import Droplets from "@/components/canvasui/Droplets";
<Droplets blur={5}>
<YourEntireApp />
</Droplets>Wrap anything. The component handles canvas setup, shader compilation, and DOM capture internally. Props are optional and update live — change blur at runtime and the effect updates without a re-mount. Framework support covers React 19, Solid 1.9, Preact 10, Vue 3.5, Svelte 5, and vanilla TypeScript. Every component ships both a WebGL build (GLSL shaders) and a WebGPU build (WGSL via vgpu) — append -webgpu to the registry name for the latter.
35 Components Across Six Categories
The library covers a wide range of visual effects:
- Fluid and motion: Liquid, Ripple, Droplets (pointer-driven rain simulation), Cloth, Bubble
- Glass and optics: Glass lens, Frost, Magnify, Peel, Bend
- Retro and glitch: VHS grain, Glitch, Asciify, Glyph Rain, Decrypt Reveal
- Fire and energy: Blaze, Flame Wrap, Force Field, Laser
- 3D objects: ASCII Object, Glass Object, Particle Object, Liquid Object
The 3D Object components deserve a separate callout: they use WebGL and WebGPU directly, without the html-in-canvas API. They work in every modern browser today — no Chrome flag required.
The Limitation, and the Bet Worth Taking
The HTML-in-Canvas API is in Chrome’s origin trial, running through Chrome 148-150. Safari and Firefox do not support it. On unsupported browsers, Canvas UI falls back gracefully: your HTML renders normally, without effects. Some components (Droplets, Glass) continue working as WebGL overlays even without the API.
This is a real limitation worth naming. If your audience skews heavily Safari, the majority of your users will see the fallback. Canvas UI is honest about this in its documentation — it is not buried.
What Canvas UI is betting on: the origin trial ships stable. If Chrome 151 promotes the API to stable, Chrome and Edge cover roughly 65 percent of web traffic immediately. Given the alignment of Chrome’s roadmap, WebGPU adoption across all major browsers, and shadcn’s endorsement of the registry model, the bet looks reasonable. In the meantime, Canvas UI is immediately useful for portfolio sites, internal tooling, dashboards, and any context where Chrome dominance is a safe assumption — and the 3D Object components need no caveats at all.
The full component library, documentation, and WebGPU variants are available at canvasui.dev. The source is MIT + Commons Clause licensed — commercial use is permitted, reselling components is not.
