Magic Bento

A bento grid with a pointer spotlight, proximity border glow, and tilt.

pointerhoverlayout

Analytics

Realtime insight

Automation

Flows that run themselves

Security

SOC 2 by default

Edge Speed

Global CDN

Insights

AI summaries

Customize

Columns4

Row height132px

Gap14px

Corner radius18px

Glow color

Glow reach320px

Spotlight

Border glow

Pointer tilt6°

Prop	Type	Default	Description
`items`	`MagicBentoItem[]`	`built-in set`	Cards ({ title, subtitle?, c?, r? }) where c/r are column/row spans.
`columns`	`number`	`4`	Number of columns.
`rowHeight`	`number`	`132`	Height of one grid row in pixels.
`gap`	`number`	`14`	Gap between cards in pixels.
`radius`	`number`	`18`	Card corner radius in pixels.
`color`	`string`	`"#8b5cf6"`	Glow / spotlight color (hex).
`glowRadius`	`number`	`320`	Pointer proximity (px) over which a card's glow fades in.
`spotlight`	`boolean`	`true`	Show the radial spotlight that follows the pointer inside each card.
`borderGlow`	`boolean`	`true`	Light each card's border as the pointer nears it.
`tilt`	`number`	`6`	Max pointer tilt in degrees (0 disables).
`label`	`string`	`"Magic bento grid"`	Accessible name for the grid.