Bento Grid

1"use client";
2 
3import { motion, type Variants } from "framer-motion";
4import * as React from "react";
5 
6export type BentoGridProps = React.HTMLAttributes<HTMLDivElement> & {
7  /** Number of columns on large screens. */
8  columns?: 2 | 3 | 4;
9};
10 
11export type BentoCardProps = React.HTMLAttributes<HTMLDivElement> & {
12  /** Columns the card spans on large screens. */
13  colSpan?: 1 | 2 | 3;
14  /** Rows the card spans on large screens. */
15  rowSpan?: 1 | 2;
16  /** Optional leading icon / media. */
17  icon?: React.ReactNode;
18  /** Card heading. */
19  title?: React.ReactNode;
20  /** Supporting copy under the title. */
21  description?: React.ReactNode;
22  /** Call-to-action rendered at the bottom of the card. */
23  cta?: React.ReactNode;
24};
25 
26// Static class maps — the Tailwind scanner can't see interpolated class names.
27const GRID_COLS: Record<NonNullable<BentoGridProps["columns"]>, string> = {
28  2: "md:grid-cols-2",
29  3: "md:grid-cols-3",
30  4: "md:grid-cols-4",
31};
32 
33const COL_SPAN: Record<NonNullable<BentoCardProps["colSpan"]>, string> = {
34  1: "md:col-span-1",
35  2: "md:col-span-2",
36  3: "md:col-span-3",
37};
38 
39const ROW_SPAN: Record<NonNullable<BentoCardProps["rowSpan"]>, string> = {
40  1: "md:row-span-1",
41  2: "md:row-span-2",
42};
43 
44const containerVariants: Variants = {
45  hidden: {},
46  visible: { transition: { staggerChildren: 0.08 } },
47};
48 
49const itemVariants: Variants = {
50  hidden: { opacity: 0, y: 20 },
51  visible: {
52    opacity: 1,
53    y: 0,
54    transition: { type: "spring", damping: 32, stiffness: 320, mass: 0.9 },
55  },
56};
57 
58const CARD_BASE =
59  "group relative flex flex-col overflow-hidden rounded-xl border border-border bg-card p-6 text-card-foreground shadow-sm [transition:translate_300ms_cubic-bezier(0.3,0.7,0.4,1),box-shadow_300ms_ease] hover:-translate-y-1 hover:shadow-lg motion-reduce:[transition:none] motion-reduce:hover:translate-y-0";
60 
61const CARD_GLOW =
62  "pointer-events-none absolute inset-0 opacity-0 [transition:opacity_400ms_ease] group-hover:opacity-100 motion-reduce:[transition:none] [background:radial-gradient(280px_circle_at_var(--x,50%)_var(--y,50%),color-mix(in_oklch,var(--primary)_18%,transparent),transparent_70%)]";
63 
64const BentoGrid = React.forwardRef<HTMLDivElement, BentoGridProps>(
65  ({ columns = 3, className, children, ...props }, ref) => (
66    <motion.div
67      ref={ref}
68      data-slot="bento-grid"
69      className={`grid auto-rows-[minmax(11rem,auto)] grid-cols-1 gap-4 ${GRID_COLS[columns]} ${className ?? ""}`}
70      variants={containerVariants}
71// … truncated