Solder
Gooey tabs whose active indicator is a bead of liquid chrome: on selection it stretches toward the target through an SVG gooey filter like mercury, the connective neck thins and breaks with silver droplets that fall and dim, then the bead settles to dark chrome with a metallic sheen and mirror-bright core. Full tablist semantics with arrow-key navigation.
motionpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/solderManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items | SolderItem[] | a small generic set | Tabs to render, in order. |
| value | string | Controlled active tab value. | |
| defaultValue | string | first enabled item | Initial active tab value when uncontrolled. |
| onValueChange | (value: string) => void | Fires whenever the active tab changes, controlled or not. | |
| viscosity | number | 0.55 | 0–1: how thick the solder runs. Higher = slower, heavier travel, a gooier neck, and droplets that cling longer before falling. |
| droplets | number | 2 | Number of glowing droplets shed when the neck breaks (0–3). |
| colors | { /** Mirror-bright center of the liquid blob. @default "#ffffff" */ core?: string; /** Liquid-metal body. @default "#c8cdd6" */ molten?: string; /** Darker meniscus edge. @default "#6f7683" */ edge?: string; /** Sheen on the settled bead. @default "#aab2bf" */ sheen?: string; } | Palette of the melt. | |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"div">, "onChange"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.