Inset Card

npm install motion clsx tailwind-merge

import { clsx, type ClassValue } from "clsx";
import { extendTailwindMerge } from "tailwind-merge";

/* tailwind-merge must know the site's type scale (globals.css) is a font size, not a text color — otherwise
   cn("text-h6 text-muted-foreground") drops text-h6. */
const twMerge = extendTailwindMerge({
  extend: { classGroups: { "font-size": [{ text: ["display", "h1", "h2", "h3", "h4", "h5", "h6"] }] } },
});

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

import * as React from "react";
import Link from "next/link";
import { cn } from "@/lib/utils";

/*
 * Inset Card — a card whose photo does not touch the card's edge: it sits in a frame with a little padding, and pointing at
 * the card (or focusing it) closes that padding so the photo fills the frame, its corners squaring off (from the Balancee
 * Service, Post and Team cards).
 *
 * Two forms, one file. `join` (default): the frame and the detail box are two boxes `inset` px apart; on hover the padding,
 * the gap and the facing corners all go to 0, so the two become one card; the detail box takes the gap as extra top padding, so
 * the card keeps its height (Balancee does this on the Team card). Without `join` it is one surface: the photo is
 * padded inside it, and fills the top of it on hover, with the text below unchanged.
 *
 * It is plain CSS — no animation library, no JavaScript — so it works as it is on a server page. Framer's spring (bounce 0,
 * 0.4s) is a CSS linear() curve sampled from the spring itself (tools/ui/spring-curve.mjs in the Framebrick workspace;
 * within 1% of it) over 450ms, which is how Balancee's own port runs it: the curve passes 99% at about 340ms and the last
 * pixel at 450ms (Framer's notes say "about 300ms" for it to look settled). A browser without linear() (before Chrome 113,
 * Firefox 112, Safari 17.2) gets cubic-bezier(0.22, 1, 0.36, 1). Padding, gap and radius are not transform or size keys, so
 * <MotionConfig> would not skip them: with reduced motion the hover state simply changes (motion-reduce:transition-none).
 * Keyboard focus shows the same state as hover; hover itself only applies where the device can hover.
 *
 * The photo is decoration (alt=""): the link is named by the detail text. The look is the library's (bg-muted, rounded-xl,
 * rounded-md); the 5px is Balancee's, and a number prop.
 */

const spring =
  "ease-[cubic-bezier(0.22,1,0.36,1)] supports-[transition-timing-function:linear(0,1)]:ease-[linear(0,0.041,0.134,0.248,0.364,0.472,0.569,0.652,0.722,0.78,0.827,0.864,0.894,0.918,0.937,0.951,0.963,0.971,0.978,0.983,0.987,0.99,0.993,0.995,0.996,0.997,0.998,0.998,0.999,1)]";
const ease = `duration-450 ${spring} motion-reduce:transition-none`;

export type InsetCardProps = {
  /** The photo. Give it an empty alt text; `fill` and a plain img both work. */
  media: React.ReactNode;
  /** The detail: a title and a line, say. It sits under the photo. */
  children: React.ReactNode;
  /** Makes the whole card a link (Next.js Link; a full address opens in a new tab). */
  href?: string;
  /** Proportions of the photo frame, as a CSS aspect-ratio value. */
  ratio?: string;
  /** Padding of the frame at rest, in px; it is also the gap to the detail box when joined. */
  inset?: number;
  /** Two boxes that close into one on hover (default), or one surface with the photo padded inside it. */
  join?: boolean;
  className?: string;
};

export function InsetCard({ media, children, href, ratio = "3 / 2", inset = 5, join = true, className }: InsetCardProps) {
  const classes = cn(
    "group flex flex-col rounded-xl outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
    join ? "gap-(--inset) transition-[gap] hover:gap-0 focus-visible:gap-0" : "overflow-hidden bg-muted text-foreground",
    join && ease,
    className,
  );
  const style = { ["--inset" as string]: `${inset}px` };

  const photo = (
    <span
      className={cn(
        "block overflow-hidden p-(--inset) transition-[padding,border-radius] group-hover:p-0 group-focus-visible:p-0",
        join ? "rounded-xl bg-muted group-hover:rounded-b-none group-focus-visible:rounded-b-none" : "",
        ease,
      )}
      style={{ aspectRatio: ratio }}
    >
      <span
        className={cn(
          "block size-full overflow-hidden rounded-md transition-[border-radius] group-hover:rounded-none group-focus-visible:rounded-none [&>*]:size-full [&>*]:object-cover",
          ease,
        )}
      >
        {media}
      </span>
    </span>
  );

  const content = join ? (
    <>
      {photo}
      <span
        className={cn(
          "flex flex-1 flex-col gap-1 rounded-xl bg-muted px-5 py-4 text-foreground transition-[border-radius,padding] group-hover:rounded-t-none group-hover:pt-[calc(1rem+var(--inset))] group-focus-visible:rounded-t-none group-focus-visible:pt-[calc(1rem+var(--inset))]",
          ease,
        )}
      >
        {children}
      </span>
    </>
  ) : (
    <>
      {photo}
      <span className="flex flex-col gap-1 px-5 pt-1 pb-4">{children}</span>
    </>
  );

  if (!href) {
    return (
      <div className={classes} style={style}>
        {content}
      </div>
    );
  }
  if (/^https?:\/\//.test(href)) {
    return (
      <a href={href} target="_blank" rel="noopener noreferrer" className={classes} style={style}>
        {content}
      </a>
    );
  }
  return (
    <Link href={href} className={classes} style={style}>
      {content}
    </Link>
  );
}