Morphing Card

It grows from where it sits into a centred panel, its face staying at the top while details unfold, and shrinks back on close.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add morphing-card

Example

import { MorphingCard } from "@/components/galactrex/morphing-card";

<MorphingCard label="Orbit" details={<p>…</p>}><h3>Orbit</h3></MorphingCard>

Installs to components/galactrex/morphing-card.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Card face.
`details`	`ReactNode`	—	Added in the open view.
`label`	`string`	—	Dialog name.
`width`	`number`	`560`	Open width in px.
`className`	`string`	—	Extra classes for the outer element.

A modal dialog: focus moves in, is held, and returns to the card; Escape and backdrop close it.