Displacement (React)

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-react.json"

Sign In

Displacement (React)

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-react.json"

components/canvasui/Displacement.tsx