Curved 3D Grid

A conventional content grid mapped onto a shallow curved plane with restrained local depth.

spatial
3d
grid
spatial
selection

Open plan

Usage

usage

import { Curved3DGrid } from "@pinky-ui/layouts";

<Curved3DGrid items={products} columns={4} curvature={28} />

Props

Prop	Type	Default	Description
items	SpatialCollectionItem[]	—	Recognizable cards or media with labels and optional metadata.
className	string	—	Styles the outer layout surface.
disabled	boolean	false	Keeps the content and interaction while removing spatial choreography.

Accessibility

Items use listbox/option semantics with a single active tab stop.
Arrow, Home and End keys mirror pointer selection.
The flat grid is complete and does not depend on camera orientation.

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 for a recognizable content grid mapped to a shallow CSS 3D curve. It adds hierarchy, not a navigable virtual world.

Use when

Four to twenty products, projects or media items benefit from a shared spatial plane.
The flat grid remains a complete fallback.

Avoid when

Depth is the only way to know which item is selected.
Content is dense, tabular or essential to compare exactly.

Keyboard and touch

Use listbox/option semantics, one active tab stop, Arrow/Home/End and explicit previous/next controls. Touch receives a flat two-column or one-column arrangement.

Reduced motion and performance

Remove transforms under reduced motion. CSS transforms and a bounded item count keep this WebGL-free; never add a camera loop for a normal grid.

Open this skill on its own page