Helix Gallery

Photos spiraling out from a dense core

helix-gallery-tw

Customize

Background

Arms

Per Turn

Pitch

7.0°

Center Density

1.30

Center Fade

0.50

Card Size

0.28

Roundness

0.22

Tilt

1.00

Rotation

0°

Speed

0.35

Center X

0.50

Center Y

0.50

Shadow

0.50

Open On ClickCaptionsDraggableWheelPause On HoverInteractivePaused

Props

Name	Type	Default	Description
`items`	{ src: string; alt: string; title?: string; subtitle?: string; href?: string }[]	`studio portrait collection`	Photos placed along the spiral in order, repeating as it flows. Images must allow cross-origin loading. Title and subtitle caption an opened photo; href makes opening it navigate.
`arms`	number	`1`	Number of spiral arms, from 1 to 4. Several arms with tight spacing read as a galaxy.
`perTurn`	number	`18`	Photos per turn, measured halfway between the centre and the nearest edge. Higher values pack the spiral tighter.
`pitch`	number	`7`	How quickly the spiral opens, as the angle in degrees between the spiral and a circle. Low values wind into many turns, high values sweep out in one.
`centerDensity`	number	`1.3`	How tightly photos pack as they near the centre, from 0 to 2. 0 spaces them evenly and leaves the centre open, 1 keeps the spiral the same at every scale, and higher values crowd the centre into a dense core.
`centerFade`	number	`0.5`	How far out from the centre photos fade into the background, from 0 (no fade) to 1 (fading across the inner half of the spiral). Faded photos cannot be hovered or opened.
`cardSize`	number	`0.28`	Size of each photo as a fraction of its distance from the centre, so photos grow as they travel out.
`roundness`	number	`0.22`	Corner rounding, from 0 (square) to 1 (circle).
`tilt`	number	`1`	How far each photo turns to face the centre. 0 keeps every photo upright, 1 points every photo at the centre like petals.
`rotation`	number	`0`	Turns the whole spiral, in degrees. Useful for placing the band of a tight spiral in the frame.
`direction`	"counterclockwise" \| "clockwise"	`"counterclockwise"`	Which way the spiral unwinds as photos travel outward.
`speed`	number	`0.35`	Photos per second that flow out from the centre. Negative values draw them inward.
`centerX`	number	`0.5`	Horizontal position of the spiral's centre, as a fraction of the width.
`centerY`	number	`0.5`	Vertical position of the spiral's centre, as a fraction of the height.
`shadow`	number	`0.5`	Strength of the soft shadow under each photo. It separates overlapping photos and shows on light backgrounds.
`backgroundColor`	string	`"transparent"`	Background of the component. Captions adapt to it.
`openOnClick`	boolean	`true`	Clicking a photo brings it upright to the centre at full size. Click again, scroll or press Escape to put it back.
`captions`	boolean	`true`	Show the title and subtitle of an opened photo.
`draggable`	boolean	`true`	Drag around the centre to wind the spiral like a dial. Releasing keeps a little momentum.
`wheel`	boolean	`true`	Scrolling over the gallery moves the photos along the spiral, one photo per notch.
`pauseOnHover`	boolean	`true`	Hovering a photo stops the flow and lifts that photo slightly.
`interactive`	boolean	`true`	Let the pointer and keyboard drive the gallery. The arrow keys move one photo at a time and Enter opens the highlighted photo.
`paused`	boolean	`false`	Stops the automatic flow. Scrolling and dragging still work. Reduced-motion users never get the automatic flow.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`ariaLabel`	string	`"Spiral gallery…"`	Accessible description of the gallery and how to use it.
`onOpen`	(item, index) => void	`—`	Called when a photo is opened, with null and -1 when it is put back.
`ref`	{ step, open, close }	`—`	Imperative controls: move the spiral by a number of photos, open an item, or close it.
`children`	ReactNode	`—`	Content centred over the spiral, such as a headline. It fades out while a photo is open.
`className`	string	`—`	Classes for the root element. It fills its parent, with a 420px minimum height.
`style`	CSSProperties	`—`	Inline styles for the root element.

items{ src: string; alt: string; title?: string; subtitle?: string; href?: string }[]

Photos placed along the spiral in order, repeating as it flows. Images must allow cross-origin loading. Title and subtitle caption an opened photo; href makes opening it navigate.

Defaultstudio portrait collection

armsnumber

Number of spiral arms, from 1 to 4. Several arms with tight spacing read as a galaxy.

Default1

perTurnnumber

Photos per turn, measured halfway between the centre and the nearest edge. Higher values pack the spiral tighter.

Default18

pitchnumber

How quickly the spiral opens, as the angle in degrees between the spiral and a circle. Low values wind into many turns, high values sweep out in one.

Default7

centerDensitynumber

How tightly photos pack as they near the centre, from 0 to 2. 0 spaces them evenly and leaves the centre open, 1 keeps the spiral the same at every scale, and higher values crowd the centre into a dense core.

Default1.3

centerFadenumber

How far out from the centre photos fade into the background, from 0 (no fade) to 1 (fading across the inner half of the spiral). Faded photos cannot be hovered or opened.

Default0.5

cardSizenumber

Size of each photo as a fraction of its distance from the centre, so photos grow as they travel out.

Default0.28

roundnessnumber

Corner rounding, from 0 (square) to 1 (circle).

Default0.22

