spatial
Spatial Carousel
A sequential carousel where adjacent slides recede instead of only translating.
- spatial
- carousel
- depth
- sequential
Quick usage
import { SpatialCarousel } from "@pinky-ui/experiences";
<SpatialCarousel items={slides} loop />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 spatial-carouselPrefer 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 | SpatialCarouselItem[] | — | A short labeled sequence of slide content. |
| className | string | — | Styles the outer composition without changing its behaviour. |
| disabled | boolean | false | Uses the static, readable composition. |
Accessibility
- Previous/next controls and Arrow, Home and End keys are supported.
- Slides and current labels expose carousel semantics and polite announcements.
Performance
- Only transform, scale and opacity express depth.
- No Three.js 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
- Short curated visual sequences
When not to use
- Autoplay or long-form essential content
Skill
Purpose
SpatialCarousel makes the current slide dominant while adjacent slides recede in depth. Use it for a short curated sequence where spatial context is more valuable than dense browsing.
Keep slide count modest, depth under control and manual navigation obvious. Avoid autoplay, essential long-form reading, extreme rotation or duplicating a normal carousel solely for novelty.
Previous/next buttons, Arrow keys, Home/End, slide labels and a polite live current label remain available. Mobile and reduced motion flatten the transforms. Optimize slide media and use PerspectiveGallery instead when users should choose non-sequentially.