Bento Grid

A grid of tiles that move into place as you scroll through the section.

Dependencies: motion
Size: 229 lines
Controls: 7 controls

example.tsx

1import { BentoGrid } from "@/components/onycx/bento-grid";23export default function Example() {4  return (5    <BentoGrid6      eyebrow={"The Blueprint"}7      heading={"Tactile|Intelligence"}8      background={"#f7f3ed"}9      ink={"#1c1917"}10      accent={"#8e6152"}11      rowHeight={300}12      parallax13    />14  );15}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/bento-grid.json

1 · Dependencies

npm install motion

2 · Copy the source

components/onycx/bento-grid.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the bento-grid.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
items	BentoItem[]	—	{ title, description?, background?, color?, span?, image?, imageAlt?, rotate?, hideBelow?: 'md' \| 'lg', row?, href? }; span is '2x2' \| '1x1' \| '1x2' \| '2x1' (columns x rows).
eyebrow / heading	string	—	Header copy; \| breaks the heading line.
background / ink / accent	string	"#f7f3ed" / "#1c1917" / "#8e6152"	Sand section, stone heading and clay eyebrow.
rowHeight	number	300	Grid auto-row height (px), also used for the single phone column.
parallax	boolean	true	Tile drift and roll, grid spring scale and heading fade.
className	string	—	Merged onto the section.

Behaviour notes

Default tones: stone-900 #1c1917, red #e23e28, yellow #f4c430, cream #f5f1e6 and stone-800 #292524; image tiles sit at 60% opacity and scale to 1.1 over 2000ms on hover.
As in the source, the second tile is hidden below 768px and the fourth below 1024px (hideBelow), and motion runs at every width; reduced motion renders the grid static.
Titles, numbers and the heading use --font-serif-accent (the source used a serif display face).
Default images point to /media/ceramics-scenes/... from the source project; replace them with your own.

Pattern origin

The pottery studio's 'Tactile Intelligence' bento: #f7f3ed section with py 12rem, a .5em-tracked bold eyebrow and an 8rem serif heading that fades in over the first 20% of scroll, a three-column grid of 300px rows and 2.5rem tiles with shadow-xl (2xl on hover), ±50px alternating drift, a roll from rotate × 2 to −rotate × 2 and a grid scale from .8 to 1 over the first half of the scroll on a spring (stiffness 100, damping 30).

#bento#grid#scroll#parallax#editorial