Spatial Card Tunnel
A finite Z-axis collection that advances by explicit controls rather than an uncontrolled camera ride.
- spatial
- tunnel
- z-axis
- cards
- experimental
Open plan01
Open plan
01 / 04Shared studio02
Shared studio
02 / 04Quiet room03
Quiet room
03 / 04Long table04
Long table
04 / 04Open plan
Usage
usage
import { SpatialCardTunnel } from "@pinky-ui/layouts";
<SpatialCardTunnel items={documents} spacing={110} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | SpatialCollectionItem[] | — | Small ordered cards with stable labels and content. |
| className | string | — | Styles the outer layout surface. |
| disabled | boolean | false | Keeps the content and interaction while removing spatial choreography. |
Accessibility
- Every card remains a list item in DOM order; the selected card has the roving tab stop.
- Arrow, Home and End keys plus buttons move through the tunnel.
- Depth and opacity never become the only way to identify a card.
Performance
- The collection is intentionally bounded and uses transform-only staging.
- No camera loop, canvas or cloned DOM tree is created.
Reduced motion
Renders the same collection in a readable flat arrangement with no spatial transition.
When to use
- A short sequence of related product surfaces or documents.
When not to use
- Comparison grids, large feeds or content with no meaningful sequence.
Skill
Purpose
Use for a finite sequence of related cards that advances through restrained z-depth with explicit navigation.
Use when
- Three to ten documents, product surfaces or steps have a meaningful order.
- A tunnel communicates progression better than a flat list.
Avoid when
- The content is a comparison grid or a long feed.
- Users would need a camera gesture to reach information.
Interaction and accessibility
Keep all cards in DOM order, use a roving active item and expose Arrow/Home/End plus Previous/Next. Metadata must not depend on opacity or depth.
Reduced motion and performance
Flatten to a normal stack immediately. The collection is bounded and transform-only; avoid cloned cards, camera loops and WebGL.