Smelt
A staged multi-step loader: pending steps are cold gray stampings, the active step glows white under a shimmering underline, and completion quenches it into a checkmark stamped in a calm neutral — advancing on heavy mechanical detents.
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/smeltManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | SmeltStep[] | Ordered status lines. Each is a stage of the operation. | |
| msPerStep | number | 2000 | Milliseconds each step holds before the next detent. |
| loop | boolean | true | Restart from the first step after the last. |
| loading | boolean | true | While true the loader runs; false stops the timer and quenches the current step. |
| value | number | Controlled active index. When set, the internal timer is disabled. | |
| accentColor | string | white | Accent for the active step. |
| steelColor | string | neutral-300 | Color completed checkmarks settle to. |
| visibleSteps | number | 5 | Rows visible in the window before the list starts detenting upward. |
Also accepts all props of React.ComponentPropsWithoutRef<"div"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.