Canvas UI
WebGL shaders running over your live, interactive HTML.
Canvas UI is the first component library built on the experimental html-in-canvas API. Your live DOM becomes a WebGL texture, shaders distort, dissolve and refract the real page in real time, and everything underneath stays interactive. Text remains selectable. Links remain clickable.
Released July 2026 by David Haz, the author of React Bits.
At a glance
| Distribution | shadcn-compatible registry, source not package |
| Components | 24 at launch |
| Frameworks | React, Vue, Svelte, Solid, vanilla TypeScript |
| Technique | html-in-canvas plus WebGL shaders |
| MCP server | yes, through the shadcn registry |
| License | MIT with Commons Clause |
Install
npx shadcn@latest add https://canvasui.dev/r/liquid-react.json
Each component is one engine written in plain TypeScript and WebGL, with thin framework wrappers on top. Nothing depends on anything else, and each engine defines its own props.
Why this is genuinely new
Every other animated library in this directory animates elements. This one reads your rendered page as a texture and runs shaders over it: Liquid, Blaze, Glass, Shatter, VHS, Particle Reveal, Cloth, Ripple, Droplets. The effect applies to real content rather than to a decorative layer sitting on top of it.
Browser support is the honest caveat. html-in-canvas is experimental, and where it is unavailable components degrade to pure WebGL overlays rather than breaking. Test your target browsers before building a page around it.
Read the licence before you ship
This is MIT with Commons Clause, not plain MIT. Free to use in your own projects, commercial or not, but the clause restricts selling the software itself. If you build templates, themes or a component product for resale, read the terms rather than assuming MIT rules apply.
Choose it if
- You want a visual effect nobody else on the web has yet.
- You are shipping a launch page, a portfolio or a showcase where impact is the goal.
Look elsewhere if
- You need broad browser guarantees today. This rides an experimental API.
- You are building product interface. WebGL over your settings page is not the move.
