Skip to content
Pinky UI

Spatial Carousel

`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.

Live example

Try the interaction before reading the recipe.

real component · keyboard-safe

Spatial Carousel · depth flattens to reading order

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.

Source: packages/skills/spatial/spatial-carousel.md