Cards that grow into a modal and shrink back into the same spot. The card morphs by measuring its box, the content crossfades, and everything stays inside its own frame.
npx shadcn@latest add https://hyperblur.dev/r/modal-shared-layout.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/modal-shared-layout.tsx.
import { ModalSharedLayout } from "@/components/hyperblur/modal-shared-layout"
<ModalSharedLayout height={220} cards={[{ id: "a", title: "A slow weekend", body: "Start with coffee.", action: "Save" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| cards | { id: string; eyebrow?: string; title: string; from?: string; to?: string; body?: ReactNode; action?: string }[] | Cards to show. Two sample cards are used when omitted. | |
| value | string | null | Controlled id of the open card, or null. Pair with onChange. | |
| defaultValue | string | null | null | Initially open card when uncontrolled. |
| onChange | (id: string | null) => void | Called when a card opens or the modal closes. | |
| height | number | 200 | Height of the frame in pixels. |
| autoDemo | number | 0 | Milliseconds between automatic open and close cycles while nothing is hovered or focused. Uncontrolled only. 0 turns it off. |
| accent | string | "#2f7bff" | Focus ring color. |