Iris Gallery

An oval of photos that turns into an iris

iris-gallery-tw

Customize

Background

Count

Fin

60°

Pupil

0.52

Speed

6°/s

Interval

6.0s

Hold

4.0s

Morph Duration

1.8s

Stagger

0.70

Card Aspect

0.78

Radius

0.18

Gap

0.10

Depth

1.00

Shade

0.60

Focus On ClickCaptionsDraggableWheelPause On HoverPaused

Props

Name	Type	Default	Description
`items`	{ src: string; alt: string; title?: string; subtitle?: string; href?: string }[]	`studio portrait collection`	Images for the cards. They repeat when there are more cards than items. Images must allow cross-origin loading. Title and subtitle caption a photo when it is opened.
`count`	number	`28`	Number of cards around the ring, up to 96.
`mode`	"cycle" \| "gallery" \| "iris"	`"cycle"`	Cycle alternates between an oval of upright photos and the iris, where every card turns into a lit, radial blade. Gallery and iris stay in one state.
`interval`	number	`6`	Seconds spent as a gallery before turning into the iris, in cycle mode.
`hold`	number	`4`	Seconds held as an iris before opening back into a gallery, in cycle mode.
`morphDuration`	number	`1.8`	Seconds the wave takes to travel around the ring when the state changes.
`stagger`	number	`0.7`	How spread out that wave is, from the top down both sides. 0 turns every card at once.
`speed`	number	`6`	Speed the cards travel around the ring, in degrees per second. Negative values reverse it.
`fin`	number	`60`	Angle, in degrees, the blades turn to in the iris. Higher values give thinner, deeper blades.
`pupil`	number	`0.52`	Size of the pupil as a fraction of the iris. An opened photo fills the pupil.
`cardAspect`	number	`0.78`	Width divided by height of the cards in the gallery state.
`radius`	number	`0.18`	Corner rounding as a fraction of the card width.
`gap`	number	`0.1`	Space between cards in the gallery state, as a fraction of their spacing.
`depth`	number	`1`	Strength of the perspective.
`shade`	number	`0.6`	How much the blades darken as they turn away from the light.
`backgroundColor`	string	`"transparent"`	Background of the component. Captions adapt to it.
`focusOnClick`	boolean	`true`	Clicking a card flies its photo into the pupil while the ring closes into an iris around it. Click again 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 ring to turn it, with inertia.
`wheel`	boolean	`true`	Scroll to turn the ring, one card per notch. Set false to leave page scrolling untouched.
`pauseOnHover`	boolean	`true`	Stop the ring and the cycle while the pointer rests on a card, which lifts so it can be clicked.
`paused`	boolean	`false`	Stops travelling and the cycle. Reduced-motion users always get a still gallery.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`ariaLabel`	string	`"Iris gallery…"`	Accessible description of the gallery and how to use it.
`onFocusChange`	(item, index) => void	`—`	Called when a photo is opened, with null and -1 when it is put back.
`onStateChange`	(state: "gallery" \| "iris") => void	`—`	Called when the ring starts turning into the other state.
`ref`	{ open, close, setState, rotate }	`—`	Imperative controls for opening a photo, switching state and turning the ring.
`children`	ReactNode	`—`	Content centred inside the ring, 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 }[]

Images for the cards. They repeat when there are more cards than items. Images must allow cross-origin loading. Title and subtitle caption a photo when it is opened.

Defaultstudio portrait collection

countnumber

Number of cards around the ring, up to 96.

Default28

mode"cycle" | "gallery" | "iris"

Cycle alternates between an oval of upright photos and the iris, where every card turns into a lit, radial blade. Gallery and iris stay in one state.

Default"cycle"

intervalnumber

Seconds spent as a gallery before turning into the iris, in cycle mode.

Default6

holdnumber

Seconds held as an iris before opening back into a gallery, in cycle mode.

Default4

morphDurationnumber

Seconds the wave takes to travel around the ring when the state changes.

Default1.8

staggernumber

How spread out that wave is, from the top down both sides. 0 turns every card at once.

Default0.7

speednumber

Speed the cards travel around the ring, in degrees per second. Negative values reverse it.

Default6

