Beacon
A dynamic-island status pill that fluidly morphs between size presets — a minimal indicator, a compact row, a wide media bar, and a tall card. Width, height, and corner radius are spring-coupled as one liquid shape that overshoots ~1% and beads down like mercury, while the content restacks in lockstep, the outgoing line sliding down and under the incoming. Sequenceable for guided flows, keyboard-expandable, and announced through an aria-live status region.
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/beaconManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| states | BeaconState[] | a connecting → connected → live set | The states this beacon can morph between. |
| value | string | Controlled active state id. Pair with onValueChange. | |
| defaultValue | string | first state | Initial active state id when uncontrolled. |
| onValueChange | (id: string) => void | Fires whenever the active state changes, from any source. | |
| sequence | BeaconSequenceStep[] | Ordered steps for a self-running flow, driven by play() or autoPlay. | |
| autoPlay | boolean | false | Start the sequence automatically on mount. |
| loop | boolean | false | Loop the sequence instead of stopping at the last step. |
| onSequenceEnd | () => void | Fires when a non-looping sequence reaches its end. | |
| stepDuration | number | 2200 | Fallback dwell per step, in ms, when a step omits duration. |
| speed | number | 0.5 | 0–1 morph responsiveness — higher springs snappier between sizes. |
| intensity | number | 0.5 | 0–1 mercury-bead overshoot on settle. 0 lands critically damped; 0.5 gives the signature ~1% overshoot before it beads down. |
| expandable | boolean | true | Allow Enter/Space/click to expand a state that has a body. |
| paused | boolean | false | Pause the running sequence and freeze the live indicator. |
| politeness | "polite" | "assertive" | "polite" | Live-region politeness for status announcements. |
| colors | { /** Live-status indicator accent. @default "#5eead4" */ accent?: string; /** Pill shell fill. @default "#0b0b0d" */ shell?: string; /** Primary text color. @default "#f4f4f5" */ text?: string; } | Colors — one cool accent over a neutral near-black shell. | |
| sizes | Partial<Record<BeaconSize, Partial<BeaconDimensions>>> | Per-size geometry overrides. | |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onChange"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.