DepthStack

import type { ReactNode } from "react";

type DepthStackProps = {
  children: ReactNode;
  className?: string;
  /** Look of the cards behind. */
  layerClassName?: string;
  /** How many cards sit behind. */
  layers?: number;
  /** How far the cards fan out on hover, in pixels. */
  spread?: number;
};

/* DepthStack: cards wait behind the front card and fan out on hover or keyboard focus. */
export function DepthStack({
  children,
  className = "rounded-2xl border border-white/10 bg-[#1b1830] p-6 text-white",
  layerClassName = "rounded-2xl border border-white/10 bg-[#25213d]",
  layers = 2,
  spread = 14,
}: DepthStackProps) {
  return (
    <div
      className="relative isolate hover:[--open:1] focus-within:[--open:1]"
    >
      {Array.from({ length: layers }, (_, i) => {
        const n = i + 1;
        const side = n % 2 ? 1 : -1;
        return (
          <div
            key={n}
            aria-hidden
            className={`absolute inset-0 transition-transform duration-500 ease-[cubic-bezier(.2,.8,.2,1)] motion-reduce:transition-none ${layerClassName}`}
            style={{
              zIndex: -n,
              opacity: 1 - n * 0.25,
              transform: `translateY(calc(${n * 10}px + var(--open, 0) * ${n * spread}px)) rotate(calc(var(--open, 0) * ${side * n * 2}deg)) scale(${1 - n * 0.05})`,
            }}
          />
        );
      })}
      <div
        className={`relative transition-transform duration-500 ease-[cubic-bezier(.2,.8,.2,1)] motion-reduce:transition-none ${className}`}
        style={{ transform: "translateY(calc(var(--open, 0) * -6px))" }}
      >
        {children}
      </div>
    </div>
  );
}