Reel
A draggable, throwable rail of media cards with momentum and detent snapping (transform-only) where off-center cards rest in a quiet duotone and the centered one blooms to full contrast. Clicking a card performs a genuine shared-element expand — media and title travel into a centered detail overlay with unbroken radii, then body copy fades up. Focus-trapped dialog with Escape, outside-click, and arrow-key rail nav; reduced motion snaps instantly.
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/reelManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReelItem[] | Cards to arrange along the rail. Each expands into a centered overlay on click. | |
| cardWidth | number | 240 | Card face width in px. |
| cardHeight | number | 320 | Card face height in px. |
| gap | number | 16 | Gap between cards in px. |
| defaultIndex | number | 0 | Index centered on first paint. |
| onIndexChange | (index: number) => void | Fires whenever the centered card changes. | |
| onExpand | (item: ReelItem, index: number) => void | Fires when a card is expanded into the overlay. | |
| onAction | (item: ReelItem) => void | Called when a non-link action button is pressed in the expanded card. | |
| duotone | boolean | true | Rest off-center cards in a quiet duotone; the centered card blooms to full color. |
| expandedMaxWidth | number | 520 | Expanded overlay max width in px. |
| closeOnOutsideClick | boolean | true | Close when the backdrop is clicked. |
| closeOnEscape | boolean | true | Close on the Escape key. |
| accent | string | "#93c5fd" | Single cool accent hex for focus rings. |
| label | string | "Card carousel" | Accessible name for the carousel. |
| className | string | Extra classes for the outer wrapper. |
Honors prefers-reduced-motion with a designed static fallback, and passes className through.