Loading page…
Loading page…
Two modal families. MorphingModal is a view-driven panel — pass a viewId and the surface morphs between views, sized to its content; it carries every confirm ceremony. CenterMorphModal morphs outward from its trigger for single, self-contained moments, with a full focus trap. Both panels are sharp-cornered and spring in swiftly.
MorphingModal is position:fixed without a portal, so these specimens capture the genuinely open dialog inside a transformed box (the transform makes the box its containing block). The frosted backdrop blurs the portfolio content behind it.
Mobile posture: panel anchors to the bottom edge.
viewId=null — the layer goes inert and pointer-transparent.
import { MorphingModal } from "@coldharbor/webui";
<MorphingModal
viewId={view} // string opens, null closes
onClose={() => setView(null)}
placement="center"
>
{view === "confirm" ? <ConfirmSend /> : <Broadcasting />}
</MorphingModal>--ch-bg--ch-surface--ch-border--ch-fg--ch-fg-muted--ch-overlay--ch-focusSwitch views while open — the panel resizes around the incoming content, the old view blurs out and the new one rises in. This is the send ceremony's confirm → broadcasting hand-off.
setView("broadcasting"); // same modal, new viewId — the surface morphs--ch-bg--ch-surface--ch-border--ch-fg--ch-fg-muted--ch-overlay--ch-focusThe panel FLIP-morphs from the trigger's box and fill color into a house-cut surface plate (--ch-surface), then snaps fill + geometry back onto the trigger on close. Portals to <body>; the replica shows the resting cut surface; the live trigger opens the real dialog.
Replica — the real panel cannot render inline.
Opens over the page; focus returns to the trigger on close.
import { CenterMorphModal, CenterMorphModalContent, CenterMorphModalTrigger } from "@coldharbor/webui";
<CenterMorphModal>
<CenterMorphModalTrigger>
<Button>Review send</Button>
</CenterMorphModalTrigger>
<CenterMorphModalContent ariaLabel="Confirm send">
<ConfirmSend />
</CenterMorphModalContent>
</CenterMorphModal>--ch-bg--ch-surface--ch-border--ch-fg--ch-fg-muted--ch-overlay--ch-focusThe open panel replica under all three layers.
--ch-bg--ch-surface--ch-border--ch-fg--ch-fg-muted--ch-overlay--ch-focus