"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface MorphCardProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string;
  description: string;
  eyebrow?: string;
  icon?: React.ReactNode;
  actionLabel?: string;
}

export function MorphCard({
  title,
  description,
  eyebrow,
  icon,
  actionLabel = "Explore",
  className,
  ...props
}: MorphCardProps) {
  return (
    <div
      className={cn(
        "group relative overflow-hidden rounded-[2rem] border border-border bg-card p-6 transition-[border-radius,transform,box-shadow] duration-500",
        "hover:-translate-y-1 hover:rounded-[2.75rem] hover:shadow-lg",
        className
      )}
      {...props}
    >
      <div
        aria-hidden="true"
        className="absolute -right-10 -top-10 h-24 w-24 rounded-full border border-border/50 bg-muted/50 transition-transform duration-500 group-hover:translate-x-4 group-hover:translate-y-4"
      />
      <div
        aria-hidden="true"
        className="absolute -bottom-12 left-4 h-28 w-28 rounded-[2rem] border border-border/40 bg-accent/20 transition-transform duration-500 group-hover:-translate-y-4 group-hover:translate-x-2"
      />
      <div className="relative z-10 space-y-4">
        {eyebrow ? (
          <p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
            {eyebrow}
          </p>
        ) : null}
        <div className="flex items-center gap-3">
          {icon ? (
            <div className="flex h-10 w-10 items-center justify-center rounded-full border border-border bg-card">
              {icon}
            </div>
          ) : null}
          <h3 className="text-xl font-semibold text-foreground">{title}</h3>
        </div>
        <p className="text-sm text-muted-foreground">{description}</p>
        <button
          type="button"
          className="inline-flex items-center gap-2 text-sm font-semibold text-primary"
        >
          {actionLabel}
          <svg
            aria-hidden="true"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.6"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="h-4 w-4"
          >
            <path d="M5 12h14" />
            <path d="m13 6 6 6-6 6" />
          </svg>
        </button>
      </div>
    </div>
  );
}
Morph Card

Adaptive shape

Dependencies

Files

Installation
