Liquid cluster

bunx shadcn@latest add @modulo/liquid-cluster

Requires an active Modulo key and a project configured for shadcn.

{
  "registries": {
    "@modulo": {
      "url": "<registry-url>/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${MODULO_REGISTRY_KEY}"
      }
    }
  }
}

Usage

import { LiquidCluster } from "@/components/liquid-cluster/LiquidCluster";

const items = [
  { id: "notification", label: "Open notification", content: <span>Design review is ready.</span> },
  { id: "clear", label: "Clear" },
];

export default function Example() {
  return <LiquidCluster ariaLabel="Notification actions" layout="notification" items={items} defaultSeparation={0} onSelect={id => console.log(id)} />;
}

React and Canvas 2D. All three source files install together. No animation package required.

Interaction

Click the notification, or press Enter or Space, to reveal Clear. Clear dismisses the demo notification. Replay and Reset restore it. Right-click the preview or open the Controls menu for the same actions and preferences.

Notification layout uses two independently operable buttons. At zero separation, their backgrounds form one rectangle. As the gap opens, the inner corners round and a liquid bridge narrows until the card and action separate. Text stays rigid.

Separation ranges from 0 for joined shapes to 1 for separated shapes. Available space determines the gap in pixels. Join and Separate update the same value. A new value retargets the current spring.

Reduced motion applies the final geometry directly. Opaque background removes transparency and the shared shadow. Native buttons remain available if Canvas cannot render or the labels need to wrap.

The background uses geometric smooth-union blending. It is an original adaptation of proximity merging, with no physical fluid simulation or optical refraction.

The default buttons layout also supports ordinary labeled action groups. Supply optional content for a custom card. Handle onSelect in your app to open or dismiss your own notification.