MorphingCard

A glass-morphic card that smoothly morphs between a compact preview and an expanded detail view using Framer Motion layout animations.

Import

tsx

import { MorphingCard } from '@tac-ui/web';

Default

Click the card to expand it into a full-screen overlay with detail content. Press Escape or click the backdrop to collapse.

Project Alpha

A brief overview of the project.

tsx

<MorphingCard
  layoutId="demo"
  preview={
    <div>
      <CardTitle>Project Alpha</CardTitle>
      <CardDescription>A brief overview of the project.</CardDescription>
    </div>
  }
  detail={
    <div className="space-y-3">
      <CardTitle>Project Alpha</CardTitle>
      <CardDescription>
        Project Alpha is a next-generation platform designed
        to streamline team collaboration and project tracking.
      </CardDescription>
      <div className="flex gap-2">
        <Badge variant="secondary">In Progress</Badge>
        <Badge variant="outline">v2.1</Badge>
      </div>
    </div>
  }
/>

With Actions

The expanded detail view can contain interactive elements like buttons. Clicking them does not collapse the card.

Quick Start

Get started in seconds.

tsx

<MorphingCard
  layoutId="actions"
  preview={
    <div className="flex items-center gap-3">
      <div className="w-10 h-10 rounded-full bg-[var(--primary)] flex items-center justify-center">
        <Zap size={18} className="text-[var(--primary-foreground)]" />
      </div>
      <div>
        <CardTitle>Quick Start</CardTitle>
        <CardDescription>Get started in seconds.</CardDescription>
      </div>
    </div>
  }
  detail={
    <div className="space-y-4">
      <CardTitle>Quick Start Guide</CardTitle>
      <CardDescription>
        Follow these steps to set up your environment
        and deploy your first application.
      </CardDescription>
      <div className="flex gap-2">
        <Button size="sm">Get Started</Button>
        <Button size="sm" variant="outline">Learn More</Button>
      </div>
    </div>
  }
/>

Controlled

Pass expanded and onExpandedChange to control the card state externally. Useful for programmatic open/close or syncing with other UI state.

tsx

const [open, setOpen] = React.useState(false);

<MorphingCard
  layoutId="controlled"
  expanded={open}
  onExpandedChange={setOpen}
  preview={<CardTitle>Controlled Card</CardTitle>}
  detail={<CardDescription>This card is controlled externally.</CardDescription>}
/>
<Button onClick={() => setOpen(true)}>Open Card</Button>

API Reference

Prop	Type	Default	Description
layoutId	string	-	Unique ID for Framer Motion layout morphing synchronization. Required.
expanded	boolean	false	Whether the card is in expanded state. Use with onExpandedChange for controlled mode.
onExpandedChange	(expanded: boolean) => void	-	Called when the expansion state changes.
preview	React.ReactNode	-	Content shown in the compact (collapsed) state.
detail	React.ReactNode	-	Content shown in the expanded overlay state.
children	React.ReactNode	-	Fallback content used when preview or detail is not provided.
className	string	-	Additional CSS classes applied to the card container.