Repolode
Submit
DavidHDev

DavidHDev/canvas-ui

A copy-in library of 35 framework-agnostic canvas UI effects, such as liquid, glass and fire, that run over live HTML content.

View on GitHubWebsite
Stars
5,346
Forks
273
Open issues
4
Last commit
last month

What is it?

Canvas UI is a collection of creative visual components drawn on canvas. Effects such as fluid simulation, glass distortion, fire, glitch and 3D scenes run on top of a page's live, interactive HTML, so text stays selectable and links stay clickable. Components are provided for React, Solid, Preact, Vue, Svelte and vanilla JavaScript.

Each component is installed with the shadcn CLI, which copies its source into the project's own components folder for editing rather than adding it as a package dependency. Every effect ships in a WebGL build (raw WebGL2 with GLSL, plus three.js for the 3D effects) and a WebGPU build that uses vgpu and WGSL. Where HTML-in-canvas is unavailable, the HTML effects fall back to GPU overlays, and the wrapped content still renders.

The project also includes an MCP registry so AI assistants can browse and install components, and a documentation site with an interactive playground.

Key features

  • 0135 effects covering fluid, fire, glass, retro glitch, particles and 3D objects
  • 02Components for React, Solid, Preact, Vue, Svelte and vanilla JavaScript
  • 03WebGL (GLSL) and WebGPU (WGSL via vgpu) renderer builds
  • 04Source copied into your project through a shadcn-compatible registry
  • 05Wrapped content stays live and interactive under the effect
  • 06MCP support so AI assistants can find and install components

Use cases

  • Adding a liquid or glass hero effect to a marketing landing page
  • Giving a portfolio or design-focused site interactive visual polish
  • Applying a retro glitch or ASCII lens to a creative web project
  • Rendering a GLB or SVG model as a 3D scene inside a React or Vue app

Quick start

  1. 1

    Run shadcn init if you have not set up shadcn yet

    npx shadcn@latest init
  2. 2

    Add a component such as Liquid for React

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

    Wrap your page with the component in your code

Things to know

  • The README says the license is MIT plus Commons Clause, which restricts selling the software, while the metadata shows no detected license.
  • Most effects rely on the experimental HTML-in-canvas API, with GPU overlay fallbacks elsewhere.
  • The WebGPU builds need recent browsers such as Chrome or Edge 113+, Safari 26+, or Firefox 141+.

In collections

Frontend frameworks & UI components

Topics

#canvas#webgl#webgpu#shaders#ui-components#creative-coding#animation#react#component-library#components

FAQ

What is canvas-ui?
A copy-in library of 35 framework-agnostic canvas UI effects, such as liquid, glass and fire, that run over live HTML content. Canvas UI is a collection of creative visual components drawn on canvas. Effects such as fluid simulation, glass distortion, fire, glitch and 3D scenes run on top of a page's live, interactive HTML, so text stays selectable and links stay clickable. Components are provided for React, Solid, Preact, Vue, Svelte and vanilla JavaScript.
Is canvas-ui free to use? What license does it have?
canvas-ui is open source under the Other license. Check the license terms before using it in commercial products.
Is canvas-ui still maintained?
Updated within 6 months. The last commit to canvas-ui was on Oct 3, 2026.
What can I use canvas-ui for?
Adding a liquid or glass hero effect to a marketing landing page Giving a portfolio or design-focused site interactive visual polish Applying a retro glitch or ASCII lens to a creative web project Rendering a GLB or SVG model as a 3D scene inside a React or Vue app
How do I install canvas-ui?
Run shadcn init if you have not set up shadcn yet: npx shadcn@latest init Add a component such as Liquid for React: npx shadcn@latest add @canvas-ui/liquid-react Wrap your page with the component in your code
Where can I get canvas-ui?
The source code and installation instructions are on GitHub: https://github.com/DavidHDev/canvas-ui

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects