Concave Carousel

A gallery wall that curves around the viewer

concave-carousel-tw

Customize

Background

Aspect

1.25

Size

0.46

Curvature

0.72

Distance

4.0

Tilt

0.0°

Gap

16px

Radius

14px

Reflection

0.06

Dim

0.35

Speed

0.16

Interval

4.0s

Inertia

0.50

SnapPause On HoverDraggableWheelCaptionsControlsPaused

Props

Name	Type	Default	Description
`items`	{ src: string; alt: string; title?: string; subtitle?: string; href?: string }[]	`Curated material studies`	Images hung around the wall, in order. Images must allow cross-origin loading. Title and subtitle caption the centred image; href makes clicking it navigate.
`startIndex`	number	`0`	Index of the image that starts in the centre.
`aspect`	number	`1.25`	Width divided by height of every panel. Images are cropped to fill it.
`size`	number	`0.46`	Height of the centred panel as a fraction of the space above the caption.
`curvature`	number	`0.72`	How strongly the wall bends around the viewer, from 0 (a flat strip) to 1 (a tight drum).
`distance`	number	`4`	How far the viewer stands from the wall, in panel heights. Closer exaggerates the perspective; further flattens it.
`tilt`	number	`0`	Viewing angle in degrees. Negative looks up at the wall from below, positive looks down onto the floor.
`gap`	number	`16`	Space between panels in pixels, measured at the centred panel.
`radius`	number	`14`	Corner radius in pixels, measured at the centred panel.
`reflection`	number	`0.06`	Strength of the faint reflection on the floor below the wall. 0 removes it.
`dim`	number	`0.35`	How much the wall fades into the background toward the left and right edges.
`autoplay`	"drift" \| "step" \| "off"	`"drift"`	Drift turns the wall slowly and continuously, step turns it one panel every interval, off leaves it still.
`speed`	number	`0.16`	Drift speed in panels per second. Negative values turn the other way, also for step.
`interval`	number	`4`	Seconds between steps when autoplay is step.
`snap`	boolean	`true`	Settle with a panel centred after a drag, flick or scroll, like a dial with detents.
`inertia`	number	`0.5`	How far a flick carries the wall before it settles, from 0 to 1.
`pauseOnHover`	boolean	`true`	Brake the motion while the pointer rests on the wall, so a picture can be looked at.
`draggable`	boolean	`true`	Grab the wall and turn it. The point you hold stays under the pointer, and flicks carry on with momentum.
`wheel`	boolean	`true`	Scroll to turn the wall, one panel per notch. Set false to leave page scrolling untouched.
`captions`	boolean	`true`	Show the title and subtitle of the centred image below the wall.
`controls`	boolean	`true`	Show previous and next buttons with a counter.
`backgroundColor`	string	`"transparent"`	Background of the component. Caption, controls and loading panels adapt to it.
`paused`	boolean	`false`	Stops autoplay. Space toggles it too, and reduced-motion users get a still wall that only moves on input.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`ariaLabel`	string	`"Concave carousel…"`	Accessible description of the carousel and how to use it.
`onIndexChange`	(index) => void	`—`	Called when a different image reaches the centre.
`onSelect`	(item, index) => void	`—`	Called when the centred image is clicked or Enter is pressed. Clicking any other image turns the wall to it.
`ref`	{ next, previous, goTo }	`—`	Imperative controls for turning the wall.
`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 hung around the wall, in order. Images must allow cross-origin loading. Title and subtitle caption the centred image; href makes clicking it navigate.

DefaultCurated material studies

startIndexnumber

Index of the image that starts in the centre.

Default0

aspectnumber

Width divided by height of every panel. Images are cropped to fill it.

Default1.25

sizenumber

Height of the centred panel as a fraction of the space above the caption.

Default0.46

curvaturenumber

How strongly the wall bends around the viewer, from 0 (a flat strip) to 1 (a tight drum).

Default0.72

distancenumber

How far the viewer stands from the wall, in panel heights. Closer exaggerates the perspective; further flattens it.

Default4

tiltnumber

Viewing angle in degrees. Negative looks up at the wall from below, positive looks down onto the floor.

Default0

gapnumber

Space between panels in pixels, measured at the centred panel.

Default16

radiusnumber

Corner radius in pixels, measured at the centred panel.

Default14

reflectionnumber

Strength of the faint reflection on the floor below the wall. 0 removes it.

Default0.06

dimnumber

How much the wall fades into the background toward the left and right edges.

Default0.35

autoplay"drift" | "step" | "off"

Drift turns the wall slowly and continuously, step turns it one panel every interval, off leaves it still.

Default"drift"

speednumber

Drift speed in panels per second. Negative values turn the other way, also for step.

Default0.16

intervalnumber

Seconds between steps when autoplay is step.

Default4

snapboolean

Settle with a panel centred after a drag, flick or scroll, like a dial with detents.

Defaulttrue

inertianumber

How far a flick carries the wall before it settles, from 0 to 1.

Default0.5

pauseOnHoverboolean

Brake the motion while the pointer rests on the wall, so a picture can be looked at.

Defaulttrue

draggableboolean

Grab the wall and turn it. The point you hold stays under the pointer, and flicks carry on with momentum.

Defaulttrue

wheelboolean

Scroll to turn the wall, one panel per notch. Set false to leave page scrolling untouched.

Defaulttrue

captionsboolean

Show the title and subtitle of the centred image below the wall.

Defaulttrue

controlsboolean

Show previous and next buttons with a counter.

Defaulttrue

backgroundColorstring

Background of the component. Caption, controls and loading panels adapt to it.

Default"transparent"

pausedboolean

Stops autoplay. Space toggles it too, and reduced-motion users get a still wall that only moves on input.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

ariaLabelstring

Accessible description of the carousel and how to use it.

Default"Concave carousel…"

onIndexChange(index) => void

Called when a different image reaches the centre.

Default—

onSelect(item, index) => void

Called when the centred image is clicked or Enter is pressed. Clicking any other image turns the wall to it.

Default—

ref{ next, previous, goTo }

Imperative controls for turning the wall.

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

Curated material studies

Images hung around the wall, in order. Images must allow cross-origin loading. Title and subtitle caption the centred image; href makes clicking it navigate.

startIndex

number

0

Index of the image that starts in the centre.

aspect

number

1.25

Width divided by height of every panel. Images are cropped to fill it.

size

number

0.46

Height of the centred panel as a fraction of the space above the caption.

curvature

number

0.72

How strongly the wall bends around the viewer, from 0 (a flat strip) to 1 (a tight drum).

distance

number

4

How far the viewer stands from the wall, in panel heights. Closer exaggerates the perspective; further flattens it.

tilt

number

0

Viewing angle in degrees. Negative looks up at the wall from below, positive looks down onto the floor.

gap

number

16

Space between panels in pixels, measured at the centred panel.

radius

number

14

Corner radius in pixels, measured at the centred panel.

reflection

number

0.06

Strength of the faint reflection on the floor below the wall. 0 removes it.

dim

number

0.35

How much the wall fades into the background toward the left and right edges.

autoplay

"drift" | "step" | "off"

"drift"

Drift turns the wall slowly and continuously, step turns it one panel every interval, off leaves it still.

speed

number

0.16

Drift speed in panels per second. Negative values turn the other way, also for step.

interval

number

4

Seconds between steps when autoplay is step.

snap

boolean

true

Settle with a panel centred after a drag, flick or scroll, like a dial with detents.

inertia

number

0.5

How far a flick carries the wall before it settles, from 0 to 1.

pauseOnHover

boolean

true

Brake the motion while the pointer rests on the wall, so a picture can be looked at.

draggable

boolean

true

Grab the wall and turn it. The point you hold stays under the pointer, and flicks carry on with momentum.

wheel

boolean

true

Scroll to turn the wall, one panel per notch. Set false to leave page scrolling untouched.

captions

boolean

true

Show the title and subtitle of the centred image below the wall.

controls

boolean

true

Show previous and next buttons with a counter.

backgroundColor

string

"transparent"

Background of the component. Caption, controls and loading panels adapt to it.

paused

boolean

false

Stops autoplay. Space toggles it too, and reduced-motion users get a still wall that only moves on input.

dpr

number

2

Maximum device pixel ratio for the canvas.

ariaLabel

string

"Concave carousel…"

Accessible description of the carousel and how to use it.

onIndexChange

(index) => void

—

Called when a different image reaches the centre.

onSelect

(item, index) => void

—

Called when the centred image is clicked or Enter is pressed. Clicking any other image turns the wall to it.

ref

{ next, previous, goTo }

—

Imperative controls for turning the wall.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.