Infinite Spatial Canvas
A bounded spatial browsing field for curated projects, notes or media with authored depth planes, clusters and orientation cues—not a whiteboard application.
- spatial
- canvas
- pan
- zoom
- spatial
- depth
- signature
Arrival
near fieldCommons
sharedThreshold
edge studyWork table
deep focusDrag or use the arrow keys to browse the spatial field. Focus an item to inspect it. Home or 0 recenters the field.
Zoom 100% · 4 items
No spatial item selected
Usage
import { InfiniteSpatialCanvas } from "@pinky-ui/layouts";
<InfiniteSpatialCanvas items={projects} bounds={{ left: -360, right: 360, top: -220, bottom: 220 }} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | SpatialCanvasItem[] | — | Curated items with explicit coordinates and labels. |
| className | string | — | Styles the outer layout surface. |
| disabled | boolean | false | Keeps the content and interaction while removing spatial choreography. |
Accessibility
- Canvas items are ordinary focusable articles in DOM order.
- Arrow keys pan, +/- changes zoom and Home/0 resets the view.
- The orientation map, bounds and explicit controls keep spatial browsing from becoming a keyboard trap.
Performance
- Pan uses MotionValues and direct pointer updates instead of React per frame.
- Inertia is bounded and items use transform-only emphasis with a deliberately curated data model.
Reduced motion
Renders the same collection in a readable flat arrangement with no spatial transition.
When to use
- Creative indexes, spatial portfolios and small collections with meaningful relationships.
When not to use
- Collaborative whiteboards, unbounded maps or primary application navigation.
Skill
Purpose
Use for a bounded, curated 2D/2.5D index of projects, images, notes or cards with meaningful spatial relationships. It is a spatial browsing field, not a whiteboard or a collection of absolutely positioned cards.
Use when
- Six to thirty items can be authored with explicit coordinates, bounds and (when useful)
foreground,workingordistantplanes. - Pan and zoom add discovery while every item also works as an ordinary article.
- A
clusterlabel can annotate related areas and feed the small orientation map.
Avoid when
- Collaboration, unbounded coordinates or diagram editing are core requirements.
- Spatial navigation would be the only way to find an item.
Keyboard, touch and focus
Arrow keys pan, +/- changes zoom and Home/0 resets. Touch/pointer drag is an accelerator with a short bounded inertial continuation; content controls remain independently interactive. Visible zoom/reset controls and DOM-order focus remain available, so the canvas cannot become a keyboard trap.
Reduced motion and performance
Reduced motion keeps direct pan, selection and the orientation map but removes inertia, parallax and large settlement. Keep bounds sensible, use MotionValues for pan, transform-only item emphasis and let the host own lazy media.