Helix Gallery
A finite media sequence arranged along a shallow helix, never requiring users to navigate a 3D scene.
- spatial
- helix
- 3d
- gallery
- experimental
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 { HelixGallery } from "@pinky-ui/layouts";
<HelixGallery items={projects} radius={150} pitch={1.4} spacing={0.8} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | SpatialCollectionItem[] | — | Short labeled media items arranged around the selected item. |
| className | string | — | Styles the outer layout surface. |
| disabled | boolean | false | Keeps the content and interaction while removing spatial choreography. |
Accessibility
- The selected item is focusable and previous/next buttons are always present.
- Metadata is rendered in every item; depth is visual context only.
- Reduced motion removes rotation and opacity staging.
Performance
- CSS transforms avoid a WebGL context and use a bounded item count.
- Only supplied media loads; the layout does not clone frames.
Reduced motion
Renders the same collection in a readable flat arrangement with no spatial transition.
When to use
- A short art-directed collection where depth is a meaningful browsing metaphor.
When not to use
- Large catalogs, essential documentation or repeated page sections.
Skill
Purpose
Use for a very short art-directed sequence whose media can be arranged along a shallow helix.
Use when
- A portfolio or campaign has three to nine recognizable media items.
- The selected item can be understood without exploring the whole 3D scene.
Avoid when
- Users need to scan dozens of records or compare values.
- The helix is merely decorative spinning.
Interaction
Selection, focus and previous/next controls move through the finite sequence. Touch swipe is optional acceleration; metadata stays attached to every item.
Reduced motion and performance
Flatten to a linear stack and remove opacity staging under reduced motion. Use CSS 3D transforms, do not preload a giant image sequence, and keep the item cap low.