Liquid Share
A strictly monochrome liquid-glass share trigger. Tapping the send button compresses, then a controlled gooey bridge stretches a frosted avatar capsule out of it with spring physics. DiceBear Notionists avatars are bundled locally and forced monochrome with CSS.
Dependencies
Interaction Types
Tap the send button to expand & collapse the liquid capsule
Hover avatars for tooltips, one-shot glass shimmer after idle
Micro-haptic pop on expansion, tick on hover, and success chime on avatar click
How to use
'use client';
import { LiquidShare } from "@/components/liquid-share";
export default function Demo() {
return (
<LiquidShare
avatars={[
{ id: "1", name: "Aiko", seed: "mugen-aiko" },
{ id: "2", name: "Ren", seed: "mugen-ren" },
{ id: "3", name: "Sora", seed: "mugen-sora" },
]}
size="md"
onShare={() => console.log("share!")}
/>
);
}Component Props
| Prop | Type | Default | Description |
|---|---|---|---|
| avatars | LiquidShareAvatar[] | DEFAULT_AVATARS | Array of avatars with id, name, and DiceBear seed |
| defaultExpanded | boolean | false | Initial expanded state (uncontrolled) |
| expanded | boolean | — | Controlled expanded state |
| onExpandedChange | (expanded: boolean) => void | — | Callback when expanded state changes |
| onShare | () => void | — | Callback fired when the component expands |
| onAvatarClick | (avatar: LiquidShareAvatar) => void | — | Callback fired when an avatar is selected |
| size | "sm" | "md" | "lg" | "md" | Component size scale |
| disabled | boolean | false | Disables all interaction |
| className | string | "" | Additional CSS classes |