Isometric Bento | Craft | Muhammed Sanjid

Overview

A dashboard-style bento grid where every tile holds a small animated isometric machine: a gauge, a flowing event rail, stacked trays, a padlock, a server rack or a row of keys. Tiles blur in one after another as the grid scrolls into view, each machine drops into place, and metrics count up to their value. On hover a tile tilts toward the pointer, a soft light follows the cursor, the machine shifts a little more than the tile for depth, and it lifts off its shadow. Tiles span one or two columns and rows, and the grid fills any gaps. Machines pause while off screen. Tiles are links when given an href, otherwise toggle buttons that show a check when selected.

Installation

Install dependencies:

$ pnpm add motion lucide-react

Add the utility function for class merging:

lib/utils.ts

tsx

1import { ClassValue, clsx } from "clsx";2import { twMerge } from "tailwind-merge";3
4export function cn(...inputs: ClassValue[]) {5  return twMerge(clsx(inputs));6}

Copy the component code into your project:

components/ui/isometric-bento.tsx

tsx

1"use client";2
3import { useEffect, useRef, useState } from "react";4import type { CSSProperties, PointerEvent as ReactPointerEvent, ReactNode } from "react";5import { animate, motion, useInView, useMotionTemplate, useMotionValue, useReducedMotion, useSpring, useTransform } from "motion/react";6import Link from "next/link";7import { ArrowUpRight } from "lucide-react";8import { cn } from "@/lib/utils";9
10export const ISOMETRIC_BENTO_FIGURES = [11  "gauge",12  "flow",13  "stack",14  "lock",15  "rack",16  "keys",17] as const;18
19export type IsometricBentoFigure = (typeof ISOMETRIC_BENTO_FIGURES)[number];20
21export type IsometricBentoItem = {22  id: string;23  eyebrow: string;24  title: string;25  detail: string;26  icon?: ReactNode;27  metric?: string;28  size?: "standard" | "wide" | "tall" | "feature";29  href?: string;30  /** Which small machine sits in the tile. Defaults by position. */31  figure?: IsometricBentoFigure;32};33
34export type IsometricBentoProps = {35  items: IsometricBentoItem[];36  className?: string;37  onSelect?: (item: IsometricBentoItem) => void;38};39
40/* ------------------------------------------------------------------ */41/* Isometric projection. Same camera as the anatomy kit: azimuth 45°,  */42/* elevation 30°. World x, y lie on the floor, z points up.            */43/* ------------------------------------------------------------------ */44
45const SCALE = 1.35;46const SX = Math.SQRT1_2 * SCALE;47const SY = SX / 2;48const LIFT = (Math.sqrt(3) / 2) * SCALE;49const DEG = Math.PI / 180;50
51type Pt = [number, number];52
53const at = (x: number, y: number, z = 0): Pt => [54  (x - y) * SX,55  (x + y) * SY - z * LIFT,56];57
58const f2 = (value: number) => value.toFixed(2);59
60const poly = (points: Pt[]) =>61  `M${points.map(([px, py]) => `${f2(px)} ${f2(py)}`).join("L")}Z`;62
63const path = (points: Pt[]) =>64  `M${points.map(([px, py]) => `${f2(px)} ${f2(py)}`).join("L")}`;65
66/** A matrix that lays local (x, y) onto the horizontal plane at height z. */67const plane = (x: number, y: number, z: number) => {68  const [e, f] = at(x, y, z);69  return `matrix(${f2(SX)} ${f2(SY)} ${f2(-SX)} ${f2(SY)} ${f2(e)} ${f2(f)})`;70};71
72type Tone = "base" | "body" | "accent";73
74/** Rectangular solid with three visible faces: top, left and right. */75function Block({76  x,77  y,78  z,79  w,80  d,81  h,82  tone = "body",83}: {84  x: number;85  y: number;86  z: number;87  w: number;88  d: number;89  h: number;90  tone?: Tone;91}) {92  const x1 = x + w;93  const y1 = y + d;94  const z1 = z + h;95  return (96    <g className={cn("ib-solid", `ib-${tone}`)}>97      <path98        className="ib-face ib-right"99        d={poly([at(x1, y, z), at(x1, y1, z), at(x1, y1, z1), at(x1, y, z1)])}100      />101      <path102        className="ib-face ib-left"103        d={poly([at(x, y1, z), at(x1, y1, z), at(x1, y1, z1), at(x, y1, z1)])}104      />105      <path106        className="ib-face ib-top"107        d={poly([at(x, y, z1), at(x1, y, z1), at(x1, y1, z1), at(x, y1, z1)])}108      />109    </g>110  );111}112
113/** Upright cylinder: a round top plus the visible half of its side. */114function Drum({115  cx,116  cy,117  r,118  z,119  h,120  tone = "body",121}: {122  cx: number;123  cy: number;124  r: number;125  z: number;126  h: number;127  tone?: Tone;128}) {129  const top = z + h;130  const front = (zz: number) =>131    Array.from({ length: 17 }, (_, i) => {132      const a = -Math.PI / 4 + (i * Math.PI) / 16;133      return at(cx + r * Math.cos(a), cy + r * Math.sin(a), zz);134    });135  const ring = Array.from({ length: 33 }, (_, i) => {136    const a = (i * Math.PI) / 16;137    return at(cx + r * Math.cos(a), cy + r * Math.sin(a), top);138  });139  return (140    <g className={cn("ib-solid", `ib-${tone}`)}>141      <path142        className="ib-face ib-left"143        d={poly([...front(top), ...front(z).reverse()])}144      />145      <path className="ib-face ib-top" d={poly(ring)} />146    </g>147  );148}149
150/* ------------------------------------------------------------------ */151/* The six small machines. Each moving part is a CSS animation.        */152/* ------------------------------------------------------------------ */153
154function Screws({ points, z }: { points: Array<[number, number]>; z: number }) {155  return (156    <g className="ib-screws">157      {points.map(([x, y]) => {158        const [cx, cy] = at(x, y, z);159        return <circle key={`${x}:${y}`} cx={f2(cx)} cy={f2(cy)} r={1.1} />;160      })}161    </g>162  );163}164
165/** A dial gauge on a stand. The needle sways around the reading. */166function GaugeScene() {167  const ticks = Array.from({ length: 21 }, (_, i) => {168    const a = (-135 + i * 13.5) * DEG;169    const major = i % 5 === 0;170    const r0 = major ? 12.6 : 14.2;171    const r1 = 15.8;172    return path([173      [r0 * Math.cos(a), r0 * Math.sin(a)],174      [r1 * Math.cos(a), r1 * Math.sin(a)],175    ]);176  }).join("");177
178  return (179    <g>180      <g className="ib-solid ib-base">181        {[-32, 32].flatMap((x) =>182          [-26, 26].map((y) => (183            <Drum key={`${x}:${y}`} cx={x} cy={y} r={3} z={-3} h={3} tone="base" />184          )),185        )}186      </g>187      <Block x={-38} y={-30} z={0} w={76} d={60} h={4} tone="base" />188      <Screws189        points={[190          [-33, -25],191          [33, -25],192          [-33, 25],193          [33, 25],194        ]}195        z={4}196      />197      <Drum cx={0} cy={-2} r={18} z={4} h={8} tone="body" />198      <Drum cx={0} cy={-2} r={20} z={12} h={2} tone="base" />199      <g transform={plane(0, -2, 14.2)}>200        <circle className="ib-dial" r={17.4} />201        <path className="ib-tick" d={ticks} />202        <g transform="rotate(38)">203          <g className="ib-needle">204            <path className="ib-needle-line" d="M-3 0 L14 0" />205          </g>206        </g>207        <circle className="ib-pivot" r={1.7} />208      </g>209      <Drum cx={28} cy={20} r={2} z={4} h={0.6} tone="accent" />210    </g>211  );212}213
214/** Stacked trays on two back posts. The accent tray bobs up and down. */215function StackScene() {216  return (217    <g>218      <Block x={-34} y={-34} z={0} w={68} d={68} h={4} tone="base" />219      <Block x={-30} y={-30} z={4} w={5} d={5} h={52} tone="body" />220      <Block x={25} y={-30} z={4} w={5} d={5} h={52} tone="body" />221      <Block x={-28} y={-28} z={12} w={56} d={56} h={2} tone="body" />222      <Screws223        points={[224          [-24, -24],225          [24, -24],226        ]}227        z={14}228      />229      <Block x={-28} y={-28} z={24} w={56} d={56} h={2} tone="body" />230      <Screws231        points={[232          [-24, -24],233          [24, -24],234        ]}235        z={26}236      />237      <Block x={-28} y={-28} z={36} w={56} d={56} h={2} tone="body" />238      <g className="ib-bob">239        <Block x={-28} y={-28} z={46} w={56} d={56} h={2} tone="accent" />240        <Screws241          points={[242            [-24, 24],243            [24, 24],244          ]}245          z={48}246        />247      </g>248    </g>249  );250}251
252/** A bin feeds a rail of events that runs into a tray. */253function FlowScene() {254  const start = at(-50, -6, 8);255  const end = at(50, -6, 8);256  const dx = end[0] - start[0];257  const dy = end[1] - start[1];258  const events = [0, 1, 2, 3];259  return (260    <g>261      <Block x={-78} y={-28} z={0} w={34} d={42} h={4} tone="base" />262      <Block x={-74} y={-24} z={4} w={26} d={34} h={18} tone="body" />263      <path className="ib-rail" d={path([start, end])} />264      {events.map((i) => (265        <circle266          key={i}267          className="ib-dot"268          cx={f2(start[0])}269          cy={f2(start[1])}270          r={2.2}271          style={272            {273              "--dx": `${f2(dx)}px`,274              "--dy": `${f2(dy)}px`,275              animationDelay: `${-i * 0.7}s`,276            } as CSSProperties277          }278        />279      ))}280      <Block x={46} y={-28} z={0} w={34} d={42} h={4} tone="base" />281      <Block x={50} y={-24} z={4} w={26} d={34} h={12} tone="base" />282      <Drum cx={60} cy={-10} r={2.2} z={16} h={0.6} tone="accent" />283    </g>284  );285}286
287/** A padlock whose shackle lifts and drops back as it latches. */288function LockScene() {289  const arc = Array.from({ length: 13 }, (_, i) => {290    const a = Math.PI - (i * Math.PI) / 12;291    return at(9 * Math.cos(a), -6, 26 + 9 * Math.sin(a));292  });293  const shackle = path([at(-9, -6, 13), at(-9, -6, 26), ...arc, at(9, -6, 13)]);294  return (295    <g>296      <Block x={-26} y={-24} z={0} w={52} d={48} h={3} tone="base" />297      <g className="ib-shackle">298        <path className="ib-shackle-line" d={shackle} />299      </g>300      <Block x={-18} y={-16} z={3} w={36} d={32} h={20} tone="body" />301      <path className="ib-keyhole" d={path([at(0, 16, 14), at(0, 16, 9)])} />302      <circle303        className="ib-lamp"304        cx={f2(at(0, 16, 17)[0])}305        cy={f2(at(0, 16, 17)[1])}306        r={1.6}307      />308    </g>309  );310}311
312/** A four-bay rack. One module slides out toward the viewer and back. */313function RackScene() {314  const [ejectX, ejectY] = at(0, 12, 0);315  const modules = [-27, -12, 3, 18];316  return (317    <g>318      <Block x={-40} y={-30} z={0} w={80} d={60} h={4} tone="base" />319      <Block x={-35} y={-26} z={4} w={5} d={6} h={52} tone="body" />320      <Block x={30} y={-26} z={4} w={5} d={6} h={52} tone="body" />321      {modules.map((x, index) => {322        const sliding = index === 2;323        const tone: Tone = index === 1 ? "accent" : "body";324        return (325          <g326            key={x}327            className={sliding ? "ib-eject" : undefined}328            style={329              sliding330                ? ({331                    "--dx": `${f2(ejectX)}px`,332                    "--dy": `${f2(ejectY)}px`,333                  } as CSSProperties)334                : undefined335            }336          >337            <Block x={x} y={-14} z={8} w={11} d={28} h={12} tone={tone} />338            <Drum339              cx={x + 5.5}340              cy={6}341              r={1.4}342              z={20}343              h={0.5}344              tone={tone === "accent" ? "base" : "accent"}345            />346          </g>347        );348      })}349    </g>350  );351}352
353/** A keyboard row of key caps. A wave of presses runs along the rows. */354function KeysScene() {355  const keys: Array<{ x: number; y: number; c: number; r: number }> = [];356  for (let r = 0; r < 2; r++) {357    for (let c = 0; c < 7; c++) {358      keys.push({ x: -62 + c * 20, y: -18 + r * 22, c, r });359    }360  }361  return (362    <g>363      <Block x={-75} y={-30} z={0} w={150} d={60} h={4} tone="base" />364      {keys.map(({ x, y, c, r }) => {365        const lit = c === 4 && r === 0;366        return (367          <g368            key={`${c}:${r}`}369            className="ib-key"370            style={{ animationDelay: `${(c * 0.13 + r * 0.31).toFixed(2)}s` }}371          >372            <Block x={x} y={y} z={4} w={12} d={12} h={3} tone={lit ? "accent" : "body"} />373          </g>374        );375      })}376    </g>377  );378}379
380function FigureArt({ kind }: { kind: IsometricBentoFigure }) {381  const scene = {382    gauge: <GaugeScene />,383    flow: <FlowScene />,384    stack: <StackScene />,385    lock: <LockScene />,386    rack: <RackScene />,387    keys: <KeysScene />,388  }[kind];389  // A soft contact shadow under each machine's footprint.390  const [rx, ry, cy] = { gauge: [72, 26, 10], flow: [112, 30, 8], stack: [66, 26, 12], lock: [50, 20, 8], rack: [74, 26, 10], keys: [112, 30, 12] }[kind];391  const gid = `ib-shadow-${kind}`;392  return (393    <svg className="isometric-bento__art" viewBox="-108 -80 216 134" aria-hidden="true" focusable="false">394      <defs>395        <radialGradient id={gid}>396          <stop offset="0" stopColor="var(--color-ink)" stopOpacity="0.16" />397          <stop offset="1" stopColor="var(--color-ink)" stopOpacity="0" />398        </radialGradient>399      </defs>400      <ellipse className="ib-shadow" cx="0" cy={cy} rx={rx} ry={ry} fill={`url(#${gid})`} />401      <g className="ib-scene">{scene}</g>402    </svg>403  );404}405
406/** Counts the number inside a metric like "99.98%", "2.4k" or "04" up from zero. */407function Metric({ value, run }: { value: string; run: boolean }) {408  const reduce = useReducedMotion();409  const match = value.match(/^(\D*?)(\d[\d,]*(?:\.\d+)?)(.*)$/);410  const [text, setText] = useState(value);411  useEffect(() => {412    if (!match || !run || reduce) {413      setText(value);414      return;415    }416    const [, pre, num, post] = match;417    const decimals = num.split(".")[1]?.length ?? 0;418    const pad = num.startsWith("0") && !num.startsWith("0.") ? num.length : 0;419    const target = Number(num.replace(/,/g, ""));420    const c = animate(0, target, {421      duration: 1.3,422      ease: [0.16, 1, 0.3, 1],423      onUpdate: (v) => {424        let s = v.toFixed(decimals);425        if (pad) s = s.padStart(pad, "0");426        setText(`${pre}${s}${post}`);427      },428    });429    return () => c.stop();430    // eslint-disable-next-line react-hooks/exhaustive-deps431  }, [run, value, reduce]);432  return (433    <span className="isometric-bento__metric" aria-label={value}>434      <span aria-hidden>{text}</span>435    </span>436  );437}438
439const TILT = { stiffness: 220, damping: 22, mass: 0.6 };440
441function Tile({442  item,443  index,444  selected,445  onActivate,446}: {447  item: IsometricBentoItem;448  index: number;449  selected: boolean;450  onActivate: () => void;451}) {452  const reduce = !!useReducedMotion();453  const ref = useRef<HTMLDivElement>(null);454  const seen = useInView(ref, { once: true, amount: 0.25 });455  // Animations only run while the tile is on screen.456  const live = useInView(ref, { amount: 0 });457  const figure = item.figure ?? ISOMETRIC_BENTO_FIGURES[index % ISOMETRIC_BENTO_FIGURES.length];458
459  const px = useMotionValue(0.5);460  const py = useMotionValue(0.5);461  const [hover, setHover] = useState(false);462  const rotateX = useSpring(useTransform(py, [0, 1], [4, -4]), TILT);463  const rotateY = useSpring(useTransform(px, [0, 1], [-5, 5]), TILT);464  const artX = useSpring(useTransform(px, [0, 1], [-7, 7]), TILT);465  const artY = useSpring(useTransform(py, [0, 1], [-5, 5]), TILT);466  const gx = useTransform(px, (v) => v * 100);467  const gy = useTransform(py, (v) => v * 100);468  const glare = useMotionTemplate`radial-gradient(380px circle at ${gx}% ${gy}%, color-mix(in oklch, var(--color-paper) 75%, transparent), transparent 60%)`;469
470  const onMove = (e: ReactPointerEvent<HTMLDivElement>) => {471    if (reduce || e.pointerType !== "mouse") return;472    const r = e.currentTarget.getBoundingClientRect();473    px.set((e.clientX - r.left) / r.width);474    py.set((e.clientY - r.top) / r.height);475  };476  const onLeave = () => {477    px.set(0.5);478    py.set(0.5);479    setHover(false);480  };481
482  const className = cn(483    "isometric-bento__item",484    index % 2 === 0 ? "isometric-bento__item--light" : "isometric-bento__item--pearl",485    selected && "isometric-bento__item--selected",486  );487
488  const content = (489    <span className="isometric-bento__content">490      <motion.span aria-hidden className="isometric-bento__glare" style={{ backgroundImage: glare }} animate={{ opacity: hover ? 1 : 0 }} transition={{ duration: 0.3 }} />491      <span className="isometric-bento__art-wrap">492        <motion.span className="isometric-bento__parallax" style={reduce ? undefined : { x: artX, y: artY }}>493          <motion.span494            className="isometric-bento__drop"495            initial={reduce ? false : { opacity: 0, y: -18, scale: 0.94, filter: "blur(6px)" }}496            animate={seen ? { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" } : undefined}497            transition={{ type: "spring", stiffness: 180, damping: 16, delay: 0.15 + index * 0.06 }}498          >499            <FigureArt kind={figure} />500          </motion.span>501        </motion.span>502      </span>503      <span className="isometric-bento__topline">504        <span className="isometric-bento__icon">{item.icon ?? <span aria-hidden="true" className="size-2 rounded-full bg-current" />}</span>505        <span className="isometric-bento__eyebrow">{item.eyebrow}</span>506        {item.href ? (507          <ArrowUpRight aria-hidden="true" className="isometric-bento__arrow" />508        ) : (509          <span aria-hidden className="isometric-bento__check">510            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">511              <motion.path d="M3.5 8.5 6.5 11.5 12.5 4.5" initial={false} animate={{ pathLength: selected ? 1 : 0, opacity: selected ? 1 : 0 }} transition={{ duration: 0.25 }} />512            </svg>513          </span>514        )}515      </span>516      {item.metric ? <Metric value={item.metric} run={seen} /> : null}517      <span className="isometric-bento__title">{item.title}</span>518      <span className="isometric-bento__detail">{item.detail}</span>519    </span>520  );521
522  return (523    <motion.div524      ref={ref}525      data-live={live}526      className={cn("isometric-bento__cell", `isometric-bento__cell--${item.size ?? "standard"}`)}527      onPointerMove={onMove}528      onPointerEnter={(e) => e.pointerType === "mouse" && setHover(true)}529      onPointerLeave={onLeave}530      initial={reduce ? false : { opacity: 0, y: 26, filter: "blur(8px)" }}531      animate={seen ? { opacity: 1, y: 0, filter: "blur(0px)" } : undefined}532      transition={{ duration: 0.6, ease: [0.23, 1, 0.32, 1], delay: index * 0.06 }}533      style={reduce ? undefined : { rotateX, rotateY, transformPerspective: 900 }}534    >535      {item.href ? (536        <Link href={item.href} className={className}>537          {content}538        </Link>539      ) : (540        <button type="button" aria-pressed={selected} onClick={onActivate} className={className}>541          {content}542        </button>543      )}544    </motion.div>545  );546}547
548export function IsometricBento({ items, className, onSelect }: IsometricBentoProps) {549  const [active, setActive] = useState<string | null>(null);550  if (!items.length) return null;551
552  return (553    <section className={cn("isometric-bento", className)} aria-label="Isometric bento grid">554      <div className="isometric-bento__grid">555        {items.map((item, index) => (556          <Tile557            key={item.id}558            item={item}559            index={index}560            selected={active === item.id}561            onActivate={() => {562              setActive((a) => (a === item.id ? null : item.id));563              onSelect?.(item);564            }}565          />566        ))}567      </div>568      {/* Global: the figure parts live in child components, which styled-jsx does not scope. */}569      <style jsx global>{`570        .isometric-bento {571          padding: 1.5rem 0.25rem 2.5rem;572        }573        .isometric-bento__grid {574          display: grid;575          grid-template-columns: repeat(4, minmax(0, 1fr));576          grid-auto-rows: minmax(7rem, auto);577          grid-auto-flow: row dense;578          gap: 0.875rem;579          max-width: 60rem;580          margin-inline: auto;581          align-items: stretch;582        }583        .isometric-bento__cell {584          min-width: 0;585          will-change: transform;586        }587        .isometric-bento__cell--wide {588          grid-column: span 2;589        }590        .isometric-bento__cell--tall {591          grid-row: span 2;592        }593        .isometric-bento__cell--feature {594          grid-column: span 2;595          grid-row: span 2;596        }597        .isometric-bento__item {598          position: relative;599          display: block;600          height: 100%;601          width: 100%;602          min-width: 0;603          padding: 0;604          appearance: none;605          border: 0;606          border-radius: 20px;607          background: transparent;608          color: inherit;609          font: inherit;610          cursor: pointer;611          text-align: left;612          text-decoration: none;613          outline: none;614        }615        .isometric-bento__item--light {616          --tile-surface: var(--color-paper);617        }618        .isometric-bento__item--pearl {619          --tile-surface: var(--color-paper-2);620        }621        .isometric-bento__content {622          position: relative;623          z-index: 1;624          display: flex;625          height: 100%;626          min-height: 100%;627          flex-direction: column;628          align-items: flex-start;629          padding: 0.875rem 1.1rem 1.1rem;630          background: var(--tile-surface);631          border-radius: 20px;632          box-shadow:633            0 0 0 1px var(--color-rule),634            0 1px 2px rgba(0, 0, 0, 0.04),635            0 2px 0 color-mix(in oklch, var(--color-rule), transparent 30%);636          overflow: hidden;637          transition: box-shadow 260ms cubic-bezier(0.23, 1, 0.32, 1);638        }639        .isometric-bento__glare {640          position: absolute;641          inset: 0;642          z-index: 2;643          pointer-events: none;644          mix-blend-mode: soft-light;645        }646
647        /* Figure stage: a faint isometric floor grid behind the machine. */648        .isometric-bento__art-wrap {649          position: relative;650          display: grid;651          width: calc(100% + 2.2rem);652          height: 9.5rem;653          margin: -0.875rem -1.1rem 0.6rem;654          place-items: center;655        }656        .isometric-bento__art-wrap::before {657          content: "";658          position: absolute;659          inset: 0;660          background-image:661            repeating-linear-gradient(30deg, transparent 0 19px, color-mix(in oklch, var(--color-ink), transparent 93%) 19px 20px),662            repeating-linear-gradient(-30deg, transparent 0 19px, color-mix(in oklch, var(--color-ink), transparent 93%) 19px 20px);663          -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 45%, #000 50%, transparent 100%);664          mask-image: radial-gradient(ellipse 80% 90% at 50% 45%, #000 50%, transparent 100%);665          transition: opacity 300ms ease;666          opacity: 0.8;667        }668        .ib-shadow,669        .ib-scene {670          transform-box: fill-box;671          transform-origin: center;672          transition:673            transform 320ms cubic-bezier(0.23, 1, 0.32, 1),674            opacity 320ms ease;675        }676        .isometric-bento__parallax,677        .isometric-bento__drop {678          position: relative;679          z-index: 1;680          display: block;681          width: 100%;682          height: 100%;683        }684        .isometric-bento__cell--wide .isometric-bento__art-wrap {685          height: 10.5rem;686        }687        /* Tall tiles give the machine whatever height the row leaves. */688        .isometric-bento__cell--tall .isometric-bento__art-wrap,689        .isometric-bento__cell--feature .isometric-bento__art-wrap {690          height: auto;691          flex: 1 1 14rem;692          min-height: 14rem;693        }694        .isometric-bento__art {695          position: relative;696          width: 100%;697          height: 100%;698          overflow: visible;699        }700        .isometric-bento__cell[data-live="false"] * {701          animation-play-state: paused !important;702        }703        /* Tones. Faces take the lightest tone on top, mid on the left, dark on the right. */704        .isometric-bento__art {705          --ib-line: color-mix(in oklch, var(--color-ink), transparent 28%);706          --ib-ink: color-mix(in oklch, var(--color-ink), transparent 50%);707        }708        .ib-body {709          --ib-top: var(--color-paper);710          --ib-left: color-mix(in oklch, var(--color-paper), var(--color-ink) 9%);711          --ib-right: color-mix(in oklch, var(--color-paper), var(--color-ink) 19%);712        }713        .ib-base {714          --ib-top: color-mix(in oklch, var(--color-paper), var(--color-ink) 6%);715          --ib-left: color-mix(in oklch, var(--color-paper), var(--color-ink) 15%);716          --ib-right: color-mix(in oklch, var(--color-paper), var(--color-ink) 26%);717        }718        .ib-accent {719          --ib-top: color-mix(in oklch, var(--color-brand), var(--color-paper) 80%);720          --ib-left: color-mix(in oklch, var(--color-brand), var(--color-paper) 62%);721          --ib-right: color-mix(in oklch, var(--color-brand), var(--color-paper) 44%);722        }723        .ib-top {724          fill: var(--ib-top);725        }726        .ib-left {727          fill: var(--ib-left);728        }729        .ib-right {730          fill: var(--ib-right);731        }732        .ib-face {733          stroke: var(--ib-line);734          stroke-width: 0.55;735          stroke-linejoin: round;736        }737        .ib-dial {738          fill: var(--color-paper);739          stroke: var(--ib-line);740          stroke-width: 0.5;741        }742        .ib-tick {743          fill: none;744          stroke: var(--ib-ink);745          stroke-width: 0.6;746          stroke-linecap: round;747        }748        .ib-needle-line {749          fill: none;750          stroke: var(--color-brand);751          stroke-width: 1.1;752          stroke-linecap: round;753        }754        .ib-pivot {755          fill: var(--color-brand);756        }757        .ib-screws circle {758          fill: var(--color-paper);759          stroke: var(--ib-line);760          stroke-width: 0.45;761        }762        .ib-rail {763          fill: none;764          stroke: var(--ib-ink);765          stroke-width: 0.7;766          stroke-dasharray: 1.2 2.6;767          stroke-linecap: round;768        }769        .ib-dot {770          fill: var(--color-brand);771        }772        .ib-shackle-line {773          fill: none;774          stroke: var(--ib-line);775          stroke-width: 3.2;776          stroke-linecap: round;777          stroke-linejoin: round;778        }779        .ib-keyhole {780          fill: none;781          stroke: var(--ib-ink);782          stroke-width: 1.4;783          stroke-linecap: round;784        }785        .ib-lamp {786          fill: var(--color-brand);787        }788
789        /* Motion. Each keyframe set is short and loops; the rest pose is a real state. */790        .ib-needle {791          transform-origin: 0 0;792          animation: ib-sway 4.8s ease-in-out infinite;793        }794        .ib-pivot,795        .ib-lamp {796          animation: ib-glow 2.4s ease-in-out infinite;797        }798        .ib-bob {799          animation: ib-bob 4.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;800        }801        .ib-dot {802          animation: ib-flow 2.8s linear infinite;803          opacity: 0;804        }805        .ib-shackle {806          animation: ib-latch 4.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;807        }808        .ib-eject {809          animation: ib-eject 4.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;810        }811        .ib-key {812          animation: ib-press 2.6s ease-in-out infinite;813        }814        @keyframes ib-sway {815          0%,816          100% {817            transform: rotate(-4deg);818          }819          50% {820            transform: rotate(4deg);821          }822        }823        @keyframes ib-glow {824          0%,825          100% {826            opacity: 0.45;827          }828          50% {829            opacity: 1;830          }831        }832        @keyframes ib-bob {833          0%,834          100% {835            transform: translateY(0);836          }837          50% {838            transform: translateY(-9px);839          }840        }841        @keyframes ib-flow {842          0% {843            transform: translate(0, 0);844            opacity: 0;845          }846          12% {847            opacity: 1;848          }849          85% {850            opacity: 1;851          }852          100% {853            transform: translate(var(--dx), var(--dy));854            opacity: 0;855          }856        }857        @keyframes ib-latch {858          0%,859          30% {860            transform: translateY(0);861          }862          42%,863          62% {864            transform: translateY(-7px);865          }866          76%,867          100% {868            transform: translateY(0);869          }870        }871        @keyframes ib-eject {872          0%,873          24% {874            transform: translate(0, 0);875          }876          44%,877          66% {878            transform: translate(var(--dx), var(--dy));879          }880          86%,881          100% {882            transform: translate(0, 0);883          }884        }885        @keyframes ib-press {886          0%,887          100% {888            transform: translateY(0);889          }890          8% {891            transform: translateY(2.4px);892          }893          18% {894            transform: translateY(0);895          }896        }897
898        .isometric-bento__topline {899          position: relative;900          z-index: 3;901          display: flex;902          width: 100%;903          align-items: center;904          gap: 0.4rem;905          min-width: 0;906        }907        .isometric-bento__icon {908          display: grid;909          width: 1.5rem;910          height: 1.5rem;911          flex: none;912          place-items: center;913          color: var(--color-ink);914        }915        .isometric-bento__icon svg {916          width: 16px;917          height: 16px;918        }919        .isometric-bento__eyebrow {920          min-width: 0;921          flex: 1;922          overflow: hidden;923          color: var(--color-neutral);924          font-size: 10.5px;925          font-weight: 600;926          letter-spacing: 0.1em;927          text-overflow: ellipsis;928          text-transform: uppercase;929          white-space: nowrap;930        }931        .isometric-bento__arrow {932          margin-left: auto;933          width: 1rem;934          height: 1rem;935          flex: none;936          color: var(--color-neutral);937          transition:938            transform 240ms cubic-bezier(0.23, 1, 0.32, 1),939            color 200ms ease;940        }941        .isometric-bento__check {942          position: absolute;943          right: 0;944          top: 50%;945          margin-top: -0.625rem;946          display: grid;947          width: 1.25rem;948          height: 1.25rem;949          place-items: center;950          border-radius: 999px;951          color: var(--color-paper);952          background: var(--color-ink);953          transform: scale(0);954          transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);955        }956        .isometric-bento__check svg {957          width: 12px;958          height: 12px;959        }960        .isometric-bento__metric,961        .isometric-bento__title,962        .isometric-bento__detail {963          position: relative;964          z-index: 3;965        }966        .isometric-bento__metric {967          margin-top: auto;968          color: var(--color-ink);969          font-family: var(--font-display, inherit);970          font-size: clamp(1.5rem, 3vw, 2rem);971          font-weight: 600;972          letter-spacing: -0.04em;973          font-variant-numeric: tabular-nums;974          line-height: 1.1;975        }976        .isometric-bento__title {977          margin-top: auto;978          color: var(--color-ink);979          font-size: 14px;980          font-weight: 600;981          letter-spacing: -0.02em;982        }983        .isometric-bento__metric + .isometric-bento__title {984          margin-top: 0.3rem;985        }986        .isometric-bento__detail {987          margin-top: 0.3rem;988          color: var(--color-ink-2);989          font-size: 12.5px;990          line-height: 1.45;991          text-wrap: pretty;992        }993        .isometric-bento__item--selected .isometric-bento__content {994          box-shadow:995            0 0 0 2px var(--color-ink),996            0 10px 28px -14px rgba(0, 0, 0, 0.35);997        }998        .isometric-bento__item--selected .isometric-bento__check {999          transform: scale(1);1000        }1001        .isometric-bento__item--selected .isometric-bento__topline {1002          padding-right: 1.6rem;1003        }1004        .isometric-bento__item:focus-visible .isometric-bento__content {1005          box-shadow:1006            0 0 0 2px var(--color-paper),1007            0 0 0 4px var(--color-focus);1008        }1009        @media (hover: hover) and (pointer: fine) {1010          .isometric-bento__item:hover .isometric-bento__content {1011            box-shadow:1012              0 0 0 1px var(--color-rule),1013              0 18px 40px -20px rgba(0, 0, 0, 0.35);1014          }1015          .isometric-bento__item--selected:hover .isometric-bento__content {1016            box-shadow:1017              0 0 0 2px var(--color-ink),1018              0 18px 40px -20px rgba(0, 0, 0, 0.35);1019          }1020          /* The machine lifts off its shadow, which spreads and fades. */1021          .isometric-bento__item:hover .ib-scene {1022            transform: translateY(-6px) scale(1.03);1023          }1024          .isometric-bento__item:hover .ib-shadow {1025            transform: scale(1.15);1026            opacity: 0.65;1027          }1028          .isometric-bento__item:hover .isometric-bento__art-wrap::before {1029            opacity: 1;1030          }1031          .isometric-bento__item:hover .isometric-bento__arrow {1032            transform: translate(2px, -2px);1033            color: var(--color-ink);1034          }1035        }1036        @media (max-width: 640px) {1037          .isometric-bento__grid {1038            grid-template-columns: repeat(2, minmax(0, 1fr));1039            gap: 0.75rem;1040          }1041          .isometric-bento__cell--feature,1042          .isometric-bento__cell--wide {1043            grid-column: span 2;1044          }1045        }1046        @media (max-width: 380px) {1047          .isometric-bento__grid {1048            grid-template-columns: minmax(0, 1fr);1049          }1050          .isometric-bento__cell--feature,1051          .isometric-bento__cell--wide {1052            grid-column: auto;1053          }1054          .isometric-bento__cell--tall,1055          .isometric-bento__cell--feature {1056            grid-row: auto;1057          }1058          .isometric-bento__cell--tall .isometric-bento__art-wrap,1059          .isometric-bento__cell--feature .isometric-bento__art-wrap {1060            flex: none;1061            height: 9.5rem;1062            min-height: 0;1063          }1064        }1065        @media (prefers-reduced-motion: reduce) {1066          .isometric-bento__content,1067          .isometric-bento__art,1068          .isometric-bento__arrow,1069          .ib-shadow,1070          .ib-scene,1071          .isometric-bento__check {1072            transition: none;1073          }1074          .isometric-bento__item:hover .ib-scene,1075          .isometric-bento__item:hover .ib-shadow {1076            transform: none;1077          }1078          .isometric-bento *,1079          .isometric-bento *::before,1080          .isometric-bento *::after {1081            animation: none !important;1082          }1083          .ib-dot {1084            opacity: 0;1085          }1086        }1087      `}</style>1088    </section>1089  );1090}

Adjust import paths according to your folder structure.

Basic Usage

tsx

1import { IsometricBento } from "@/components/ui/isometric-bento";2import { Activity, Layers3 } from "lucide-react";3
4<IsometricBento5  onSelect={(item) => setFocus(item.id)}6  items={[7    { id: "signal", figure: "gauge", size: "feature", eyebrow: "Live system", title: "Signal health", detail: "All services are responding.", metric: "99.98%", icon: <Activity /> },8    { id: "layers", figure: "stack", size: "tall", eyebrow: "Workspace", title: "Layers", detail: "12 active surfaces", metric: "12", icon: <Layers3 /> },9    { id: "docs", figure: "keys", size: "wide", eyebrow: "Guides", title: "Docs", detail: "Start here.", href: "/docs" },10  ]}11/>

Props

Prop	Type	Required	Default	Description
items	IsometricBentoItem[]	Yes	—	Tiles: id, eyebrow, title, detail, and optional icon, metric, size, href and figure.
items[].size	"standard" \| "wide" \| "tall" \| "feature"	No	"standard"	1×1, 2×1, 1×2 or 2×2 on the four-column grid.
items[].figure	"gauge" \| "flow" \| "stack" \| "lock" \| "rack" \| "keys"	No	—	Which machine sits in the tile. Defaults by position.
items[].metric	string	No	—	Large value such as 99.98%, 2.4k or 04. The number counts up; prefixes, suffixes and leading zeros are kept.
items[].href	string	No	—	Makes the tile a link instead of a toggle button.
onSelect	(item) => void	No	—	Called when a button tile is pressed.
className	string	No	—	Classes for the section.

Best Practices

Mix sizes: one feature tile, one tall, two wides and a few standards fills the grid neatly, and dense packing closes any gaps.
Match the machine to the meaning (gauge for health, flow for events, lock for security), so the art carries information, not just decoration.
Keep eyebrows to one word or two short ones; narrow tiles truncate them.
Reduced motion turns off the tilt, entrance, count-up and machine animations; tiles show their final state.