Current Button

A raw-WebGL pill filled with a domain-warped current of ink, drawn from the theme's primary, foreground and background colours, over a faint paper-grain field. Hover quickens the current and pressing the button flares it toward the paper colour. The label is set in uppercase mono. Colours are re-read when the theme or palette changes, so it sits 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 current-button

Manual

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

Usage

import { CurrentButton } from "@/components/ui/current-button";

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

Props

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