useChromeMorph
The shared morph hook for floating chrome — a toolbar pill, launcher, or nav dock. It animates a container's width/height/border-radius between its collapsed box and an open panel on a tuned curve, cross-fading rest↔panel, then shrinks cleanly back. Position-agnostic and reduced-motion aware.
Installation
npx shadcn@latest add @byronwade/use-chrome-morphProps
| Prop | Type | Default | Description |
|---|---|---|---|
| morphRef | RefObject<HTMLDivElement | null> | — | The morphing container; its CSS anchoring sets the grow direction (the hook only sizes). |
| open | boolean | — | Whether a panel is currently open. |
| growHeight | boolean | — | Bloom width + height (panels) or width-only (menus that swap their own content). |
| width | () => number | — | Open width target in px, read at morph time. |
| restRef | RefObject<HTMLDivElement | null> | — | Resting content faded out as the panel blooms in. |
| panelRef | RefObject<HTMLDivElement | null> | — | Active panel faded in and measured for the open height. |
| height | () => number | — | Explicit open height; falls back to the panel's measured height. |
| collapsedFrom | () => { w: number; h: number } | null | — | Override the collapsed start/end box — e.g. bloom out of a sibling pill. |
| durationMs | number | 220 | Bloom-down duration in ms. |
| deps | React.DependencyList | — | Extra triggers that change the open target (which panel, its size…). |