Skip to content
Pinky UI

Stack → Spatial

A familiar stack distributes into authored X/Y/Z planes while preserving each item identity.

  • spatial
  • stack
  • spatial
  • morph
  • 2.5d
4 items · stack
  • Open plan01

    Open plan

    01 / 04
  • Shared studio02

    Shared studio

    02 / 04
  • Quiet room03

    Quiet room

    03 / 04
  • Long table04

    Long table

    04 / 04

Usage

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

<StackSpatial items={projects} expanded={expanded} onExpandedChange={setExpanded} />

Props

PropTypeDefaultDescription
itemsSpatialCollectionItem[]—Stable keyed items that can be read as a stack or spatial spread.
classNamestring—Styles the outer layout surface.
disabledbooleanfalseKeeps the content and interaction while removing spatial choreography.

Accessibility

  • One native toggle exposes the stack/spatial state with aria-pressed.
  • The same keyed items remain rendered in both modes.
  • Spatial arrangement is decorative and never required to reach content.

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 familiar stack should open into an authored X/Y/Z arrangement without changing the collection identity.

Use when

  • An album, project set or document group benefits from one reveal of relationships.
  • The collapsed state is already useful on its own.

Avoid when

  • The collection needs immediate comparison or contains many items.
  • The expansion would explode into an uncontrolled decorative animation.

Interaction

Use one pressed toggle. The same keyed items remain present; focus and labels survive the transition. Spatial hover may lift one item, but never hides its neighbours.

Mobile and reduced motion

Flatten the expanded state into a responsive grid and switch immediately under reduced motion. CSS transforms are enough; do not add a canvas.

Open this skill on its own page