Bento Case Studies

Turn customer stories into an uneven bento box: a 2×2 featured tile carries a full-bleed portrait or scene (a gradient with an abstract silhouette when no photo is given) and a long quote, mixed with huge-number metric tiles, short quotes with small avatars, and a partner tile holding four text wordmarks. The grid is 4 columns wide on large screens and 2 below md, and smaller tiles back-fill gaps automatically. When the section enters the viewport, tiles scale in one after another by their actual grid position (row-major) and metric tiles then count up from 0; any tile with href is a whole-tile link that zooms its image slightly and reveals "Read the case →" on hover or keyboard focus.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<BentoCaseStudies/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/bento-case-studies.en.json

Usage

import { BentoCaseStudies } from "@/components/ui/bento-case-studies";

<BentoCaseStudies
  eyebrow="客戶案例"
  title="他們用成果說話"
  items={[
    {
      kind: "feature",
      quote: "現在行銷自己就能把活動頁拼出來，上線速度快了一倍。",
      name: "林語晴",
      role: "品牌行銷經理",
      company: "青嶼咖啡",
      highlight: "上線速度快了一倍",
      href: "/cases/qingyu",
    },
    { kind: "metric", value: "+38%", label: "會員回購率", source: "青嶼咖啡" },
    { kind: "quote", quote: "回報表單終於不用再教第二次。", name: "陳柏翰", company: "北辰物流" },
    { kind: "logo", logos: ["青嶼咖啡", "北辰物流", "拾光學院", "好日選物"] },
  ]}
/>

Props

BentoCaseStudiesTile

Four tile types keyed by kind. Every tile accepts href (makes the whole tile a link) and span ("1x1", "2x1" or "2x2"; defaults to 2x2 for feature and 1x1 for the rest).

BentoCaseStudiesItem

How it works

• The grid uses grid-flow-row-dense: 4 columns on wide screens, 2 below md, rows at least 10.5rem, 12px gaps and 20px corners; non-featured tiles rotate between neutral-50, neutral-100 and a 10% accent tint.
• Entry order is not the array index: each tile's actual position is measured and sorted row-major, because dense back-filling and the narrow-screen column change both affect which tile is top-left. Each tile goes from scale 0.96 and y 12px to rest while fading in.
• Timing is exposed as CSS variables: --wb-bento-case-studies-stagger (default 70ms) and --wb-bento-case-studies-duration (default 500ms). Override them on a wrapper or globally; passing the stagger/duration props writes those variables directly.
• The accent only flows through --wb-bento-case-studies-accent (default #0d9488, dark #2dd4bf) for the eyebrow, highlighted fragments, accent tiles and the focus ring.
• Metric tiles count from 0 to the final value (1000ms) after appearing, keeping the original prefix, suffix, decimals and grouping; the first render already outputs the final value, so SSR and no-JS are correct.
• Hovering or focusing a featured or quote tile zooms its image (or avatar) to hoverZoom over 600ms ease-out, and linked tiles reveal "Read the case →" at the bottom; wordmarks in the partner tile turn from neutral-400 to neutral-900 on hover.
• Avatars use no photo URLs: initials (last two characters for Chinese names, first letters for Latin names) on a two-tone gradient whose hue follows the golden angle by index — deterministic and SSR-consistent. Pass photoSrc/avatarSrc for real images.

Accessibility

• The root is a <section aria-labelledby> pointing at the title; without a title the eyebrow becomes its aria-label
• Tiles with href are whole-tile <a> elements whose aria-label includes the read label, author and company; they are reachable with Tab and show a focus-visible ring, while the revealed link text is visual only (aria-hidden)
• Tiles without a link are <figure> elements, with quotes rendered as blockquote and figcaption
• The counting number in metric tiles is hidden from assistive tech, and an sr-only copy provides the final value, so screen readers never read out the count
• Partner tiles are role="list" with each wordmark as role="listitem"
• When the user turns on reduce motion, entries become a 150ms fade (no scale or offset), numbers show their final value without counting, and hover does not zoom images