Canvas UI

33 WebGL/canvas effects that wrap real HTML, in 6 frameworks

Tier A · StrongShader PackComponent LibraryRegistrycanvasui.dev

(Visit canvasui.dev ↗)(Docs)(Repository)(Registry)

Canvas UI by David Haz is a registry of 33 creative effects that render live DOM content inside a canvas element and run WebGL shaders over it, so your actual HTML gets asciified, frosted, dithered, refracted, shattered or melted rather than being replaced by a picture of itself. The catalogue: ASCII Object, Asciify, Bend, Blaze, Bubble, Canvas, Cloth, Clouds, Decrypt Reveal, Displacement, Dithered Object, Droplets, Flame Wrap, Force Field, Frost, Glass, Glass Object, Glitch, Glyph Rain, Grid, Hex Float, Laser, Liquid, Liquid Object, Magnify, Particle Object, Particle Reveal, Particle Scroll, Peel, Retro Dither, Ripple, Shatter and VHS. Each ships as a separate typed source registry entry per framework — React 19, Vue 3.5, Svelte 5, Solid 1.9, Preact 10 and vanilla — for 198 registry items in total, installed through the shadcn CLI.

Install

npx shadcn@latest add @canvas-ui/liquid-react

For an agent

Install per framework and per effect — the registry name is `@canvas-ui/<effect>-<framework>` (e.g. @canvas-ui/frost-svelte), so read https://canvasui.dev/r/registry.json before guessing a name. The headline trick, rendering live HTML into a canvas, depends on Chrome's experimental html-in-canvas API and needs the canvas-draw-element flag or an origin trial token in production; it falls back to plain HTML elsewhere, so never let a Canvas UI wrapper be the only thing that renders required content, and expect screen readers and text selection to be unreliable inside the canvas. Reach for the *-Object effects (ASCII Object, Dithered Object, Particle Object, Glass Object, Liquid Object) when you want a GLB/glTF or SVG rendered as a hero visual — those are pure three.js and shader work and do not need the flag.

Why it is here. It solves a problem no other registry does — applying a shader to your real, live, interactive DOM — and it does it across six frameworks with typed source, which is why it cleared 3,900 stars quickly.

Install command, framework, licence and component list.

Facts

License: Source available
Pricing: Free, Open source
Framework: React, Vue, Svelte, Solid, Preact, Vanilla JS
Styling: Shader / GLSL, Vanilla CSS
Distribution: shadcn registry, CLI installer, GitHub repository, MCP server, Copy-paste snippet
Platform: Web
Content type: Code, 3D assets and scenes
Agent readiness: Machine-readable registry item, CLI installable, MCP server, Structured documentation, Readable open source
Accessibility: Known accessibility gaps
Maturity: Actively maintained
Pricing detail: Free to use, including commercially. The Commons Clause forbids selling, sublicensing or redistributing the components themselves, alone, bundled, or as a port.
GitHub stars: 3,975

Components it ships

33 total

Glassmorphism Particle Background Text Effect Hover Effect Scroll Driven Animation Model Viewer Animation Image Hero

Helps you build

Homepage Features

Notable for

live DOM rendered inside a canvas with WebGL over it
198 registry items = 33 effects x 6 frameworks
GLB/glTF and SVG object renderers
MIT + Commons Clause, not plain MIT
needs Chrome html-in-canvas flag or origin trial for the DOM effects

Provenance

Verified 2026-08-15. HTTP 200. https://canvasui.dev/components, https://canvasui.dev/docs, https://canvasui.dev/docs/installation, https://canvasui.dev/docs/mcp, https://canvasui.dev/r/registry.json (198 items parsed), gh api repos/DavidHDev/canvas-ui + contents/LICENSE.md

Also in Textures, Backgrounds & Assets

canvasui.devTier A