# DavidHDev/canvas-ui

A library of creative canvas components. Real HTML with WebGL effects running over it. React, Vue, Svelte, vanilla.

Repository: https://github.com/DavidHDev/canvas-ui
Canonical: https://ross.abutalabs.com/products/canvas-ui
Homepage: https://canvasui.dev/
Language: TypeScript
License: NOASSERTION
License Family: other
Topics: animation, canvas, component-library, components, creative-coding, design-engineering, frontend, glsl, nextjs, react, shadcn, shaders, svelte, threejs, typescript, ui, ui-library, vue, weggl
Last push: 2026-08-19T11:50:48+00:00

## Health v2 (maintenance only)
Score: 57/100 (v2, computed 2026-09-02T17:46:02.011165+00:00)
- activity 98, release rhythm 35, longevity 3
- inputs: {"age_days": 48, "days_push": 14, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: no_releases, young, no_license
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 4320, forks 215 (observed 2026-08-28T04:08:41.810938+00:00)

## What it is
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
- artifact type: library
- maturity: active
- function: ui-components, animation, graphics, frontend-framework
- domain: web-development, frontend, graphics, web-design
- platform: browser, cross-platform
- tags: canvas, webgl, shaders, glsl, threejs, html-in-canvas, shadcn-registry, creative-coding, framework-agnostic, component-library, copy-paste, fluid-simulation, web-server

## Member repositories
- DavidHDev/canvas-ui (main) score 57

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:08:41.810938+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-29T18:21:43.863227+00:00, confidence not recorded.
  - readme: https://github.com/DavidHDev/canvas-ui (fetched 2026-08-28T04:08:41.810938+00:00, sha 8ee54aa24e02)
  - homepage: https://canvasui.dev/ (fetched 2026-08-29T09:10:58.429235+00:00, sha c02cd01af1b4)
  - site_page: https://canvasui.dev/docs (fetched 2026-08-29T09:10:58.438550+00:00, sha 028de7253009)
  - site_page: https://canvasui.dev/docs/mcp (fetched 2026-08-29T09:10:58.440408+00:00, sha a37ee821170f)
- Data as of 2026-08-30T08:39:29.467469+00:00.