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
Works with npm, pnpm, yarn, and bun

$npx libravelui@latest add morphing-card

Anatomy
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…