Canvas UI

Overview

Canvas UI is an open-source library of creative html-in-canvas effects that run over live HTML. Each effect redraws the page through WebGL or WebGPU (via vgpu) while the underlying HTML stays interactive. The site lists 35 components, and the library is free and framework agnostic.

Every component ships in six flavours, for React, Vue, Svelte, Solid, Preact and vanilla JS, each in WebGL and WebGPU builds, which is why the shadcn registry serves 420 items. Effects are installed with one command and customized in place, and the docs describe the library as built for coding agents.

Features

• ASCII effects: Render GLB/glTF models, SVGs or images as ASCII, sweep between panels with glowing characters, or asciify the page around the cursor.
• Page deformations: Bend folds the page over virtual cube edges on scroll, and Grid splits it into 3D tiles that ripple around the cursor.
• Material effects: Cloth hangs the page on rippling fabric, and Canvas paints it onto woven artist canvas with grain and halftone.
• Atmospherics: Blaze adds fire sparks, smoke and heat distortion; Clouds drifts procedural fog that the cursor parts.
• Cursor effects: Bubble is a glassy metaball droplet that refracts the live page beneath it.
• Six flavours: React, Vue, Svelte, Solid, Preact and vanilla JS builds of each effect.
• Playground: Try and tune effects in the browser.

Tech stack

• WebGL, WebGPU (vgpu)
• React, Vue, Svelte, Solid, Preact, vanilla TypeScript
• shadcn CLI registry

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @canvas-ui/component-name