Skip to content
Pinky UI

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 / 04
Shared studio02

Shared studio

02 / 04
Quiet room03

Quiet room

03 / 04
Long table04

Long table

04 / 04

Open 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