Displacement (Svelte)

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.

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

Sign In

Displacement (Svelte)

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.

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

src/lib/components/canvasui/Displacement.svelte