ns-ui

Status Metaball Merge

Group membership drawn as an implicit surface: each item is a charge in an inverse-square field, and a marching-squares isoline at F = 1 is stroked as a bare outline, so items in the same group share one necked contour and an item that leaves visibly pinches off into its own closed loop.

Use when Pick status-metaball-merge when the thing being shown is which items BELONG TOGETHER and the join/leave transition itself matters — the contour necks, thins and pinches apart as an item leaves, so the shape alone reads as membership with no legend. avatar-stack-flock is the better pick when the members are identities to be recognised individually rather than a set whose boundary is the point, and status-sphere-dots when the subject is one process's state rather than a relationship between several items.

Install

npx shadcn add https://design.helpmarq.com/r/status-metaball-merge.json
View source and playground

ns-ui / status-metaball-merge

3 items grouped

one contour per group — merged members share a necked outline, whoever leaves pinches off into a loop of their own

Props

PropTypeDefaultDescription
items?MetaballItem[]
label?stringnames the group for assistive tech
onChange?(memberIds: string[]) => void
className?string