Skip to content
Pinky UI

Stack → Spatial

Use when a familiar stack should open into an authored X/Y/Z arrangement without changing the collection identity.

Live example

Try the interaction before reading the recipe.

real component · keyboard-safe

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

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.

Source: packages/skills/layouts/stack-spatial.md