DavidHDev/canvas-ui

Health v2 · maintenance only

Flags: no_releases young no_license

Adoption not part of the score

4320 stars · 215 forks observed · 2026-08-28

What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-29, confidence not recorded

An open-source, framework-agnostic library of creative UI components drawn on canvas, where real HTML is rendered inside a canvas element with WebGL shader effects running over it. Components are distributed via a shadcn registry as standalone source files in React, Solid, Preact, Vue, Svelte, and vanilla TypeScript flavors.

Use cases

• add fluid simulation effects over live HTML in a hero section
• create shader-based visual effects on interactive web pages
• build creative landing pages with WebGL canvas components
• render real DOM content inside a canvas as a shader texture
• copy-paste creative coding components into a React or Vue project
• add particle reveal and distortion effects to a website

When to choose

• you want GPU-powered visual effects layered over fully interactive HTML
• you use shadcn-style copy-paste component workflows and want to own the source code
• you need framework-agnostic components across React, Vue, Svelte, Solid, Preact, or vanilla TS
• you're building expressive landing pages or creative web experiences

When to avoid

• you need guaranteed cross-browser support for the full effect, since html-in-canvas is an experimental Chrome feature
• you need a traditional npm package with versioned updates rather than vendored source files
• your project requires strict performance budgets on low-end devices
• you need accessible, text-first UI components without heavy visual effects

Facets

library · maturity active

ui-components animation graphics frontend-framework web-development frontend graphics web-design browser cross-platform canvas webgl shaders glsl threejs html-in-canvas shadcn-registry creative-coding framework-agnostic component-library copy-paste fluid-simulation web-server

Member repositories

For agents

markdown · JSON · MCP: product_card(name="DavidHDev/canvas-ui")