Constellation Gallery

Photo cards that flow between rings, spirals and globes

constellation-gallery-tw

Customize

Accent

Background

Count

Rings

Interval

6.0s

Spin

1.00

Card Size

0px

Clearance

0.36

Radius

0.24

Depth

0.00

Hover Scale

1.20×

Shadow

0.60

Seed

AutoplayOpen On ClickCaptionsInteractiveDraggablePause On HoverPaused

Props

Name	Type	Default	Description
`items`	{ src: string; alt: string; title?: string; subtitle?: string }[]	`studio portrait collection`	Images to place on the cards. They repeat when there are more cards than items. Images must allow cross-origin loading. Title and subtitle are shown as a caption when a card is opened.
`count`	number	`56`	Number of cards, up to 160.
`formations`	("orbits" \| "spiral" \| "sphere" \| "field")[]	`["orbits", "spiral", "sphere", "field"]`	Formations to move through, in order: counter-rotating rings, a golden-angle spiral, a turning globe and a drifting field. Pass one to stay on it.
`interval`	number	`6`	Seconds spent in each formation before moving to the next.
`autoplay`	boolean	`true`	Move through the formations on a timer. The arrow keys and the ref still work when it is off.
`transition`	"gather" \| "swirl" \| "direct"	`"gather"`	How cards travel between formations: gathering into a cluster and bursting out, curving around the centre, or flying straight.
`rings`	number	`3`	Number of rings in the orbits formation.
`cardSize`	number	`0`	Base card size in pixels. 0 sizes the cards from the container.
`clearance`	number	`0.36`	Share of the container kept empty in the middle of the orbits, spiral and field formations, for a headline or call to action.
`spin`	number	`1`	Rotation and drift speed. Negative values reverse it.
`shape`	"auto" \| "square" \| "rounded" \| "circle"	`"auto"`	Card shape. Auto uses rounded cards in the orbits and spiral and circles in the globe and field, morphing between them.
`radius`	number	`0.24`	Corner rounding of rounded cards, from 0 to 1.
`depth`	number	`0`	How far the whole group tilts toward the pointer. 0 keeps it flat.
`hoverScale`	number	`1.2`	Scale of the card under the pointer. It keeps its angle and holds still so it can be clicked.
`shadow`	number	`0.6`	Opacity of the soft shadow beneath each card.
`accentColor`	string	`"#B19EEF"`	Colour of the thin ring around the card under the pointer.
`backgroundColor`	string	`"transparent"`	Background of the component. Transparent shows the page behind.
`openOnClick`	boolean	`true`	Clicking a card enlarges it in the centre. Click again or press Escape to put it back.
`captions`	boolean	`true`	Show the title and subtitle of an opened card.
`interactive`	boolean	`true`	Enable the pointer lens, tilt, hover and clicking.
`draggable`	boolean	`true`	Dragging spins the rings, spiral and globe or pans the field, with inertia.
`pauseOnHover`	boolean	`true`	Stop the rotation and hold the current formation while the pointer is on a card.
`seed`	number	`0`	Changes the field layout and the small tilts of the cards.
`paused`	boolean	`false`	Stops rotation and the formation timer. Reduced-motion users always get this.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`ariaLabel`	string	`"Photo constellation…"`	Accessible description of the gallery and how to use it.
`onFormationChange`	(formation, index) => void	`—`	Called when the group starts moving to a new formation.
`onOpen`	(item, index) => void	`—`	Called when a card is opened, with null and -1 when it is put back.
`ref`	{ next, previous, setFormation, close }	`—`	Imperative controls for stepping through formations and closing an opened card.
`children`	ReactNode	`—`	Content centred over the group, such as a headline. It fades out while a card 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 }[]

Images to place on the cards. They repeat when there are more cards than items. Images must allow cross-origin loading. Title and subtitle are shown as a caption when a card is opened.

Defaultstudio portrait collection

countnumber

Number of cards, up to 160.

Default56

formations("orbits" | "spiral" | "sphere" | "field")[]

Formations to move through, in order: counter-rotating rings, a golden-angle spiral, a turning globe and a drifting field. Pass one to stay on it.

Default["orbits", "spiral", "sphere", "field"]

intervalnumber

Seconds spent in each formation before moving to the next.

Default6

autoplayboolean

Move through the formations on a timer. The arrow keys and the ref still work when it is off.

Defaulttrue

transition"gather" | "swirl" | "direct"

How cards travel between formations: gathering into a cluster and bursting out, curving around the centre, or flying straight.

Default"gather"

ringsnumber

Number of rings in the orbits formation.

Default3

cardSizenumber

Base card size in pixels. 0 sizes the cards from the container.

Default0

clearancenumber

Share of the container kept empty in the middle of the orbits, spiral and field formations, for a headline or call to action.

