Spin Shutter

An orbit of photos that spins open and pulls focus where you point

spin-shutter-tw

Customize

Background

Count

Aspect

1.00

Size

0.38

Radius

14px

Tilt

14°

Roll

-24°

Distance

3.2

Scale

1.00

Cluster

Spread

0.60

Speed

1.2 rpm

Aperture

0.45

Haze

0.30

Shadow

0.35

IntroPause On HoverDraggableWheelCaptionsPaused

Props

Name	Type	Default	Description
`items`	{ src: string; alt: string; title?: string; subtitle?: string; href?: string }[]	`built-in scene collection`	Photos in the orbit (up to 32). Images must allow cross-origin loading. Title and subtitle caption the photo in focus; href is followed when a photo is opened.
`count`	number	`0`	Number of cards in the orbit, up to 48. Photos repeat to fill it. 0 shows each photo once.
`startIndex`	number	`0`	Card that sits at the front of the orbit once it has spun open.
`aspect`	number	`1`	Width divided by height of every card. Photos are cropped to fill it.
`size`	number	`0.38`	Card height relative to the orbit's radius.
`radius`	number	`14`	Corner radius in pixels at the front of the orbit. Farther cards scale it down with their size.
`tilt`	number	`14`	Camera height above the orbit in degrees. 0 sees it edge-on as a row; higher values open it into a ring.
`roll`	number	`-24`	Rotation of the whole orbit on the page in degrees, so it runs along a diagonal.
`distance`	number	`3.2`	Camera distance in orbit radii. Closer exaggerates perspective and depth of field; farther flattens both.
`scale`	number	`1`	Size of the composition relative to the space it fits in. The orbit always fits the component.
`cluster`	number	`1`	Cards per group. Above 1, cards travel in tight clusters that fan apart and overlap as they turn.
`spread`	number	`0.6`	Spacing between the cards inside a cluster, from 0.05 (stacked) to 1 (even spacing).
`speed`	number	`1.2`	Spin speed in turns per minute. Negative values spin the other way; 0 holds still.
`aperture`	number	`0.45`	Lens aperture. Higher values give a shallower depth of field; 0 keeps every card sharp.
`haze`	number	`0.3`	How much far cards fade toward the background.
`shadow`	number	`0.35`	Strength of the soft shadow under each card.
`intro`	boolean	`true`	Spin the orbit open from a single stack when it first loads.
`pauseOnHover`	boolean	`true`	Ease the spin to a stop while the pointer is over the orbit.
`draggable`	boolean	`true`	Drag along the orbit to spin it with momentum; drag across it to tilt the view, which springs back on release.
`wheel`	boolean	`true`	Scroll to turn the orbit one card per notch. Set false to leave page scrolling untouched.
`captions`	boolean	`true`	Show the title and subtitle of the photo in focus below the orbit.
`backgroundColor`	string	`"transparent"`	Background of the component. Haze, caption text and placeholders adapt to it.
`paused`	boolean	`false`	Stops the spin. Space toggles the same pause from the keyboard. Reduced-motion users get a still orbit.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`ariaLabel`	string	`"Photo orbit…"`	Accessible description of the orbit and how to use it.
`onFocusChange`	(item, index) => void	`—`	Called when a different photo comes into focus, by spinning to the front, hover, click or keyboard.
`onSelect`	(item, index) => void	`—`	Called when the photo brought forward is clicked again, or Enter is pressed.
`ref`	{ next, previous, show, release, replay }	`—`	next() and previous() bring the neighbouring card forward, show(index) brings a card forward, release() lets the orbit spin on, replay() spins it open again.
`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 in the orbit (up to 32). Images must allow cross-origin loading. Title and subtitle caption the photo in focus; href is followed when a photo is opened.

Defaultbuilt-in scene collection

countnumber

Number of cards in the orbit, up to 48. Photos repeat to fill it. 0 shows each photo once.

Default0

startIndexnumber

Card that sits at the front of the orbit once it has spun open.

Default0

aspectnumber

Width divided by height of every card. Photos are cropped to fill it.

Default1

sizenumber

Card height relative to the orbit's radius.

Default0.38

radiusnumber

Corner radius in pixels at the front of the orbit. Farther cards scale it down with their size.

Default14

tiltnumber

Camera height above the orbit in degrees. 0 sees it edge-on as a row; higher values open it into a ring.

Default14

rollnumber

Rotation of the whole orbit on the page in degrees, so it runs along a diagonal.

Default-24

distancenumber

Camera distance in orbit radii. Closer exaggerates perspective and depth of field; farther flattens both.

Default3.2

scalenumber

Size of the composition relative to the space it fits in. The orbit always fits the component.

Default1

clusternumber

Cards per group. Above 1, cards travel in tight clusters that fan apart and overlap as they turn.

Default1

spreadnumber

Spacing between the cards inside a cluster, from 0.05 (stacked) to 1 (even spacing).

Default0.6

speednumber

Spin speed in turns per minute. Negative values spin the other way; 0 holds still.

Default1.2

aperturenumber

Lens aperture. Higher values give a shallower depth of field; 0 keeps every card sharp.

Default0.45

hazenumber

How much far cards fade toward the background.

Default0.3

shadownumber

Strength of the soft shadow under each card.

Default0.35

introboolean

Spin the orbit open from a single stack when it first loads.

Defaulttrue

pauseOnHoverboolean

Ease the spin to a stop while the pointer is over the orbit.

Defaulttrue

draggableboolean

Drag along the orbit to spin it with momentum; drag across it to tilt the view, which springs back on release.

Defaulttrue

wheelboolean

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

Defaulttrue

captionsboolean

Show the title and subtitle of the photo in focus below the orbit.

Defaulttrue

backgroundColorstring

Background of the component. Haze, caption text and placeholders adapt to it.

Default"transparent"

pausedboolean

Stops the spin. Space toggles the same pause from the keyboard. Reduced-motion users get a still orbit.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

ariaLabelstring

Accessible description of the orbit and how to use it.

Default"Photo orbit…"

onFocusChange(item, index) => void

Called when a different photo comes into focus, by spinning to the front, hover, click or keyboard.

Default—

onSelect(item, index) => void

Called when the photo brought forward is clicked again, or Enter is pressed.

Default—

ref{ next, previous, show, release, replay }

next() and previous() bring the neighbouring card forward, show(index) brings a card forward, release() lets the orbit spin on, replay() spins it open again.

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 }[]

built-in scene collection

Photos in the orbit (up to 32). Images must allow cross-origin loading. Title and subtitle caption the photo in focus; href is followed when a photo is opened.

count

number

0

Number of cards in the orbit, up to 48. Photos repeat to fill it. 0 shows each photo once.

startIndex

number

0

Card that sits at the front of the orbit once it has spun open.

aspect

number

1

Width divided by height of every card. Photos are cropped to fill it.

size

number

0.38

Card height relative to the orbit's radius.

radius

number

14

Corner radius in pixels at the front of the orbit. Farther cards scale it down with their size.

tilt

number

14

Camera height above the orbit in degrees. 0 sees it edge-on as a row; higher values open it into a ring.

roll

number

-24

Rotation of the whole orbit on the page in degrees, so it runs along a diagonal.

distance

number

3.2

Camera distance in orbit radii. Closer exaggerates perspective and depth of field; farther flattens both.

scale

number

1

Size of the composition relative to the space it fits in. The orbit always fits the component.

cluster

number

1

Cards per group. Above 1, cards travel in tight clusters that fan apart and overlap as they turn.

spread

number

0.6

Spacing between the cards inside a cluster, from 0.05 (stacked) to 1 (even spacing).

speed

number

1.2

Spin speed in turns per minute. Negative values spin the other way; 0 holds still.

aperture

number

0.45

Lens aperture. Higher values give a shallower depth of field; 0 keeps every card sharp.

haze

number

0.3

How much far cards fade toward the background.

shadow

number

0.35

Strength of the soft shadow under each card.

intro

boolean

true

Spin the orbit open from a single stack when it first loads.

pauseOnHover

boolean

true

Ease the spin to a stop while the pointer is over the orbit.

draggable

boolean

true

Drag along the orbit to spin it with momentum; drag across it to tilt the view, which springs back on release.

wheel

boolean

true

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

captions

boolean

true

Show the title and subtitle of the photo in focus below the orbit.

backgroundColor

string

"transparent"

Background of the component. Haze, caption text and placeholders adapt to it.

paused

boolean

false

Stops the spin. Space toggles the same pause from the keyboard. Reduced-motion users get a still orbit.

dpr

number

2

Maximum device pixel ratio for the canvas.

ariaLabel

string

"Photo orbit…"

Accessible description of the orbit and how to use it.

onFocusChange

(item, index) => void

—

Called when a different photo comes into focus, by spinning to the front, hover, click or keyboard.

onSelect

(item, index) => void

—

Called when the photo brought forward is clicked again, or Enter is pressed.

ref

{ next, previous, show, release, replay }

—

next() and previous() bring the neighbouring card forward, show(index) brings a card forward, release() lets the orbit spin on, replay() spins it open again.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.