One shallow perspective plane gives a bento composition depth without independently tilting every cell.
spatial
bento
perspective
2.5d
hover
MaterialMaterial
LightLight
CollectiveCollective
QuietQuiet
Usage
usage
import { PerspectiveBento } from "@pinky-ui/layouts";<PerspectiveBento items={features} columns={3}/>
Props
Prop
Type
Default
Description
items
PerspectiveBentoItem[]
—
Cells with explicit spans and stable content.
className
string
—
Styles the outer layout surface.
disabled
boolean
false
Keeps the content and interaction while removing spatial choreography.
Accessibility
The composition has one reading order and cells do not require spatial orientation.
Focused cells receive the same local emphasis as pointer hover.
Decorative perspective never carries selection state.
Performance
Uses transforms and MotionValues rather than pointer-frame React renders.
The layout does not create a rendering or media dependency for its children.
Reduced motion
Renders the same collection in a readable flat arrangement with no spatial transition.
When to use
Small, curated collections where the arrangement adds useful context.
When not to use
Large scanning-heavy datasets or content that requires spatial navigation to understand.
Skill
Purpose
Use when a bento is one spatial composition and needs a shallow group perspective. The plane moves; cells do not independently perform card tilts.
Use when
Four to twelve feature cells share one visual scene.
A focused cell needs a little hierarchy without a camera effect.
Avoid when
Every tile should be an independent interactive card.
Perspective would make text or controls harder to scan.
Hover and focus
Use a direct CSS-variable pointer response for the group and a small z-lift for the focused cell. Focus parity matters; do not make hover the only way to reveal a cell label.
Reduced motion and touch
Flatten to a normal responsive grid for touch and reduced motion. Keep cell spans explicit and content in logical DOM order.