Default0.36

spinnumber

Rotation and drift speed. Negative values reverse it.

Default1

shape"auto" | "square" | "rounded" | "circle"

Card shape. Auto uses rounded cards in the orbits and spiral and circles in the globe and field, morphing between them.

Default"auto"

radiusnumber

Corner rounding of rounded cards, from 0 to 1.

Default0.24

depthnumber

How far the whole group tilts toward the pointer. 0 keeps it flat.

Default0

hoverScalenumber

Scale of the card under the pointer. It keeps its angle and holds still so it can be clicked.

Default1.2

shadownumber

Opacity of the soft shadow beneath each card.

Default0.6

accentColorstring

Colour of the thin ring around the card under the pointer.

Default"#B19EEF"

backgroundColorstring

Background of the component. Transparent shows the page behind.

Default"transparent"

openOnClickboolean

Clicking a card enlarges it in the centre. Click again or press Escape to put it back.

Defaulttrue

captionsboolean

Show the title and subtitle of an opened card.

Defaulttrue

interactiveboolean

Enable the pointer lens, tilt, hover and clicking.

Defaulttrue

draggableboolean

Dragging spins the rings, spiral and globe or pans the field, with inertia.

Defaulttrue

pauseOnHoverboolean

Stop the rotation and hold the current formation while the pointer is on a card.

Defaulttrue

seednumber

Changes the field layout and the small tilts of the cards.

Default0

pausedboolean

Stops rotation and the formation timer. Reduced-motion users always get this.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

ariaLabelstring

Accessible description of the gallery and how to use it.

Default"Photo constellation…"

onFormationChange(formation, index) => void

Called when the group starts moving to a new formation.

Default—

onOpen(item, index) => void

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

Default—

ref{ next, previous, setFormation, close }

Imperative controls for stepping through formations and closing an opened card.

Default—

childrenReactNode

Content centred over the group, such as a headline. It fades out while a card 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 }[]

studio portrait collection

Images to place on the cards. They repeat when there are more cards than items. Images must allow cross-origin loading. Title and subtitle are shown as a caption when a card is opened.

count

number

56

Number of cards, up to 160.

formations

("orbits" | "spiral" | "sphere" | "field")[]

["orbits", "spiral", "sphere", "field"]

Formations to move through, in order: counter-rotating rings, a golden-angle spiral, a turning globe and a drifting field. Pass one to stay on it.

interval

number

6

Seconds spent in each formation before moving to the next.

autoplay

boolean

true

Move through the formations on a timer. The arrow keys and the ref still work when it is off.

transition

"gather" | "swirl" | "direct"

"gather"

How cards travel between formations: gathering into a cluster and bursting out, curving around the centre, or flying straight.

rings

number

3

Number of rings in the orbits formation.

cardSize

number

0

Base card size in pixels. 0 sizes the cards from the container.

clearance

number

0.36

Share of the container kept empty in the middle of the orbits, spiral and field formations, for a headline or call to action.

spin

number

1

Rotation and drift speed. Negative values reverse it.

shape

"auto" | "square" | "rounded" | "circle"

"auto"

Card shape. Auto uses rounded cards in the orbits and spiral and circles in the globe and field, morphing between them.

radius

number

0.24

Corner rounding of rounded cards, from 0 to 1.

depth

number

0

How far the whole group tilts toward the pointer. 0 keeps it flat.

hoverScale

number

1.2

Scale of the card under the pointer. It keeps its angle and holds still so it can be clicked.

shadow

number

0.6

Opacity of the soft shadow beneath each card.

accentColor

string

"#B19EEF"

Colour of the thin ring around the card under the pointer.

backgroundColor

string

"transparent"

Background of the component. Transparent shows the page behind.

openOnClick

boolean

true

Clicking a card enlarges it in the centre. Click again or press Escape to put it back.

captions

boolean

true

Show the title and subtitle of an opened card.

interactive

boolean

true

Enable the pointer lens, tilt, hover and clicking.

draggable

boolean

true

Dragging spins the rings, spiral and globe or pans the field, with inertia.

pauseOnHover

boolean

true

Stop the rotation and hold the current formation while the pointer is on a card.

seed

number

0

Changes the field layout and the small tilts of the cards.

paused

boolean

false

Stops rotation and the formation timer. Reduced-motion users always get this.

dpr

number

2

Maximum device pixel ratio for the canvas.

ariaLabel

string

"Photo constellation…"

Accessible description of the gallery and how to use it.

onFormationChange

(formation, index) => void

—

Called when the group starts moving to a new formation.

onOpen

(item, index) => void

—

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

ref

{ next, previous, setFormation, close }

—

Imperative controls for stepping through formations and closing an opened card.

children

ReactNode

—

Content centred over the group, such as a headline. It fades out while a card 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.