Prism Carousel

A coverflow that sweeps color into each new image

prism-carousel-tw

Props

Name	Type	Default	Description
`items`	{ src: string; alt: string; title?: string; subtitle?: string; href?: string }[]	`built-in scene collection`	Images to show, in order. Images must allow cross-origin loading. Title and subtitle caption the active image; href makes clicking it navigate.
`startIndex`	number	`0`	Index of the image shown first.
`aspect`	number	`1.5`	Width divided by height of the active image. Neighbours are narrower crops of their images.
`size`	number	`0.62`	Height of the active image as a fraction of the space above the caption.
`neighborScale`	number	`0.66`	Height of the neighbouring images relative to the active one.
`gap`	number	`14`	Space between images in pixels.
`radius`	number	`18`	Corner radius of the active image in pixels. Neighbours scale it with their height.
`saturation`	number	`0`	Colour of the images that are not active, from 0 (monochrome) to 1 (full colour).
`dim`	number	`0.2`	How much the images away from the centre darken.
`sweep`	number	`1`	Strength of the band of spectrum that sweeps across each new image as its colour arrives. 0 turns the colour on without a sweep.
`sweepDuration`	number	`1.1`	Seconds the sweep takes to cross an image.
`dispersion`	number	`1`	How strongly images split into a spectrum while the carousel moves. 0 keeps them sharp.
`autoplay`	boolean	`true`	Advance to the next image every interval seconds.
`interval`	number	`4.5`	Seconds between autoplay steps.
`loop`	boolean	`true`	Wrap around at the ends. When false, the carousel stops at the first and last image.
`captions`	boolean	`true`	Show the title and subtitle of the active image.
`controls`	boolean	`true`	Show previous and next buttons with a counter.
`draggable`	boolean	`true`	Drag or swipe sideways to move between images, with inertia and snapping.
`wheel`	boolean	`true`	Scroll to move between images, one image per notch. Set false to leave page scrolling untouched.
`pauseOnHover`	boolean	`true`	Pause autoplay while the pointer is over the carousel. Hovering a neighbour also lets some colour in.
`backgroundColor`	string	`"transparent"`	Background of the component. Caption and controls adapt to it.
`paused`	boolean	`false`	Stops autoplay. Reduced-motion users also get no sweep or dispersion.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`ariaLabel`	string	`"Prism carousel…"`	Accessible description of the carousel and how to use it.
`onIndexChange`	(index) => void	`—`	Called when a different image becomes active.
`onSelect`	(item, index) => void	`—`	Called when the active image is clicked or Enter is pressed.
`ref`	{ next, previous, goTo }	`—`	Imperative controls for moving between images.
`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 to show, in order. Images must allow cross-origin loading. Title and subtitle caption the active image; href makes clicking it navigate.

Defaultbuilt-in scene collection

startIndexnumber

Index of the image shown first.

Default0

aspectnumber

Width divided by height of the active image. Neighbours are narrower crops of their images.

Default1.5

sizenumber

Height of the active image as a fraction of the space above the caption.

Default0.62

neighborScalenumber

Height of the neighbouring images relative to the active one.

Default0.66

gapnumber

Space between images in pixels.

Default14

radiusnumber

Corner radius of the active image in pixels. Neighbours scale it with their height.

Default18

saturationnumber

Colour of the images that are not active, from 0 (monochrome) to 1 (full colour).

Default0

dimnumber

How much the images away from the centre darken.

Default0.2

sweepnumber

Strength of the band of spectrum that sweeps across each new image as its colour arrives. 0 turns the colour on without a sweep.

Default1

sweepDurationnumber

Seconds the sweep takes to cross an image.

Default1.1

dispersionnumber

How strongly images split into a spectrum while the carousel moves. 0 keeps them sharp.

Default1

autoplayboolean

Advance to the next image every interval seconds.

Defaulttrue

intervalnumber

Seconds between autoplay steps.

Default4.5

loopboolean

Wrap around at the ends. When false, the carousel stops at the first and last image.

Defaulttrue

captionsboolean

Show the title and subtitle of the active image.

Defaulttrue

controlsboolean

Show previous and next buttons with a counter.

Defaulttrue

draggableboolean

Drag or swipe sideways to move between images, with inertia and snapping.

Defaulttrue

wheelboolean

Scroll to move between images, one image per notch. Set false to leave page scrolling untouched.

Defaulttrue

pauseOnHoverboolean

Pause autoplay while the pointer is over the carousel. Hovering a neighbour also lets some colour in.

Defaulttrue

backgroundColorstring

Background of the component. Caption and controls adapt to it.

Default"transparent"

pausedboolean

Stops autoplay. Reduced-motion users also get no sweep or dispersion.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

ariaLabelstring

Accessible description of the carousel and how to use it.

Default"Prism carousel…"

onIndexChange(index) => void

Called when a different image becomes active.

Default—

onSelect(item, index) => void

Called when the active image is clicked or Enter is pressed.

Default—

ref{ next, previous, goTo }

Imperative controls for moving between images.

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

Images to show, in order. Images must allow cross-origin loading. Title and subtitle caption the active image; href makes clicking it navigate.

startIndex

number

0

Index of the image shown first.

aspect

number

1.5

Width divided by height of the active image. Neighbours are narrower crops of their images.

size

number

0.62

Height of the active image as a fraction of the space above the caption.

neighborScale

number

0.66

Height of the neighbouring images relative to the active one.

gap

number

14

Space between images in pixels.

radius

number

18

Corner radius of the active image in pixels. Neighbours scale it with their height.

saturation

number

0

Colour of the images that are not active, from 0 (monochrome) to 1 (full colour).

dim

number

0.2

How much the images away from the centre darken.

sweep

number

1

Strength of the band of spectrum that sweeps across each new image as its colour arrives. 0 turns the colour on without a sweep.

sweepDuration

number

1.1

Seconds the sweep takes to cross an image.

dispersion

number

1

How strongly images split into a spectrum while the carousel moves. 0 keeps them sharp.

autoplay

boolean

true

Advance to the next image every interval seconds.

interval

number

4.5

Seconds between autoplay steps.

loop

boolean

true

Wrap around at the ends. When false, the carousel stops at the first and last image.

captions

boolean

true

Show the title and subtitle of the active image.

controls

boolean

true

Show previous and next buttons with a counter.

draggable

boolean

true

Drag or swipe sideways to move between images, with inertia and snapping.

wheel

boolean

true

Scroll to move between images, one image per notch. Set false to leave page scrolling untouched.

pauseOnHover

boolean

true

Pause autoplay while the pointer is over the carousel. Hovering a neighbour also lets some colour in.

backgroundColor

string

"transparent"

Background of the component. Caption and controls adapt to it.

paused

boolean

false

Stops autoplay. Reduced-motion users also get no sweep or dispersion.

dpr

number

2

Maximum device pixel ratio for the canvas.

ariaLabel

string

"Prism carousel…"

Accessible description of the carousel and how to use it.

onIndexChange

(index) => void

—

Called when a different image becomes active.

onSelect

(item, index) => void

—

Called when the active image is clicked or Enter is pressed.

ref

{ next, previous, goTo }

—

Imperative controls for moving between images.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.

Prism Carousel

Customize

Props

Prism Carousel

Customize

Props