Depth Ribbon

A ribbon of images winding through 3D space

depth-ribbon-tw

Customize

Accent

Background

Count

Speed

0.60

Interval

9.0s

Card Size

0.72

Aspect

1.00

Radius

0.12

Offset

1.00

Field Of View

60°

Fog

1.00

Thread

0.30

Shadow

0.50

Seed

Focus On ClickHold To RevealCaptionsInteractiveDraggableWheelPause On HoverPaused

Props

Name	Type	Default	Description
`items`	{ src: string; alt: string; title?: string; subtitle?: string }[]	`Curated material studies`	Images for the cards, repeated along the path in shuffled passes. Images must allow cross-origin loading. Title and subtitle caption a card when it is brought close.
`count`	number	`72`	Number of cards along the path, up to 240. More cards make a longer path.
`path`	"loop" \| "knot" \| "wave"	`"loop"`	Shape of the path: a figure-eight that passes over itself, a trefoil knot, or an undulating ring.
`tour`	"cycle" \| "ride" \| "overview"	`"cycle"`	Camera behaviour: open on the whole path, dive in and pull back to reveal it every interval seconds; only ride; or show the whole path slowly turning.
`interval`	number	`9`	Seconds of riding between pull-backs in the cycle tour.
`speed`	number	`0.6`	Riding speed in cards per second. Negative values ride backwards.
`cardSize`	number	`0.72`	Card height as a fraction of the spacing between cards.
`aspect`	number	`1`	Card width divided by height.
`radius`	number	`0.12`	Corner rounding, from 0 (square) to 1 (fully round).
`offset`	number	`1`	How far beside and above the path the camera rides. Larger values give a wider view.
`fov`	number	`60`	Vertical field of view in degrees.
`fog`	number	`1`	How quickly cards fade into the background with distance.
`thread`	number	`0.3`	Opacity of the fine line that runs through the cards along the path. 0 hides it.
`shadow`	number	`0.5`	Opacity of the soft shadow beneath each card, most visible on light backgrounds.
`accentColor`	string	`"#B19EEF"`	Colour of the fine thread that runs through the cards.
`backgroundColor`	string	`"transparent"`	Background of the component. Cards fade into it with distance.
`focusOnClick`	boolean	`true`	Clicking a card flies the camera to it and shows its caption. Click again or press Escape to ride on from there.
`holdToReveal`	boolean	`true`	Press and hold to pull back and see the whole path. Drag while holding to turn it; release to dive back in.
`captions`	boolean	`true`	Show the title and subtitle of the card brought close.
`interactive`	boolean	`true`	Enable hover, clicking, holding and dragging.
`draggable`	boolean	`true`	Drag to travel along the path with inertia: vertically with a mouse, sideways on touch.
`wheel`	boolean	`true`	Scroll to travel along the path; scrolling during a close-up or a pull-back dives back in. Set false to leave page scrolling untouched.
`pauseOnHover`	boolean	`true`	Stop riding while the pointer rests on a card, which lifts slightly so it can be clicked.
`seed`	number	`0`	Changes the order in which images appear along the path.
`paused`	boolean	`false`	Stops riding and the tour. Reduced-motion users always get this.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`ariaLabel`	string	`"Depth ribbon gallery…"`	Accessible description of the gallery and how to use it.
`onFocusChange`	(item, index) => void	`—`	Called when a card is brought close, with null and -1 when the ride resumes.
`ref`	{ travel, focus, release, reveal }	`—`	Imperative controls: push the camera along by a number of cards, bring a card close, resume, or show the whole path.
`children`	ReactNode	`—`	Content centred over the gallery, such as a headline. It fades out while a card is close.
`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 for the cards, repeated along the path in shuffled passes. Images must allow cross-origin loading. Title and subtitle caption a card when it is brought close.

DefaultCurated material studies

countnumber

Number of cards along the path, up to 240. More cards make a longer path.

Default72

path"loop" | "knot" | "wave"

Shape of the path: a figure-eight that passes over itself, a trefoil knot, or an undulating ring.

Default"loop"

tour"cycle" | "ride" | "overview"

Camera behaviour: open on the whole path, dive in and pull back to reveal it every interval seconds; only ride; or show the whole path slowly turning.

Default"cycle"

intervalnumber

Seconds of riding between pull-backs in the cycle tour.

Default9

speednumber

Riding speed in cards per second. Negative values ride backwards.

Default0.6

cardSizenumber

Card height as a fraction of the spacing between cards.

Default0.72

aspectnumber

Card width divided by height.

Default1

radiusnumber

Corner rounding, from 0 (square) to 1 (fully round).

Default0.12

offsetnumber

How far beside and above the path the camera rides. Larger values give a wider view.

Default1

fovnumber

Vertical field of view in degrees.

Default60

fognumber

How quickly cards fade into the background with distance.

Default1

threadnumber

Opacity of the fine line that runs through the cards along the path. 0 hides it.

Default0.3

shadownumber

Opacity of the soft shadow beneath each card, most visible on light backgrounds.

Default0.5

accentColorstring

Colour of the fine thread that runs through the cards.

Default"#B19EEF"

backgroundColorstring

Background of the component. Cards fade into it with distance.

Default"transparent"

focusOnClickboolean

Clicking a card flies the camera to it and shows its caption. Click again or press Escape to ride on from there.

Defaulttrue

holdToRevealboolean

Press and hold to pull back and see the whole path. Drag while holding to turn it; release to dive back in.

Defaulttrue

captionsboolean

Show the title and subtitle of the card brought close.

Defaulttrue

interactiveboolean

Enable hover, clicking, holding and dragging.

Defaulttrue

draggableboolean

Drag to travel along the path with inertia: vertically with a mouse, sideways on touch.

Defaulttrue

wheelboolean

Scroll to travel along the path; scrolling during a close-up or a pull-back dives back in. Set false to leave page scrolling untouched.

Defaulttrue

pauseOnHoverboolean

Stop riding while the pointer rests on a card, which lifts slightly so it can be clicked.

Defaulttrue

seednumber

Changes the order in which images appear along the path.

Default0

pausedboolean

Stops riding and the tour. 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"Depth ribbon gallery…"

onFocusChange(item, index) => void

Called when a card is brought close, with null and -1 when the ride resumes.

Default—

ref{ travel, focus, release, reveal }

Imperative controls: push the camera along by a number of cards, bring a card close, resume, or show the whole path.

Default—

childrenReactNode

Content centred over the gallery, such as a headline. It fades out while a card is close.

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

Curated material studies

Images for the cards, repeated along the path in shuffled passes. Images must allow cross-origin loading. Title and subtitle caption a card when it is brought close.

count

number

72

Number of cards along the path, up to 240. More cards make a longer path.

path

"loop" | "knot" | "wave"

"loop"

Shape of the path: a figure-eight that passes over itself, a trefoil knot, or an undulating ring.

tour

"cycle" | "ride" | "overview"

"cycle"

Camera behaviour: open on the whole path, dive in and pull back to reveal it every interval seconds; only ride; or show the whole path slowly turning.

interval

number

9

Seconds of riding between pull-backs in the cycle tour.

speed

number

0.6

Riding speed in cards per second. Negative values ride backwards.

cardSize

number

0.72

Card height as a fraction of the spacing between cards.

aspect

number

1

Card width divided by height.

radius

number

0.12

Corner rounding, from 0 (square) to 1 (fully round).

offset

number

1

How far beside and above the path the camera rides. Larger values give a wider view.

fov

number

60

Vertical field of view in degrees.

fog

number

1

How quickly cards fade into the background with distance.

thread

number

0.3

Opacity of the fine line that runs through the cards along the path. 0 hides it.

shadow

number

0.5

Opacity of the soft shadow beneath each card, most visible on light backgrounds.

accentColor

string

"#B19EEF"

Colour of the fine thread that runs through the cards.

backgroundColor

string

"transparent"

Background of the component. Cards fade into it with distance.

focusOnClick

boolean

true

Clicking a card flies the camera to it and shows its caption. Click again or press Escape to ride on from there.

holdToReveal

boolean

true

Press and hold to pull back and see the whole path. Drag while holding to turn it; release to dive back in.

captions

boolean

true

Show the title and subtitle of the card brought close.

interactive

boolean

true

Enable hover, clicking, holding and dragging.

draggable

boolean

true

Drag to travel along the path with inertia: vertically with a mouse, sideways on touch.

wheel

boolean

true

Scroll to travel along the path; scrolling during a close-up or a pull-back dives back in. Set false to leave page scrolling untouched.

pauseOnHover

boolean

true

Stop riding while the pointer rests on a card, which lifts slightly so it can be clicked.

seed

number

0

Changes the order in which images appear along the path.

paused

boolean

false

Stops riding and the tour. Reduced-motion users always get this.

dpr

number

2

Maximum device pixel ratio for the canvas.

ariaLabel

string

"Depth ribbon gallery…"

Accessible description of the gallery and how to use it.

onFocusChange

(item, index) => void

—

Called when a card is brought close, with null and -1 when the ride resumes.

ref

{ travel, focus, release, reveal }

—

Imperative controls: push the camera along by a number of cards, bring a card close, resume, or show the whole path.

children

ReactNode

—

Content centred over the gallery, such as a headline. It fades out while a card is close.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.