Dev Design Library

Canvas UI components

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

Components
35
Framework
React
Stack
React, Svelte, Vue, Solid, Preact, TypeScript
License
Commons-Clause+MIT
GitHub stars
4,731
Source
https://github.com/DavidHDev/canvas-ui
Website
https://canvasui.dev/
Install
npx shadcn@latest add @canvas-ui/{name}

All Canvas UI components

  • Ascii Object: A 3D model or image redrawn as shape-matched ASCII.
  • Ascii Sweep: An ascii band that rewrites the whole page as it sweeps.
  • Asciify: An ascii lens that follows your cursor.
  • Bend: How strongly unrevealed content smears around the reveal edge in CSS pixels.
  • Blaze: Fire, smoke, and heat rising over the page.
  • Bubble: A glassy droplet trailing the cursor.
  • Canvas: The page painted onto canvas, with a brush for a cursor.
  • Cloth: Hangs the page on rippling fabric.
  • Clouds: Theme-aware mist parted by cursor wind.
  • Decrypt Reveal: UI encrypted into ASCII, decoded by the cursor.
  • Displacement: Grid cells shearing the page apart under the cursor.
  • Dithered Object: A 3D model or image rendered through a 1-bit dither.
  • Droplets: Rain droplets refracting the page.
  • Flame Wrap: A card wrapped in a border of fire.
  • Force Field: An energy shield where clicks detonate shockwaves.
  • Frost: Frosted blur of the page inside the droplet (0 to 1).
  • Glass: A crystal-ball lens that zooms on targets.
  • Glass Object: Models, SVGs, and images as floating liquid glass.
  • Glitch: Broadcast glitch bursts over the live page.
  • Glyph Rain: Falling glyphs that light up the page, and surge under the cursor.
  • Grid: Cells across the width of the wrapped area.
  • Hex Float: The page on shiny floating hex tiles.
  • Ink Object: A 3D model or image printed as rough ink strokes.
  • Laser: A beam that reveals the page on scroll.
  • Liquid: A pointer-driven fluid simulation over live HTML.
  • Liquid Object: Models dragged through invisible liquid.
  • Magnify: A sci-fi scanner lens with click ripples.
  • Particle Object: Models rebuilt as swirling particle clouds.
  • Particle Reveal: UI revealed from fine particles by the cursor.
  • Particle Scroll: The page dissolves into sand below a line.
  • Peel: Peels the page back from an edge in 3D.
  • Retro Dither: A retro dithered pass over the live page.
  • Ripple: Water ripples from every click over live HTML.
  • Shatter: Shatters the page into glass shards.
  • Vhs: Analog tape artifacts over the live page.

Browse by category