Canvas UI — HTML-in-Canvas & WebGL Components

An open-source library of tasteful HTML-in-canvas and WebGL components. Framework agnostic. Copy, paste, ship.

What it is

Every effect ships as React, Solid, Preact, Vue, Svelte, and dependency-free vanilla TypeScript. Same engine, same props, native to your stack. The library includes effects like Blaze, Liquid, Glass, Shatter, Particle Reveal, and VHS.

Components that draw live HTML on canvas rely on an experimental browser capability, available today in Chrome behind a flag. Everywhere else they degrade gracefully: your content renders as regular HTML, and effects like Blaze, Liquid, Laser, Clouds, Bubble, Droplets, Glass, Magnify, Grid, and Ripple keep running as a pure WebGL overlay on top of it.

How it works — Copy, paste, ship

1. Pick a component. Browse the library and find the effect that fits. Every demo on the site is the real component, running live.
2. Run one command. The shadcn CLI pulls the full source into your project. No package to install, no version to pin.
3. Make it yours. The code lives in your repo from day one. Tune the props, restyle it, or rip it apart.

Install

npx shadcn@latest add @canvas-ui/particle-reveal-react

Usage (React)

import { ParticleReveal } from "@/components/canvasui/ParticleReveal";
export function Hero() {
  return (
    <ParticleReveal radius={300}>
      <YourContent />
    </ParticleReveal>
  );
}

Built for agents

The registry speaks the shadcn protocol, so any assistant with the shadcn MCP server can browse the library, read the docs, and install components from a single prompt.

Key facts

• 33 components and counting, 100% open source, free forever.
• MIT + Commons Clause: use in any personal or commercial app free. Only restriction: no reselling/redistributing the components themselves.
• Effects render on the GPU via WebGL, animate outside React's render cycle, init on mount, pause off-screen, clean up on unmount. Reduced-motion preferences respected.
• The code is copied into your repo, so nothing updates from under you. Re-run the install command to pull the latest version.