LiquidObject (React, WebGPU)

component

Renders any GLB/glTF model, SVG, or image in a studio environment, then drags it through an invisible GPU fluid that swirls under the cursor and splits the light into chromatic fringes. Built on three.js. WebGPU build, rendered with vgpu.

pnpm dlx shadcn@latest add "https://canvasui.dev/r/liquid-object-react-webgpu.json"

Sign In

LiquidObject (React, WebGPU)

component

Renders any GLB/glTF model, SVG, or image in a studio environment, then drags it through an invisible GPU fluid that swirls under the cursor and splits the light into chromatic fringes. Built on three.js. WebGPU build, rendered with vgpu.

pnpm dlx shadcn@latest add "https://canvasui.dev/r/liquid-object-react-webgpu.json"

components/canvasui/LiquidObject.tsx