crucıble

Dispatch

An imperatively-fired toast system: call toast() anywhere and one Toaster piles the results into a receding 3D stack — hover fans it to full rows, and each dismisses on timeout, click, or swipe-throw while the survivors exhale up one slot. Promise toasts morph the icon in place; a feed mode streams a masked column. role=status live regions, Escape-dismiss, reduced-motion-safe.

motionpro

Installation

CLI

npx shadcn@latest add @crucible/dispatch

Manual — install dependencies, then copy the source

npm install motion

Props

PropTypeDefaultDescription
positionDispatchPosition"bottom-right"Corner the stack/feed anchors to.
mode"stack" | "feed""stack""stack" piles toasts into a receding 3D stack; "feed" streams a masked column.
channelstring"default"Namespace — pair with toast(msg, { channel }) to drive multiple Toasters.
maxVisiblenumber3How many cards are visible in the collapsed pile before the rest hide behind.
stackOffsetnumber14Vertical peek between collapsed cards, in px.
scaleStepnumber0.05Scale removed per card going back in the collapsed pile.
durationnumber4000Auto-dismiss timeout in ms (loading toasts ignore it).
gapnumber14Row gap when the stack fans out or in feed mode, in px.
swipeDistancenumber90Horizontal throw distance that dismisses a toast, in px.
swipeVelocitynumber480Horizontal throw velocity that dismisses regardless of distance, in px/s.
fanOnHoverbooleantrueFan the collapsed pile into full rows on hover/focus.
pauseOnHoverbooleantrueFreeze auto-dismiss timers while the pointer is over the stack.
closeButtonbooleantrueShow a per-toast close button.
widthnumber356Card + feed width in px (clamped to the viewport).
containerHTMLElement | nulldocument.body (fixed)Portal target. When provided (must be positioned) the Toaster is contained inside it — ideal for previews.
classNamestring

Honors prefers-reduced-motion with a designed static fallback, and passes className through.