Morphing Card
An interactive morphing card that smoothly transitions between preview and detailed views.
Shared element transitionFluid expansionScrollable content
Basic
Features
Seamless Transitions
Morphs smoothly from trigger to full content view.
Layout Preservation
Maintains context while expanding to show details.
Intuitive Dismissal
Close via button or clicking outside.
Rich Content
Supports images, text, and complex layouts.
Installation
$npx libravelui@latest add morphing-cardAnatomy
import {MorphingCard,MorphingCardTrigger,MorphingCardContainer,MorphingCardContent,MorphingCardTitle,MorphingCardSubtitle,MorphingCardDescription,MorphingCardImage,MorphingCardClose,} from "@/components/ui/motion/morphing-card";<MorphingCard><MorphingCardTrigger> <MorphingCardImage src="..." /> <MorphingCardTitle>Title</MorphingCardTitle></MorphingCardTrigger><MorphingCardContainer> <MorphingCardContent> <MorphingCardImage src="..." /> <MorphingCardTitle>Title</MorphingCardTitle> <MorphingCardDescription>...</MorphingCardDescription> <MorphingCardClose /> </MorphingCardContent></MorphingCardContainer></MorphingCard>Testing Playground
Props
Loading types…