Cylinder Gallery
A finite ring of media that rotates by drag, wheel or controls and settles on a clear active item.
- spatial
- cylinder
- 3d
- gallery
- snap
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 { CylinderGallery } from "@pinky-ui/layouts";
<CylinderGallery items={projects} radius={170} snap />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | SpatialCollectionItem[] | — | Short media sequence with a recognizable active item. |
| className | string | — | Styles the outer layout surface. |
| disabled | boolean | false | Keeps the content and interaction while removing spatial choreography. |
Accessibility
- Active state is announced and reachable through Arrow/Home/End via the focused item.
- Wheel and drag are accelerators; buttons provide the complete path.
- The flat mobile fallback keeps all media and labels visible.
Performance
- No infinite rotation loop or WebGL canvas.
- A finite ring caps simultaneous 3D layers.
Reduced motion
Renders the same collection in a readable flat arrangement with no spatial transition.
When to use
- Small collections where a ring makes sequence and adjacency legible.
When not to use
- Infinite spinning showcases or large scanning lists.
Skill
Purpose
Use for a finite ring of related media where adjacency and rotation are meaningful.
Use when
- Three to ten items form a clear sequence or collection.
- A visible active item and explicit snap controls are desirable.
Avoid when
- Infinite rotation or autoplay would distract from the content.
- A normal carousel communicates the sequence more clearly.
Interaction and accessibility
Buttons, focus and keyboard navigation are complete paths; wheel and touch drag are accelerators. The active label is announced and the flat fallback keeps all items reachable.
Reduced motion and performance
Remove ring transforms and settle into a list/carousel. Keep the ring finite and CSS-based; do not introduce WebGL for a handful of cards.