Helix Gallery
Use for a very short art-directed sequence whose media can be arranged along a shallow helix.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Open plan01
Open plan
01 / 04Shared studio02
Shared studio
02 / 04Quiet room03
Quiet room
03 / 04Long table04
Long table
04 / 04Open plan
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.
Source: packages/skills/layouts/helix-gallery.md