Canvas Ui
A library of creative canvas components. Real HTML with WebGL effects running over it. React, Vue, Svelte, vanilla.
Install / Use
npx skills add DavidHDev/canvas-uiInstalls into whichever agent you are using.
README
What makes it different
Most components use the experimental HTML-in-canvas API to read and redraw your live DOM. Text stays selectable, links stay clickable, and the page becomes a texture that fire, fluid, and glass distort in real time.
Where it is not supported, components fall back to WebGL overlays, so every visitor gets a working page.
<table> <tr> <td align="center">🎨</td> <td><b>33 components</b> and counting: Liquid, Glass, Shatter, Force Field, Decrypt Reveal, and more</td> </tr> <tr> <td align="center">🧩</td> <td><b>Framework agnostic</b>: every component ships for React, Solid, Preact, Vue, Svelte, and vanilla</td> </tr> <tr> <td align="center">📋</td> <td><b>Copy, do not install</b>: source lands in your repo via a shadcn-compatible registry</td> </tr> <tr> <td align="center">⚡</td> <td><b>Zero config</b>: self-contained, with sensible defaults and typed props</td> </tr> <tr> <td align="center">🤖</td> <td><b>MCP ready</b>: let your AI assistant find and install components for you</td> </tr> </table>Quick start
Add a component with the shadcn CLI (run npx shadcn@latest init first if you have not):
npx shadcn@latest add @canvas-ui/liquid-react
Swap liquid for any component, react for solid, preact, vue, svelte, or vanilla. Source lands in components/canvasui/, yours to edit.
import { Liquid } from "@/components/canvasui/Liquid";
export default function Page() {
return (
<Liquid>
<YourEntirePage />
</Liquid>
);
}
Most components wrap your content. The subtree stays live and interactive; the effect runs on top.
See the installation guide for manual setup.
Components
Every component ships for all six targets. Compare them in the playground.
<details open> <summary><b>🌊 Fluid & motion</b></summary>| Component | What it does | Component | What it does | | --------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------- | -------------------------------------- | | Liquid | Pointer-driven fluid simulation | Ripple | Water ripples from every click | | Cloth | Fabric rippling in the wind | Droplets | Rain running down the screen | | Bubble | Metaball droplet trailing the cursor | Displacement | Grid that ripples away from the cursor |
</details> <details open> <summary><b>🔥 Fire & energy</b></summary>| Component | What it does | Component | What it does | | ------------------------------------------------------------------- | ----------------------------------- | ----------------------------------------------------------------- | ----------------------------------- | | Blaze | Sparks, smoke, and heat distortion | Flame Wrap | Border of fire around any element | | Force Field | Energy shield with click shockwaves | Laser | Beam that reveals content on scroll |
</details> <details open> <summary><b>💎 Glass & optics</b></summary>| Component | What it does | Component | What it does | | ----------------------------------------------------------- | ----------------------------------------- | --------------------------------------------------------- | --------------------------------------------- | | Glass | Crystal-ball lens that follows the cursor | Frost | Ice that melts under the cursor and refreezes | | Magnify | Sci-fi scanner lens with a HUD reticle | Bend | Folds the page like the face of a cube | | Peel | Peels back to reveal a second layer | Clouds | Mist parted by cursor wind |
</details> <details open> <summary><b>📼 Retro & glitch</b></summary>| Component | What it does | Component | What it does | | ------------------------------------------------------------------------- | --------------------------------------- | ----------------------------------------------------------------- | ------------------------------------- | | VHS | Worn tape wave, chroma bleed, and grain | Glitch | Broadcast tearing with RGB splits | | Retro Dither | D
Related Skills
obsidian
385.5kWork with Obsidian vaults using the official obsidian CLI: read/search/create/edit notes, tasks, links, properties, plugins.
imsg
385.5kUse the imsg CLI from OpenClaw agents for iMessage/SMS DMs, groups, replies, reactions, polls, watching, and private-API actions.
Writing Hookify Rules
140.7kThis skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.
Agent Development
140.7kThis skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or…