tiltnumber

How far each photo turns to face the centre. 0 keeps every photo upright, 1 points every photo at the centre like petals.

Default1

rotationnumber

Turns the whole spiral, in degrees. Useful for placing the band of a tight spiral in the frame.

Default0

direction"counterclockwise" | "clockwise"

Which way the spiral unwinds as photos travel outward.

Default"counterclockwise"

speednumber

Photos per second that flow out from the centre. Negative values draw them inward.

Default0.35

centerXnumber

Horizontal position of the spiral's centre, as a fraction of the width.

Default0.5

centerYnumber

Vertical position of the spiral's centre, as a fraction of the height.

Default0.5

shadownumber

Strength of the soft shadow under each photo. It separates overlapping photos and shows on light backgrounds.

Default0.5

backgroundColorstring

Background of the component. Captions adapt to it.

Default"transparent"

openOnClickboolean

Clicking a photo brings it upright to the centre at full size. Click again, scroll or press Escape to put it back.

Defaulttrue

captionsboolean

Show the title and subtitle of an opened photo.

Defaulttrue

draggableboolean

Drag around the centre to wind the spiral like a dial. Releasing keeps a little momentum.

Defaulttrue

wheelboolean

Scrolling over the gallery moves the photos along the spiral, one photo per notch.

Defaulttrue

pauseOnHoverboolean

Hovering a photo stops the flow and lifts that photo slightly.

Defaulttrue

interactiveboolean

Let the pointer and keyboard drive the gallery. The arrow keys move one photo at a time and Enter opens the highlighted photo.

Defaulttrue

pausedboolean

Stops the automatic flow. Scrolling and dragging still work. Reduced-motion users never get the automatic flow.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

ariaLabelstring

Accessible description of the gallery and how to use it.

Default"Spiral gallery…"

onOpen(item, index) => void

Called when a photo is opened, with null and -1 when it is put back.

Default—

ref{ step, open, close }

Imperative controls: move the spiral by a number of photos, open an item, or close it.

Default—

childrenReactNode

Content centred over the spiral, such as a headline. It fades out while a photo is open.

Default—

classNamestring

Classes for the root element. It fills its parent, with a 420px minimum height.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

items

{ src: string; alt: string; title?: string; subtitle?: string; href?: string }[]

studio portrait collection

Photos placed along the spiral in order, repeating as it flows. Images must allow cross-origin loading. Title and subtitle caption an opened photo; href makes opening it navigate.

arms

number

1

Number of spiral arms, from 1 to 4. Several arms with tight spacing read as a galaxy.

perTurn

number

18

Photos per turn, measured halfway between the centre and the nearest edge. Higher values pack the spiral tighter.

pitch

number

7

How quickly the spiral opens, as the angle in degrees between the spiral and a circle. Low values wind into many turns, high values sweep out in one.

centerDensity

number

1.3

centerFade

number

0.5

How far out from the centre photos fade into the background, from 0 (no fade) to 1 (fading across the inner half of the spiral). Faded photos cannot be hovered or opened.

cardSize

number

0.28

Size of each photo as a fraction of its distance from the centre, so photos grow as they travel out.

roundness

number

0.22

Corner rounding, from 0 (square) to 1 (circle).

tilt

number

1

How far each photo turns to face the centre. 0 keeps every photo upright, 1 points every photo at the centre like petals.

rotation

number

0

Turns the whole spiral, in degrees. Useful for placing the band of a tight spiral in the frame.

direction

"counterclockwise" | "clockwise"

"counterclockwise"

Which way the spiral unwinds as photos travel outward.

speed

number

0.35

Photos per second that flow out from the centre. Negative values draw them inward.

centerX

number

0.5

Horizontal position of the spiral's centre, as a fraction of the width.

centerY

number

0.5

Vertical position of the spiral's centre, as a fraction of the height.

shadow

number

0.5

Strength of the soft shadow under each photo. It separates overlapping photos and shows on light backgrounds.

backgroundColor

string

"transparent"

Background of the component. Captions adapt to it.

openOnClick

boolean

true

Clicking a photo brings it upright to the centre at full size. Click again, scroll or press Escape to put it back.

captions

boolean

true

Show the title and subtitle of an opened photo.

draggable

boolean

true

Drag around the centre to wind the spiral like a dial. Releasing keeps a little momentum.

wheel

boolean

true

Scrolling over the gallery moves the photos along the spiral, one photo per notch.

pauseOnHover

boolean

true

Hovering a photo stops the flow and lifts that photo slightly.

interactive

boolean

true

Let the pointer and keyboard drive the gallery. The arrow keys move one photo at a time and Enter opens the highlighted photo.

paused

boolean

false

Stops the automatic flow. Scrolling and dragging still work. Reduced-motion users never get the automatic flow.

dpr

number

2

Maximum device pixel ratio for the canvas.

ariaLabel

string

"Spiral gallery…"

Accessible description of the gallery and how to use it.

onOpen

(item, index) => void

—

Called when a photo is opened, with null and -1 when it is put back.

ref

{ step, open, close }

—

Imperative controls: move the spiral by a number of photos, open an item, or close it.

children

ReactNode

—

Content centred over the spiral, such as a headline. It fades out while a photo is open.

className

string

—

Classes for the root element. It fills its parent, with a 420px minimum height.

style

CSSProperties

—

Inline styles for the root element.