Displacement (Preact, WebGPU)

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 interactive. No dependencies. WebGPU build, rendered with vgpu.

pnpm dlx shadcn@latest add "https://canvasui.dev/r/displacement-preact-webgpu.json"

Sign In

Displacement (Preact, WebGPU)

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 interactive. No dependencies. WebGPU build, rendered with vgpu.

pnpm dlx shadcn@latest add "https://canvasui.dev/r/displacement-preact-webgpu.json"

components/canvasui/Displacement.tsx