spatial
Perspective Gallery
A selectable gallery with shallow, readable spatial depth.
- spatial
- gallery
- perspective
- media
Quick usage
import { PerspectiveGallery } from "@pinky-ui/experiences";
<PerspectiveGallery items={projects} onActiveChange={setProject} />Presets
Default
The restrained Pinky production default.
Default behaviour
Quiet
A flatter or lower-intensity treatment for dense pages.
disabled={true}
Install
Add @pinky-ui/experiences as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/experiencespnpm add @pinky-ui/experiencesyarn add @pinky-ui/experiencesnpx pinky-ui add perspective-galleryPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items | PerspectiveGalleryItem[] | — | A short selectable media collection. |
| className | string | — | Styles the outer composition without changing its behaviour. |
| disabled | boolean | false | Uses the static, readable composition. |
Accessibility
- Exposes listbox and option semantics with selected state.
- Arrow, Home and End keys change selection without pointer input.
Performance
- CSS transforms provide depth without a 3D runtime.
- Mobile and reduced motion flatten the scene.
Reduced motion
Spatial or continuous movement is removed while content, selection and controls remain available.
When to use
- Curated visual collections
When not to use
- Large scanning-heavy galleries
Skill
Purpose
PerspectiveGallery gives a small media collection restrained z-depth while keeping explicit selection. Use it for featured work, editorial covers and visually led product stories.
Keep rotation in single digits and show enough adjacent context to explain navigation. Avoid large datasets, body-copy cards, extreme perspective or using hover as the only selection method.
The gallery exposes listbox/option semantics with Arrow, Home and End keys. Mobile and reduced motion flatten the cards without changing order. Optimize images and keep shadows/blur light; use a standard gallery for scanning-heavy tasks.