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…

Edit on GitHub

Hover Glow

A dynamic Hover Glow component that smoothly follows the cursor, creating a responsive lighting effect.

Particles

An interactive particle system component for building lively, animated visual effects.