Ink Canvas

An interactive fluid canvas: drag the cursor to paint ribbons of ink that keep swirling after you let go, with a soft glow. It fills its positioned parent. It only moves in response to the cursor, so it has no autoplaying motion. Built on the shaders library (MIT) and rendered with WebGPU.

Installation

CLI

npx @modus-ui/cli add ink-canvas

Manual

1. Install shaders with npm install shaders.
2. Copy the code from the component tab.
3. Create a file at components/ui/ink-canvas.tsx.
4. Paste the code.

Usage

import { InkCanvas } from "@/components/ui/ink-canvas";

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <InkCanvas />
      <div className="relative z-10 p-8">
        <h1>Content over the effect</h1>
      </div>
    </div>
  );
}

Props