---
name: "@canvas-ui"
slug: "canvas-ui"
description: "Creative html-in-canvas components. React, Vue, Svelte, TS."
category: "Uncategorized"
tags: []
framework: "vue"
license: null
author: "DavidHDev"
website: "https://canvasui.dev/"
github: "https://github.com/DavidHDev/canvas-ui"
registry: "https://canvasui.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 2318
component_count: 250
generated_at: "2026-09-21T01:50:16.753Z"
---

# @canvas-ui

Creative html-in-canvas components. React, Vue, Svelte, TS.

## Links

- Website: https://canvasui.dev/
- GitHub: https://github.com/DavidHDev/canvas-ui
- Registry JSON: https://canvasui.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/canvas-ui
- This file: https://sh4dcn.vercel.app/md/canvas-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://canvasui.dev/r/registry.json
pnpm dlx shadcn@latest add https://canvasui.dev/r/registry.json
bunx shadcn@latest add https://canvasui.dev/r/registry.json
# clone the source repo
git clone https://github.com/DavidHDev/canvas-ui.git
# fetch the raw registry index
curl -s https://canvasui.dev/r/registry.json
```

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| ascii-object-react | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene as ASCII characters chosen by shape, so glyphs trace the object's edges. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/ascii-object-react.json` |
| ascii-object-vue | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene as ASCII characters chosen by shape, so glyphs trace the object's edges. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/ascii-object-vue.json` |
| ascii-object-svelte | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene as ASCII characters chosen by shape, so glyphs trace the object's edges. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/ascii-object-svelte.json` |
| ascii-object-solid | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene as ASCII characters chosen by shape, so glyphs trace the object's edges. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/ascii-object-solid.json` |
| ascii-object-preact | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene as ASCII characters chosen by shape, so glyphs trace the object's edges. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/ascii-object-preact.json` |
| ascii-object-vanilla | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene as ASCII characters chosen by shape, so glyphs trace the object's edges. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/ascii-object-vanilla.json` |
| ascii-object-react-webgpu | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene as ASCII characters chosen by shape, so glyphs trace the object's edges. Built on three.js… | `npx shadcn@latest add https://canvasui.dev/r/ascii-object-react-webgpu.json` |
| ascii-object-vue-webgpu | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene as ASCII characters chosen by shape, so glyphs trace the object's edges. Built on three.js… | `npx shadcn@latest add https://canvasui.dev/r/ascii-object-vue-webgpu.json` |
| ascii-object-svelte-webgpu | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene as ASCII characters chosen by shape, so glyphs trace the object's edges. Built on three.js… | `npx shadcn@latest add https://canvasui.dev/r/ascii-object-svelte-webgpu.json` |
| ascii-object-solid-webgpu | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene as ASCII characters chosen by shape, so glyphs trace the object's edges. Built on three.js… | `npx shadcn@latest add https://canvasui.dev/r/ascii-object-solid-webgpu.json` |
| ascii-object-preact-webgpu | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene as ASCII characters chosen by shape, so glyphs trace the object's edges. Built on three.js… | `npx shadcn@latest add https://canvasui.dev/r/ascii-object-preact-webgpu.json` |
| ascii-object-vanilla-webgpu | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene as ASCII characters chosen by shape, so glyphs trace the object's edges. Built on three.js… | `npx shadcn@latest add https://canvasui.dev/r/ascii-object-vanilla-webgpu.json` |
| ascii-sweep-react | registry:component | Swaps two panels of live HTML with a band of glowing ascii characters that sweeps across the exact text lines, tearing rows and trailing phosphor as it passes.… | `npx shadcn@latest add https://canvasui.dev/r/ascii-sweep-react.json` |
| ascii-sweep-vue | registry:component | Swaps two panels of live HTML with a band of glowing ascii characters that sweeps across the exact text lines, tearing rows and trailing phosphor as it passes.… | `npx shadcn@latest add https://canvasui.dev/r/ascii-sweep-vue.json` |
| ascii-sweep-svelte | registry:component | Swaps two panels of live HTML with a band of glowing ascii characters that sweeps across the exact text lines, tearing rows and trailing phosphor as it passes.… | `npx shadcn@latest add https://canvasui.dev/r/ascii-sweep-svelte.json` |
| ascii-sweep-solid | registry:component | Swaps two panels of live HTML with a band of glowing ascii characters that sweeps across the exact text lines, tearing rows and trailing phosphor as it passes.… | `npx shadcn@latest add https://canvasui.dev/r/ascii-sweep-solid.json` |
| ascii-sweep-preact | registry:component | Swaps two panels of live HTML with a band of glowing ascii characters that sweeps across the exact text lines, tearing rows and trailing phosphor as it passes.… | `npx shadcn@latest add https://canvasui.dev/r/ascii-sweep-preact.json` |
| ascii-sweep-vanilla | registry:component | Swaps two panels of live HTML with a band of glowing ascii characters that sweeps across the exact text lines, tearing rows and trailing phosphor as it passes.… | `npx shadcn@latest add https://canvasui.dev/r/ascii-sweep-vanilla.json` |
| ascii-sweep-react-webgpu | registry:component | Swaps two panels of live HTML with a band of glowing ascii characters that sweeps across the exact text lines, tearing rows and trailing phosphor as it passes.… | `npx shadcn@latest add https://canvasui.dev/r/ascii-sweep-react-webgpu.json` |
| ascii-sweep-vue-webgpu | registry:component | Swaps two panels of live HTML with a band of glowing ascii characters that sweeps across the exact text lines, tearing rows and trailing phosphor as it passes.… | `npx shadcn@latest add https://canvasui.dev/r/ascii-sweep-vue-webgpu.json` |
| ascii-sweep-svelte-webgpu | registry:component | Swaps two panels of live HTML with a band of glowing ascii characters that sweeps across the exact text lines, tearing rows and trailing phosphor as it passes.… | `npx shadcn@latest add https://canvasui.dev/r/ascii-sweep-svelte-webgpu.json` |
| ascii-sweep-solid-webgpu | registry:component | Swaps two panels of live HTML with a band of glowing ascii characters that sweeps across the exact text lines, tearing rows and trailing phosphor as it passes.… | `npx shadcn@latest add https://canvasui.dev/r/ascii-sweep-solid-webgpu.json` |
| ascii-sweep-preact-webgpu | registry:component | Swaps two panels of live HTML with a band of glowing ascii characters that sweeps across the exact text lines, tearing rows and trailing phosphor as it passes.… | `npx shadcn@latest add https://canvasui.dev/r/ascii-sweep-preact-webgpu.json` |
| ascii-sweep-vanilla-webgpu | registry:component | Swaps two panels of live HTML with a band of glowing ascii characters that sweeps across the exact text lines, tearing rows and trailing phosphor as it passes.… | `npx shadcn@latest add https://canvasui.dev/r/ascii-sweep-vanilla-webgpu.json` |
| asciify-react | registry:component | Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch… | `npx shadcn@latest add https://canvasui.dev/r/asciify-react.json` |
| asciify-vue | registry:component | Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch… | `npx shadcn@latest add https://canvasui.dev/r/asciify-vue.json` |
| asciify-svelte | registry:component | Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch… | `npx shadcn@latest add https://canvasui.dev/r/asciify-svelte.json` |
| asciify-solid | registry:component | Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch… | `npx shadcn@latest add https://canvasui.dev/r/asciify-solid.json` |
| asciify-preact | registry:component | Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch… | `npx shadcn@latest add https://canvasui.dev/r/asciify-preact.json` |
| asciify-vanilla | registry:component | Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch… | `npx shadcn@latest add https://canvasui.dev/r/asciify-vanilla.json` |
| asciify-react-webgpu | registry:component | Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch… | `npx shadcn@latest add https://canvasui.dev/r/asciify-react-webgpu.json` |
| asciify-vue-webgpu | registry:component | Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch… | `npx shadcn@latest add https://canvasui.dev/r/asciify-vue-webgpu.json` |
| asciify-svelte-webgpu | registry:component | Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch… | `npx shadcn@latest add https://canvasui.dev/r/asciify-svelte-webgpu.json` |
| asciify-solid-webgpu | registry:component | Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch… | `npx shadcn@latest add https://canvasui.dev/r/asciify-solid-webgpu.json` |
| asciify-preact-webgpu | registry:component | Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch… | `npx shadcn@latest add https://canvasui.dev/r/asciify-preact-webgpu.json` |
| asciify-vanilla-webgpu | registry:component | Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch… | `npx shadcn@latest add https://canvasui.dev/r/asciify-vanilla-webgpu.json` |
| bend-react | registry:component | Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/bend-react.json` |
| bend-vue | registry:component | Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/bend-vue.json` |
| bend-svelte | registry:component | Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/bend-svelte.json` |
| bend-solid | registry:component | Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/bend-solid.json` |
| bend-preact | registry:component | Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/bend-preact.json` |
| bend-vanilla | registry:component | Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/bend-vanilla.json` |
| bend-react-webgpu | registry:component | Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies. WebG… | `npx shadcn@latest add https://canvasui.dev/r/bend-react-webgpu.json` |
| bend-vue-webgpu | registry:component | Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies. WebG… | `npx shadcn@latest add https://canvasui.dev/r/bend-vue-webgpu.json` |
| bend-svelte-webgpu | registry:component | Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies. WebG… | `npx shadcn@latest add https://canvasui.dev/r/bend-svelte-webgpu.json` |
| bend-solid-webgpu | registry:component | Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies. WebG… | `npx shadcn@latest add https://canvasui.dev/r/bend-solid-webgpu.json` |
| bend-preact-webgpu | registry:component | Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies. WebG… | `npx shadcn@latest add https://canvasui.dev/r/bend-preact-webgpu.json` |
| bend-vanilla-webgpu | registry:component | Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies. WebG… | `npx shadcn@latest add https://canvasui.dev/r/bend-vanilla-webgpu.json` |
| grid-react | registry:component | Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/grid-react.json` |
| grid-vue | registry:component | Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/grid-vue.json` |
| grid-svelte | registry:component | Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/grid-svelte.json` |
| grid-solid | registry:component | Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/grid-solid.json` |
| grid-preact | registry:component | Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/grid-preact.json` |
| grid-vanilla | registry:component | Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/grid-vanilla.json` |
| grid-react-webgpu | registry:component | Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/grid-react-webgpu.json` |
| grid-vue-webgpu | registry:component | Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/grid-vue-webgpu.json` |
| grid-svelte-webgpu | registry:component | Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/grid-svelte-webgpu.json` |
| grid-solid-webgpu | registry:component | Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/grid-solid-webgpu.json` |
| grid-preact-webgpu | registry:component | Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/grid-preact-webgpu.json` |
| grid-vanilla-webgpu | registry:component | Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/grid-vanilla-webgpu.json` |
| blaze-react | registry:component | Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/blaze-react.json` |
| blaze-vue | registry:component | Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/blaze-vue.json` |
| blaze-svelte | registry:component | Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/blaze-svelte.json` |
| blaze-solid | registry:component | Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/blaze-solid.json` |
| blaze-preact | registry:component | Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/blaze-preact.json` |
| blaze-vanilla | registry:component | Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/blaze-vanilla.json` |
| blaze-react-webgpu | registry:component | Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/blaze-react-webgpu.json` |
| blaze-vue-webgpu | registry:component | Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/blaze-vue-webgpu.json` |
| blaze-svelte-webgpu | registry:component | Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/blaze-svelte-webgpu.json` |
| blaze-solid-webgpu | registry:component | Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/blaze-solid-webgpu.json` |
| blaze-preact-webgpu | registry:component | Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/blaze-preact-webgpu.json` |
| blaze-vanilla-webgpu | registry:component | Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/blaze-vanilla-webgpu.json` |
| bubble-react | registry:component | A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/bubble-react.json` |
| bubble-vue | registry:component | A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/bubble-vue.json` |
| bubble-svelte | registry:component | A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/bubble-svelte.json` |
| bubble-solid | registry:component | A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/bubble-solid.json` |
| bubble-preact | registry:component | A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/bubble-preact.json` |
| bubble-vanilla | registry:component | A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/bubble-vanilla.json` |
| bubble-react-webgpu | registry:component | A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/bubble-react-webgpu.json` |
| bubble-vue-webgpu | registry:component | A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/bubble-vue-webgpu.json` |
| bubble-svelte-webgpu | registry:component | A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/bubble-svelte-webgpu.json` |
| bubble-solid-webgpu | registry:component | A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/bubble-solid-webgpu.json` |
| bubble-preact-webgpu | registry:component | A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/bubble-preact-webgpu.json` |
| bubble-vanilla-webgpu | registry:component | A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/bubble-vanilla-webgpu.json` |
| canvas-react | registry:component | Paints your page onto woven artist canvas, with fiber texture, paper tint, grain, a dotted halftone screen, and a soft intro crossfade. Text stays crisp and re… | `npx shadcn@latest add https://canvasui.dev/r/canvas-react.json` |
| canvas-vue | registry:component | Paints your page onto woven artist canvas, with fiber texture, paper tint, grain, a dotted halftone screen, and a soft intro crossfade. Text stays crisp and re… | `npx shadcn@latest add https://canvasui.dev/r/canvas-vue.json` |
| canvas-svelte | registry:component | Paints your page onto woven artist canvas, with fiber texture, paper tint, grain, a dotted halftone screen, and a soft intro crossfade. Text stays crisp and re… | `npx shadcn@latest add https://canvasui.dev/r/canvas-svelte.json` |
| canvas-solid | registry:component | Paints your page onto woven artist canvas, with fiber texture, paper tint, grain, a dotted halftone screen, and a soft intro crossfade. Text stays crisp and re… | `npx shadcn@latest add https://canvasui.dev/r/canvas-solid.json` |
| canvas-preact | registry:component | Paints your page onto woven artist canvas, with fiber texture, paper tint, grain, a dotted halftone screen, and a soft intro crossfade. Text stays crisp and re… | `npx shadcn@latest add https://canvasui.dev/r/canvas-preact.json` |
| canvas-vanilla | registry:component | Paints your page onto woven artist canvas, with fiber texture, paper tint, grain, a dotted halftone screen, and a soft intro crossfade. Text stays crisp and re… | `npx shadcn@latest add https://canvasui.dev/r/canvas-vanilla.json` |
| canvas-react-webgpu | registry:component | Paints your page onto woven artist canvas, with fiber texture, paper tint, grain, a dotted halftone screen, and a soft intro crossfade. Text stays crisp and re… | `npx shadcn@latest add https://canvasui.dev/r/canvas-react-webgpu.json` |
| canvas-vue-webgpu | registry:component | Paints your page onto woven artist canvas, with fiber texture, paper tint, grain, a dotted halftone screen, and a soft intro crossfade. Text stays crisp and re… | `npx shadcn@latest add https://canvasui.dev/r/canvas-vue-webgpu.json` |
| canvas-svelte-webgpu | registry:component | Paints your page onto woven artist canvas, with fiber texture, paper tint, grain, a dotted halftone screen, and a soft intro crossfade. Text stays crisp and re… | `npx shadcn@latest add https://canvasui.dev/r/canvas-svelte-webgpu.json` |
| canvas-solid-webgpu | registry:component | Paints your page onto woven artist canvas, with fiber texture, paper tint, grain, a dotted halftone screen, and a soft intro crossfade. Text stays crisp and re… | `npx shadcn@latest add https://canvasui.dev/r/canvas-solid-webgpu.json` |
| canvas-preact-webgpu | registry:component | Paints your page onto woven artist canvas, with fiber texture, paper tint, grain, a dotted halftone screen, and a soft intro crossfade. Text stays crisp and re… | `npx shadcn@latest add https://canvasui.dev/r/canvas-preact-webgpu.json` |
| canvas-vanilla-webgpu | registry:component | Paints your page onto woven artist canvas, with fiber texture, paper tint, grain, a dotted halftone screen, and a soft intro crossfade. Text stays crisp and re… | `npx shadcn@latest add https://canvasui.dev/r/canvas-vanilla-webgpu.json` |
| cloth-react | registry:component | Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. … | `npx shadcn@latest add https://canvasui.dev/r/cloth-react.json` |
| cloth-vue | registry:component | Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. … | `npx shadcn@latest add https://canvasui.dev/r/cloth-vue.json` |
| cloth-svelte | registry:component | Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. … | `npx shadcn@latest add https://canvasui.dev/r/cloth-svelte.json` |
| cloth-solid | registry:component | Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. … | `npx shadcn@latest add https://canvasui.dev/r/cloth-solid.json` |
| cloth-preact | registry:component | Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. … | `npx shadcn@latest add https://canvasui.dev/r/cloth-preact.json` |
| cloth-vanilla | registry:component | Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. … | `npx shadcn@latest add https://canvasui.dev/r/cloth-vanilla.json` |
| cloth-react-webgpu | registry:component | Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. … | `npx shadcn@latest add https://canvasui.dev/r/cloth-react-webgpu.json` |
| cloth-vue-webgpu | registry:component | Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. … | `npx shadcn@latest add https://canvasui.dev/r/cloth-vue-webgpu.json` |
| cloth-svelte-webgpu | registry:component | Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. … | `npx shadcn@latest add https://canvasui.dev/r/cloth-svelte-webgpu.json` |
| cloth-solid-webgpu | registry:component | Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. … | `npx shadcn@latest add https://canvasui.dev/r/cloth-solid-webgpu.json` |
| cloth-preact-webgpu | registry:component | Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. … | `npx shadcn@latest add https://canvasui.dev/r/cloth-preact-webgpu.json` |
| cloth-vanilla-webgpu | registry:component | Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. … | `npx shadcn@latest add https://canvasui.dev/r/cloth-vanilla-webgpu.json` |
| clouds-react | registry:component | Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/clouds-react.json` |
| clouds-vue | registry:component | Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/clouds-vue.json` |
| clouds-svelte | registry:component | Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/clouds-svelte.json` |
| clouds-solid | registry:component | Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/clouds-solid.json` |
| clouds-preact | registry:component | Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/clouds-preact.json` |
| clouds-vanilla | registry:component | Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/clouds-vanilla.json` |
| clouds-react-webgpu | registry:component | Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies. WebGPU build… | `npx shadcn@latest add https://canvasui.dev/r/clouds-react-webgpu.json` |
| clouds-vue-webgpu | registry:component | Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies. WebGPU build… | `npx shadcn@latest add https://canvasui.dev/r/clouds-vue-webgpu.json` |
| clouds-svelte-webgpu | registry:component | Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies. WebGPU build… | `npx shadcn@latest add https://canvasui.dev/r/clouds-svelte-webgpu.json` |
| clouds-solid-webgpu | registry:component | Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies. WebGPU build… | `npx shadcn@latest add https://canvasui.dev/r/clouds-solid-webgpu.json` |
| clouds-preact-webgpu | registry:component | Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies. WebGPU build… | `npx shadcn@latest add https://canvasui.dev/r/clouds-preact-webgpu.json` |
| clouds-vanilla-webgpu | registry:component | Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies. WebGPU build… | `npx shadcn@latest add https://canvasui.dev/r/clouds-vanilla-webgpu.json` |
| decrypt-reveal-react | registry:component | Renders your page as real ASCII cipher text that decodes back into crisp UI around the cursor behind a flickering wavefront. The HTML stays interactive. No dep… | `npx shadcn@latest add https://canvasui.dev/r/decrypt-reveal-react.json` |
| decrypt-reveal-vue | registry:component | Renders your page as real ASCII cipher text that decodes back into crisp UI around the cursor behind a flickering wavefront. The HTML stays interactive. No dep… | `npx shadcn@latest add https://canvasui.dev/r/decrypt-reveal-vue.json` |
| decrypt-reveal-svelte | registry:component | Renders your page as real ASCII cipher text that decodes back into crisp UI around the cursor behind a flickering wavefront. The HTML stays interactive. No dep… | `npx shadcn@latest add https://canvasui.dev/r/decrypt-reveal-svelte.json` |
| decrypt-reveal-solid | registry:component | Renders your page as real ASCII cipher text that decodes back into crisp UI around the cursor behind a flickering wavefront. The HTML stays interactive. No dep… | `npx shadcn@latest add https://canvasui.dev/r/decrypt-reveal-solid.json` |
| decrypt-reveal-preact | registry:component | Renders your page as real ASCII cipher text that decodes back into crisp UI around the cursor behind a flickering wavefront. The HTML stays interactive. No dep… | `npx shadcn@latest add https://canvasui.dev/r/decrypt-reveal-preact.json` |
| decrypt-reveal-vanilla | registry:component | Renders your page as real ASCII cipher text that decodes back into crisp UI around the cursor behind a flickering wavefront. The HTML stays interactive. No dep… | `npx shadcn@latest add https://canvasui.dev/r/decrypt-reveal-vanilla.json` |
| decrypt-reveal-react-webgpu | registry:component | Renders your page as real ASCII cipher text that decodes back into crisp UI around the cursor behind a flickering wavefront. The HTML stays interactive. No dep… | `npx shadcn@latest add https://canvasui.dev/r/decrypt-reveal-react-webgpu.json` |
| decrypt-reveal-vue-webgpu | registry:component | Renders your page as real ASCII cipher text that decodes back into crisp UI around the cursor behind a flickering wavefront. The HTML stays interactive. No dep… | `npx shadcn@latest add https://canvasui.dev/r/decrypt-reveal-vue-webgpu.json` |
| decrypt-reveal-svelte-webgpu | registry:component | Renders your page as real ASCII cipher text that decodes back into crisp UI around the cursor behind a flickering wavefront. The HTML stays interactive. No dep… | `npx shadcn@latest add https://canvasui.dev/r/decrypt-reveal-svelte-webgpu.json` |
| decrypt-reveal-solid-webgpu | registry:component | Renders your page as real ASCII cipher text that decodes back into crisp UI around the cursor behind a flickering wavefront. The HTML stays interactive. No dep… | `npx shadcn@latest add https://canvasui.dev/r/decrypt-reveal-solid-webgpu.json` |
| decrypt-reveal-preact-webgpu | registry:component | Renders your page as real ASCII cipher text that decodes back into crisp UI around the cursor behind a flickering wavefront. The HTML stays interactive. No dep… | `npx shadcn@latest add https://canvasui.dev/r/decrypt-reveal-preact-webgpu.json` |
| decrypt-reveal-vanilla-webgpu | registry:component | Renders your page as real ASCII cipher text that decodes back into crisp UI around the cursor behind a flickering wavefront. The HTML stays interactive. No dep… | `npx shadcn@latest add https://canvasui.dev/r/decrypt-reveal-vanilla-webgpu.json` |
| liquid-react | registry:component | A pointer-driven GPU fluid simulation over your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/liquid-react.json` |
| liquid-vue | registry:component | A pointer-driven GPU fluid simulation over your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/liquid-vue.json` |
| liquid-svelte | registry:component | A pointer-driven GPU fluid simulation over your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/liquid-svelte.json` |
| liquid-solid | registry:component | A pointer-driven GPU fluid simulation over your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/liquid-solid.json` |
| liquid-preact | registry:component | A pointer-driven GPU fluid simulation over your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/liquid-preact.json` |
| liquid-vanilla | registry:component | A pointer-driven GPU fluid simulation over your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/liquid-vanilla.json` |
| liquid-react-webgpu | registry:component | A pointer-driven GPU fluid simulation over your page. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/liquid-react-webgpu.json` |
| liquid-vue-webgpu | registry:component | A pointer-driven GPU fluid simulation over your page. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/liquid-vue-webgpu.json` |
| liquid-svelte-webgpu | registry:component | A pointer-driven GPU fluid simulation over your page. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/liquid-svelte-webgpu.json` |
| liquid-solid-webgpu | registry:component | A pointer-driven GPU fluid simulation over your page. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/liquid-solid-webgpu.json` |
| liquid-preact-webgpu | registry:component | A pointer-driven GPU fluid simulation over your page. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/liquid-preact-webgpu.json` |
| liquid-vanilla-webgpu | registry:component | A pointer-driven GPU fluid simulation over your page. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/liquid-vanilla-webgpu.json` |
| magnify-react | registry:component | A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t… | `npx shadcn@latest add https://canvasui.dev/r/magnify-react.json` |
| magnify-vue | registry:component | A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t… | `npx shadcn@latest add https://canvasui.dev/r/magnify-vue.json` |
| magnify-svelte | registry:component | A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t… | `npx shadcn@latest add https://canvasui.dev/r/magnify-svelte.json` |
| magnify-solid | registry:component | A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t… | `npx shadcn@latest add https://canvasui.dev/r/magnify-solid.json` |
| magnify-preact | registry:component | A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t… | `npx shadcn@latest add https://canvasui.dev/r/magnify-preact.json` |
| magnify-vanilla | registry:component | A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t… | `npx shadcn@latest add https://canvasui.dev/r/magnify-vanilla.json` |
| magnify-react-webgpu | registry:component | A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t… | `npx shadcn@latest add https://canvasui.dev/r/magnify-react-webgpu.json` |
| magnify-vue-webgpu | registry:component | A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t… | `npx shadcn@latest add https://canvasui.dev/r/magnify-vue-webgpu.json` |
| magnify-svelte-webgpu | registry:component | A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t… | `npx shadcn@latest add https://canvasui.dev/r/magnify-svelte-webgpu.json` |
| magnify-solid-webgpu | registry:component | A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t… | `npx shadcn@latest add https://canvasui.dev/r/magnify-solid-webgpu.json` |
| magnify-preact-webgpu | registry:component | A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t… | `npx shadcn@latest add https://canvasui.dev/r/magnify-preact-webgpu.json` |
| magnify-vanilla-webgpu | registry:component | A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t… | `npx shadcn@latest add https://canvasui.dev/r/magnify-vanilla-webgpu.json` |
| dithered-object-react | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/dithered-object-react.json` |
| dithered-object-vue | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/dithered-object-vue.json` |
| dithered-object-svelte | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/dithered-object-svelte.json` |
| dithered-object-solid | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/dithered-object-solid.json` |
| dithered-object-preact | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/dithered-object-preact.json` |
| dithered-object-vanilla | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/dithered-object-vanilla.json` |
| dithered-object-react-webgpu | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js. WebGPU buil… | `npx shadcn@latest add https://canvasui.dev/r/dithered-object-react-webgpu.json` |
| dithered-object-vue-webgpu | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js. WebGPU buil… | `npx shadcn@latest add https://canvasui.dev/r/dithered-object-vue-webgpu.json` |
| dithered-object-svelte-webgpu | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js. WebGPU buil… | `npx shadcn@latest add https://canvasui.dev/r/dithered-object-svelte-webgpu.json` |
| dithered-object-solid-webgpu | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js. WebGPU buil… | `npx shadcn@latest add https://canvasui.dev/r/dithered-object-solid-webgpu.json` |
| dithered-object-preact-webgpu | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js. WebGPU buil… | `npx shadcn@latest add https://canvasui.dev/r/dithered-object-preact-webgpu.json` |
| dithered-object-vanilla-webgpu | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js. WebGPU buil… | `npx shadcn@latest add https://canvasui.dev/r/dithered-object-vanilla-webgpu.json` |
| displacement-react | registry:component | Warps your live HTML on a displacement grid that ripples away from the cursor, with chromatic fringing and film grain in the disturbed areas. The HTML stays in… | `npx shadcn@latest add https://canvasui.dev/r/displacement-react.json` |
| displacement-vue | registry:component | Warps your live HTML on a displacement grid that ripples away from the cursor, with chromatic fringing and film grain in the disturbed areas. The HTML stays in… | `npx shadcn@latest add https://canvasui.dev/r/displacement-vue.json` |
| displacement-svelte | registry:component | Warps your live HTML on a displacement grid that ripples away from the cursor, with chromatic fringing and film grain in the disturbed areas. The HTML stays in… | `npx shadcn@latest add https://canvasui.dev/r/displacement-svelte.json` |
| displacement-solid | registry:component | Warps your live HTML on a displacement grid that ripples away from the cursor, with chromatic fringing and film grain in the disturbed areas. The HTML stays in… | `npx shadcn@latest add https://canvasui.dev/r/displacement-solid.json` |
| displacement-preact | registry:component | Warps your live HTML on a displacement grid that ripples away from the cursor, with chromatic fringing and film grain in the disturbed areas. The HTML stays in… | `npx shadcn@latest add https://canvasui.dev/r/displacement-preact.json` |
| displacement-vanilla | registry:component | Warps your live HTML on a displacement grid that ripples away from the cursor, with chromatic fringing and film grain in the disturbed areas. The HTML stays in… | `npx shadcn@latest add https://canvasui.dev/r/displacement-vanilla.json` |
| displacement-react-webgpu | registry:component | Warps your live HTML on a displacement grid that ripples away from the cursor, with chromatic fringing and film grain in the disturbed areas. The HTML stays in… | `npx shadcn@latest add https://canvasui.dev/r/displacement-react-webgpu.json` |
| displacement-vue-webgpu | registry:component | Warps your live HTML on a displacement grid that ripples away from the cursor, with chromatic fringing and film grain in the disturbed areas. The HTML stays in… | `npx shadcn@latest add https://canvasui.dev/r/displacement-vue-webgpu.json` |
| displacement-svelte-webgpu | registry:component | Warps your live HTML on a displacement grid that ripples away from the cursor, with chromatic fringing and film grain in the disturbed areas. The HTML stays in… | `npx shadcn@latest add https://canvasui.dev/r/displacement-svelte-webgpu.json` |
| displacement-solid-webgpu | registry:component | Warps your live HTML on a displacement grid that ripples away from the cursor, with chromatic fringing and film grain in the disturbed areas. The HTML stays in… | `npx shadcn@latest add https://canvasui.dev/r/displacement-solid-webgpu.json` |
| displacement-preact-webgpu | registry:component | Warps your live HTML on a displacement grid that ripples away from the cursor, with chromatic fringing and film grain in the disturbed areas. The HTML stays in… | `npx shadcn@latest add https://canvasui.dev/r/displacement-preact-webgpu.json` |
| displacement-vanilla-webgpu | registry:component | Warps your live HTML on a displacement grid that ripples away from the cursor, with chromatic fringing and film grain in the disturbed areas. The HTML stays in… | `npx shadcn@latest add https://canvasui.dev/r/displacement-vanilla-webgpu.json` |
| droplets-react | registry:component | Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/droplets-react.json` |
| droplets-vue | registry:component | Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/droplets-vue.json` |
| droplets-svelte | registry:component | Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/droplets-svelte.json` |
| droplets-solid | registry:component | Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/droplets-solid.json` |
| droplets-preact | registry:component | Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/droplets-preact.json` |
| droplets-vanilla | registry:component | Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/droplets-vanilla.json` |
| droplets-react-webgpu | registry:component | Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/droplets-react-webgpu.json` |
| droplets-vue-webgpu | registry:component | Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/droplets-vue-webgpu.json` |
| droplets-svelte-webgpu | registry:component | Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/droplets-svelte-webgpu.json` |
| droplets-solid-webgpu | registry:component | Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/droplets-solid-webgpu.json` |
| droplets-preact-webgpu | registry:component | Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/droplets-preact-webgpu.json` |
| droplets-vanilla-webgpu | registry:component | Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies. WebGPU build, rendered with vgpu. | `npx shadcn@latest add https://canvasui.dev/r/droplets-vanilla-webgpu.json` |
| flame-wrap-react | registry:component | Wraps any element in a perfectly aligned border of fire: flames rise from the top edge, the outline glows molten, sparks fly, and the content shimmers with hea… | `npx shadcn@latest add https://canvasui.dev/r/flame-wrap-react.json` |
| flame-wrap-vue | registry:component | Wraps any element in a perfectly aligned border of fire: flames rise from the top edge, the outline glows molten, sparks fly, and the content shimmers with hea… | `npx shadcn@latest add https://canvasui.dev/r/flame-wrap-vue.json` |
| flame-wrap-svelte | registry:component | Wraps any element in a perfectly aligned border of fire: flames rise from the top edge, the outline glows molten, sparks fly, and the content shimmers with hea… | `npx shadcn@latest add https://canvasui.dev/r/flame-wrap-svelte.json` |
| flame-wrap-solid | registry:component | Wraps any element in a perfectly aligned border of fire: flames rise from the top edge, the outline glows molten, sparks fly, and the content shimmers with hea… | `npx shadcn@latest add https://canvasui.dev/r/flame-wrap-solid.json` |
| flame-wrap-preact | registry:component | Wraps any element in a perfectly aligned border of fire: flames rise from the top edge, the outline glows molten, sparks fly, and the content shimmers with hea… | `npx shadcn@latest add https://canvasui.dev/r/flame-wrap-preact.json` |
| flame-wrap-vanilla | registry:component | Wraps any element in a perfectly aligned border of fire: flames rise from the top edge, the outline glows molten, sparks fly, and the content shimmers with hea… | `npx shadcn@latest add https://canvasui.dev/r/flame-wrap-vanilla.json` |
| flame-wrap-react-webgpu | registry:component | Wraps any element in a perfectly aligned border of fire: flames rise from the top edge, the outline glows molten, sparks fly, and the content shimmers with hea… | `npx shadcn@latest add https://canvasui.dev/r/flame-wrap-react-webgpu.json` |
| flame-wrap-vue-webgpu | registry:component | Wraps any element in a perfectly aligned border of fire: flames rise from the top edge, the outline glows molten, sparks fly, and the content shimmers with hea… | `npx shadcn@latest add https://canvasui.dev/r/flame-wrap-vue-webgpu.json` |
| flame-wrap-svelte-webgpu | registry:component | Wraps any element in a perfectly aligned border of fire: flames rise from the top edge, the outline glows molten, sparks fly, and the content shimmers with hea… | `npx shadcn@latest add https://canvasui.dev/r/flame-wrap-svelte-webgpu.json` |
| flame-wrap-solid-webgpu | registry:component | Wraps any element in a perfectly aligned border of fire: flames rise from the top edge, the outline glows molten, sparks fly, and the content shimmers with hea… | `npx shadcn@latest add https://canvasui.dev/r/flame-wrap-solid-webgpu.json` |
| flame-wrap-preact-webgpu | registry:component | Wraps any element in a perfectly aligned border of fire: flames rise from the top edge, the outline glows molten, sparks fly, and the content shimmers with hea… | `npx shadcn@latest add https://canvasui.dev/r/flame-wrap-preact-webgpu.json` |
| flame-wrap-vanilla-webgpu | registry:component | Wraps any element in a perfectly aligned border of fire: flames rise from the top edge, the outline glows molten, sparks fly, and the content shimmers with hea… | `npx shadcn@latest add https://canvasui.dev/r/flame-wrap-vanilla-webgpu.json` |
| force-field-react | registry:component | Projects an energy shield lattice over your live HTML. The cursor charges cells as it crosses them and every click detonates a shockwave ripple that refracts t… | `npx shadcn@latest add https://canvasui.dev/r/force-field-react.json` |
| force-field-vue | registry:component | Projects an energy shield lattice over your live HTML. The cursor charges cells as it crosses them and every click detonates a shockwave ripple that refracts t… | `npx shadcn@latest add https://canvasui.dev/r/force-field-vue.json` |
| force-field-svelte | registry:component | Projects an energy shield lattice over your live HTML. The cursor charges cells as it crosses them and every click detonates a shockwave ripple that refracts t… | `npx shadcn@latest add https://canvasui.dev/r/force-field-svelte.json` |
| force-field-solid | registry:component | Projects an energy shield lattice over your live HTML. The cursor charges cells as it crosses them and every click detonates a shockwave ripple that refracts t… | `npx shadcn@latest add https://canvasui.dev/r/force-field-solid.json` |
| force-field-preact | registry:component | Projects an energy shield lattice over your live HTML. The cursor charges cells as it crosses them and every click detonates a shockwave ripple that refracts t… | `npx shadcn@latest add https://canvasui.dev/r/force-field-preact.json` |
| force-field-vanilla | registry:component | Projects an energy shield lattice over your live HTML. The cursor charges cells as it crosses them and every click detonates a shockwave ripple that refracts t… | `npx shadcn@latest add https://canvasui.dev/r/force-field-vanilla.json` |
| force-field-react-webgpu | registry:component | Projects an energy shield lattice over your live HTML. The cursor charges cells as it crosses them and every click detonates a shockwave ripple that refracts t… | `npx shadcn@latest add https://canvasui.dev/r/force-field-react-webgpu.json` |
| force-field-vue-webgpu | registry:component | Projects an energy shield lattice over your live HTML. The cursor charges cells as it crosses them and every click detonates a shockwave ripple that refracts t… | `npx shadcn@latest add https://canvasui.dev/r/force-field-vue-webgpu.json` |
| force-field-svelte-webgpu | registry:component | Projects an energy shield lattice over your live HTML. The cursor charges cells as it crosses them and every click detonates a shockwave ripple that refracts t… | `npx shadcn@latest add https://canvasui.dev/r/force-field-svelte-webgpu.json` |
| force-field-solid-webgpu | registry:component | Projects an energy shield lattice over your live HTML. The cursor charges cells as it crosses them and every click detonates a shockwave ripple that refracts t… | `npx shadcn@latest add https://canvasui.dev/r/force-field-solid-webgpu.json` |
| force-field-preact-webgpu | registry:component | Projects an energy shield lattice over your live HTML. The cursor charges cells as it crosses them and every click detonates a shockwave ripple that refracts t… | `npx shadcn@latest add https://canvasui.dev/r/force-field-preact-webgpu.json` |
| force-field-vanilla-webgpu | registry:component | Projects an energy shield lattice over your live HTML. The cursor charges cells as it crosses them and every click detonates a shockwave ripple that refracts t… | `npx shadcn@latest add https://canvasui.dev/r/force-field-vanilla-webgpu.json` |
| particle-object-react | registry:component | Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/particle-object-react.json` |
| particle-object-vue | registry:component | Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/particle-object-vue.json` |
| particle-object-svelte | registry:component | Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/particle-object-svelte.json` |
| particle-object-solid | registry:component | Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/particle-object-solid.json` |
| particle-object-preact | registry:component | Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/particle-object-preact.json` |
| particle-object-vanilla | registry:component | Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/particle-object-vanilla.json` |
| particle-object-react-webgpu | registry:component | Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js. WebGPU build… | `npx shadcn@latest add https://canvasui.dev/r/particle-object-react-webgpu.json` |
| particle-object-vue-webgpu | registry:component | Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js. WebGPU build… | `npx shadcn@latest add https://canvasui.dev/r/particle-object-vue-webgpu.json` |
| particle-object-svelte-webgpu | registry:component | Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js. WebGPU build… | `npx shadcn@latest add https://canvasui.dev/r/particle-object-svelte-webgpu.json` |
| particle-object-solid-webgpu | registry:component | Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js. WebGPU build… | `npx shadcn@latest add https://canvasui.dev/r/particle-object-solid-webgpu.json` |
| particle-object-preact-webgpu | registry:component | Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js. WebGPU build… | `npx shadcn@latest add https://canvasui.dev/r/particle-object-preact-webgpu.json` |
| particle-object-vanilla-webgpu | registry:component | Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js. WebGPU build… | `npx shadcn@latest add https://canvasui.dev/r/particle-object-vanilla-webgpu.json` |
| particle-reveal-react | registry:component | Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-reveal-react.json` |
| particle-reveal-vue | registry:component | Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-reveal-vue.json` |
| particle-reveal-svelte | registry:component | Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-reveal-svelte.json` |
| particle-reveal-solid | registry:component | Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-reveal-solid.json` |
| particle-reveal-preact | registry:component | Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-reveal-preact.json` |
| particle-reveal-vanilla | registry:component | Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-reveal-vanilla.json` |
| particle-reveal-react-webgpu | registry:component | Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies. WebGPU build, rendered … | `npx shadcn@latest add https://canvasui.dev/r/particle-reveal-react-webgpu.json` |
| particle-reveal-vue-webgpu | registry:component | Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies. WebGPU build, rendered … | `npx shadcn@latest add https://canvasui.dev/r/particle-reveal-vue-webgpu.json` |
| particle-reveal-svelte-webgpu | registry:component | Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies. WebGPU build, rendered … | `npx shadcn@latest add https://canvasui.dev/r/particle-reveal-svelte-webgpu.json` |
| particle-reveal-solid-webgpu | registry:component | Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies. WebGPU build, rendered … | `npx shadcn@latest add https://canvasui.dev/r/particle-reveal-solid-webgpu.json` |
| particle-reveal-preact-webgpu | registry:component | Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies. WebGPU build, rendered … | `npx shadcn@latest add https://canvasui.dev/r/particle-reveal-preact-webgpu.json` |
| particle-reveal-vanilla-webgpu | registry:component | Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies. WebGPU build, rendered … | `npx shadcn@latest add https://canvasui.dev/r/particle-reveal-vanilla-webgpu.json` |
| particle-scroll-react | registry:component | Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-scroll-react.json` |
| particle-scroll-vue | registry:component | Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-scroll-vue.json` |
| particle-scroll-svelte | registry:component | Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-scroll-svelte.json` |
| particle-scroll-solid | registry:component | Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-scroll-solid.json` |
| particle-scroll-preact | registry:component | Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-scroll-preact.json` |
| particle-scroll-vanilla | registry:component | Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-scroll-vanilla.json` |
| particle-scroll-react-webgpu | registry:component | Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies. WebGPU build, rendered… | `npx shadcn@latest add https://canvasui.dev/r/particle-scroll-react-webgpu.json` |
| particle-scroll-vue-webgpu | registry:component | Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies. WebGPU build, rendered… | `npx shadcn@latest add https://canvasui.dev/r/particle-scroll-vue-webgpu.json` |
| particle-scroll-svelte-webgpu | registry:component | Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies. WebGPU build, rendered… | `npx shadcn@latest add https://canvasui.dev/r/particle-scroll-svelte-webgpu.json` |
| particle-scroll-solid-webgpu | registry:component | Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies. WebGPU build, rendered… | `npx shadcn@latest add https://canvasui.dev/r/particle-scroll-solid-webgpu.json` |

## For AI agents

```text
You are adding components from @canvas-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/canvas-ui.md) for the component list.
2. Fetch the machine-readable index: https://canvasui.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: canvas-ui).
```