BentoTile

One tile of a bento: a title and one sentence at page size, and below them a picture that fills the rest and is clipped by the tile's edges. The landing's Meet Okami is six of them.

In a grid

Every tile shares one frame — porcelain, radius, padding, copy on top — so the variety lives in the pictures. One tile leads: the full width, tall for more room.

Conversations

Every channel in one inbox. Step in anytime, with full context.

Calendar

Services, buffers, hours — Okami only offers what's genuinely free.

Clients

A living profile for every client, built from the conversations.

import { BentoTile } from "@/components/shared/bento-tile";

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
  <BentoTile title="Conversations" tall picture={<ConversationsStory />} className="md:col-span-2 lg:col-span-3">
    Every channel in one inbox. Step in anytime, with full context.
  </BentoTile>
  <BentoTile title="Calendar" picture={<CalendarStory />}>
    Services, buffers, hours — Okami only offers what's genuinely free.
  </BentoTile>
</div>

API reference

Prop	Type	Default	Description
title	ReactNode	—	A noun, the part of the product. text-xl.
children	ReactNode	—	One sentence, text-base, in a quieter ink.
picture	ReactNode	—	What the tile shows, laid out absolutely to fill a room at least 288px tall (384px tall). Hidden from assistive tech, and inert.
ground	"porcelain" \| "mix"	"porcelain"	The tile's surface: porcelain, or the studio's mix as a pale wash (bg-wash-mix-faint, a third lighter than a letter tile's) that eases as the mix changes — for a tile whose story is the studio's colours.
tall	boolean	false	The lead tile: a taller picture (most on phones), and a wider line.
wide	boolean	false	Across two columns: its line runs wider, on one row.
level	2 \| 3 \| 4	3	The title's heading level.
className	string	—	Placement in the grid: md:col-span-2, lg:col-span-3.

Guidelines

A bento is one picture: one lead tile, and neighbours of different kinds — a screen beside a number, dense beside calm.
The lead tile may loop while it's in view; the others make one move as they arrive. Never several loops at once.
Say each thing once: no string, avatar or chrome repeats from tile to tile.