finnumber

Angle, in degrees, the blades turn to in the iris. Higher values give thinner, deeper blades.

Default60

pupilnumber

Size of the pupil as a fraction of the iris. An opened photo fills the pupil.

Default0.52

cardAspectnumber

Width divided by height of the cards in the gallery state.

Default0.78

radiusnumber

Corner rounding as a fraction of the card width.

Default0.18

gapnumber

Space between cards in the gallery state, as a fraction of their spacing.

Default0.1

depthnumber

Strength of the perspective.

Default1

shadenumber

How much the blades darken as they turn away from the light.

Default0.6

backgroundColorstring

Background of the component. Captions adapt to it.

Default"transparent"

focusOnClickboolean

Clicking a card flies its photo into the pupil while the ring closes into an iris around it. Click again or press Escape to put it back.

Defaulttrue

captionsboolean

Show the title and subtitle of an opened photo.

Defaulttrue

draggableboolean

Drag around the ring to turn it, with inertia.

Defaulttrue

wheelboolean

Scroll to turn the ring, one card per notch. Set false to leave page scrolling untouched.

Defaulttrue

pauseOnHoverboolean

Stop the ring and the cycle while the pointer rests on a card, which lifts so it can be clicked.

Defaulttrue

pausedboolean

Stops travelling and the cycle. Reduced-motion users always get a still gallery.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

ariaLabelstring

Accessible description of the gallery and how to use it.

Default"Iris gallery…"

onFocusChange(item, index) => void

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

Default—

onStateChange(state: "gallery" | "iris") => void

Called when the ring starts turning into the other state.

Default—

ref{ open, close, setState, rotate }

Imperative controls for opening a photo, switching state and turning the ring.

Default—

childrenReactNode

Content centred inside the ring, 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

Images for the cards. They repeat when there are more cards than items. Images must allow cross-origin loading. Title and subtitle caption a photo when it is opened.

count

number

28

Number of cards around the ring, up to 96.

mode

"cycle" | "gallery" | "iris"

"cycle"

Cycle alternates between an oval of upright photos and the iris, where every card turns into a lit, radial blade. Gallery and iris stay in one state.

interval

number

6

Seconds spent as a gallery before turning into the iris, in cycle mode.

hold

number

4

Seconds held as an iris before opening back into a gallery, in cycle mode.

morphDuration

number

1.8

Seconds the wave takes to travel around the ring when the state changes.

stagger

number

0.7

How spread out that wave is, from the top down both sides. 0 turns every card at once.

speed

number

6

Speed the cards travel around the ring, in degrees per second. Negative values reverse it.

fin

number

60

Angle, in degrees, the blades turn to in the iris. Higher values give thinner, deeper blades.

pupil

number

0.52

Size of the pupil as a fraction of the iris. An opened photo fills the pupil.

cardAspect

number

0.78

Width divided by height of the cards in the gallery state.

radius

number

0.18

Corner rounding as a fraction of the card width.

gap

number

0.1

Space between cards in the gallery state, as a fraction of their spacing.

depth

number

1

Strength of the perspective.

shade

number

0.6

How much the blades darken as they turn away from the light.

backgroundColor

string

"transparent"

Background of the component. Captions adapt to it.

focusOnClick

boolean

true

Clicking a card flies its photo into the pupil while the ring closes into an iris around it. Click again 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 ring to turn it, with inertia.

wheel

boolean

true

Scroll to turn the ring, one card per notch. Set false to leave page scrolling untouched.

pauseOnHover

boolean

true

Stop the ring and the cycle while the pointer rests on a card, which lifts so it can be clicked.

paused

boolean

false

Stops travelling and the cycle. Reduced-motion users always get a still gallery.

dpr

number

2

Maximum device pixel ratio for the canvas.

ariaLabel

string

"Iris gallery…"

Accessible description of the gallery and how to use it.

onFocusChange

(item, index) => void

—

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

onStateChange

(state: "gallery" | "iris") => void

—

Called when the ring starts turning into the other state.

ref

{ open, close, setState, rotate }

—

Imperative controls for opening a photo, switching state and turning the ring.

children

ReactNode

—

Content centred inside the ring, 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.