Inkwell

A round raw-WebGL button: a card-coloured glass holding a well of the theme's primary ink, over a faint paper-grain field. Sweeping the cursor tilts and sloshes the surface, and clicking draws the level down before it refills. The label is uppercase mono. Colours come from the theme tokens and are re-read when the theme or palette changes, so it works on paper in light mode and on the dark ground in dark mode. It fills its positioned parent, pauses when off screen or when the tab is hidden, and holds a still frame when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add inkwell

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/inkwell.tsx.
3. Paste the code.

Usage

import { Inkwell } from "@/components/ui/inkwell";

export default function Example() {
  return (
    <div className="relative h-[400px] w-full overflow-hidden">
      <Inkwell />
    </div>
  );
}

Props

Any other <button> attribute is passed through to the inner button.