Canvas UI: Fluid, Glass, and Shader Effects Over Live HTML

Canvas UI is an open source component library that places fluid simulations, shader effects, and 3D scenes over live HTML interfaces.

The components can refract, distort, pixelate, dissolve, peel, or shatter page content while text, links, and controls remain part of the interface.

The library builds this through an experimental browser feature called html-in-canvas, which lets a canvas element read and paint a live DOM subtree as a texture a shader can sample.

Chrome and Edge support it behind a flag today, with a production origin trial available for sites that want the full effect without asking visitors to change browser settings.

Where the API is missing, each component falls back to a plain WebGL overlay or to normal HTML.

Features:

• 25 canvas, WebGL, shader, particle, and 3D components.
• Live DOM distortion for compatible html-in-canvas effects.
• GLB, glTF, SVG, and image input for object-focused effects.
• React, Solid, Preact, Vue, Svelte, and vanilla TypeScript builds.
• Source-copy installation through a shadcn-compatible registry.
• Standalone typed files with component-specific options.
• Runtime fallback behavior for unsupported browsers.
• Optional shadcn MCP integration for component lookup and installation.

Use Cases:

• Portfolio hero sections pair live headings and calls to action with Liquid, Glass, or Particle Reveal.
• Peel, Shatter, Laser, and Ripple suit product launches that rely on pointer or scroll interaction.
• VHS, Glitch, Retro Dither, and Asciify fit music, gaming, and media microsites with a stylized visual direction.
• GLB and glTF assets become glass, dithered geometry, or particle forms in interactive product showcases.

How To Use It:

Installation

Canvas UI distributes each component as source through the shadcn CLI. Initialize shadcn first when the project does not already contain its registry configuration, then install the component and framework variant you need.

npx shadcn@latest init
npx shadcn@latest add @canvas-ui/liquid-react

Replace liquid with another component slug. Replace react with solid, preact, vue, svelte, or vanilla for another implementation.

npx shadcn@latest add @canvas-ui/liquid-vanilla

The CLI writes most component files to components/canvasui/. Svelte projects use src/lib/components/canvasui/ so $lib imports resolve correctly. Component-specific dependencies are installed by the CLI and listed on the matching documentation page.

Manual installation follows the same source-copy model. Open a component page, select the required framework, copy the file into the project, and import it from the chosen local path.

Basic Usage

The following React example applies the Liquid simulation to a campaign hero. Pointer movement adds colored fluid trails and distorts the wrapped content in a compatible Chrome session. The section remains regular HTML when the experimental API is unavailable.

import { Liquid } from "@/components/canvasui/Liquid";
export default function CampaignHero() {
  return (
    <Liquid
      rainbow
      distortion={0.5}
      force={1.25}
      style={{ minHeight: "32rem" }}
    >
      <section className="campaign-hero">
        <p>New collection</p>
        <h1>Interface motion that reacts to the pointer</h1>
        <a href="/catalog">Browse products</a>
      </section>
    </Liquid>
  );
}

All Components

Browser Notes:

Components marked html-in-canvas need Chrome’s experimental canvas-draw-element feature for their full live DOM rendering path. Local testing requires this flag and a browser restart:

chrome://flags/#canvas-draw-element

Production sites can register for Chrome’s origin trial and deliver the token through a meta tag or HTTP header. The token is bound to the registered domain.

Unsupported browsers render the wrapped content as normal HTML and do not throw an initialization error. The remaining canvas overlay depends on the individual component. Some 3D and shader effects do not use html-in-canvas and work through their own WebGL rendering path.

Alternatives:

• Interactive Smoke/Fluid Motion Effects with Canvas and WebGL
• WebGL-Powered iOS-Style Liquid Glass Effects for HTML Elements
• Recreate Balatro’s Animated Shader Effect with WebGL
• WebGL Liquid Glass Effect for HTML Elements