Passage Gallery

A tunnel of photos you glide through

passage-gallery-tw

Customize

Color A

Color B

Background

Lanes

Gap

0.10

Radius

0.06

Photo Fill

0.30

Accent Fill

0.06

Line Opacity

0.12

Fog

1.00

Speed

0.60

Boost

10.0×

Blur

1.00

Look

1.00

Field Of View

72°

Hover

1.00

Seed

Focus On ClickCaptionsWheelInteractivePaused

Props

Name	Type	Default	Description
`items`	{ src: string; alt: string; title?: string }[]	`built-in scene collection`	Photos placed along the walls. Images must allow cross-origin loading. Titles are shown as captions when a photo is opened.
`colors`	[string, string]	`["#5227FF", "#FF9FFC"]`	The two ends of the gradient used for accent tiles.
`backgroundColor`	string	`"#0a0a0a"`	Colour of the walls and of the distance the tunnel fades into. Grid lines adapt to it. Pass "transparent" to show the page behind.
`lanes`	number	`5`	Tiles across the floor and ceiling. The walls get as many as fit the aspect ratio.
`gap`	number	`0.1`	Space between tiles as a fraction of a cell. 0 makes tiles flush.
`radius`	number	`0.06`	Corner rounding of the tiles, from 0 (square) to 1 (circular).
`photoFill`	number	`0.3`	Share of cells holding a photo, from 0 to 1.
`accentFill`	number	`0.06`	Share of cells holding a gradient accent tile.
`lineOpacity`	number	`0.12`	Opacity of the hairline grid.
`fog`	number	`1`	How quickly the tunnel fades into the background with distance.
`speed`	number	`0.6`	Cruising speed in cells per second. Negative values travel backwards; 0 stays still.
`boost`	number	`10`	Speed multiplier while the pointer is held down.
`blur`	number	`1`	Strength of the motion blur at high speed. 0 turns it off.
`look`	number	`1`	How far the view turns and shifts toward the pointer.
`fov`	number	`72`	Vertical field of view in degrees. Wider angles exaggerate the depth.
`hover`	number	`1`	Brightening and lift of the tile under the pointer. 0 turns it off.
`focusOnClick`	boolean	`true`	Clicking a photo flies it out of the wall to full view. Click again or press Escape to put it back.
`captions`	boolean	`true`	Show the title and position of an opened photo.
`wheel`	boolean	`true`	Scroll to travel through the tunnel; scrolling while a photo is open puts it back and moves on. Set false to leave page scrolling untouched.
`interactive`	boolean	`true`	Enable pointer look, dragging, holding and clicking. Drag vertically with a mouse or sideways on touch.
`seed`	number	`0`	Changes which cells hold photos and accents.
`paused`	boolean	`false`	Stops cruising. Dragging and holding still work. Reduced-motion users never cruise.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`ariaLabel`	string	`"Photo tunnel…"`	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.
`ref`	{ close, travel }	`—`	Imperative controls: put an opened photo back, or give the camera a push of a number of cells.
`children`	ReactNode	`—`	Content centred over the tunnel, such as a headline or call to action.
`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 }[]

Photos placed along the walls. Images must allow cross-origin loading. Titles are shown as captions when a photo is opened.

Defaultbuilt-in scene collection

colors[string, string]

The two ends of the gradient used for accent tiles.

Default["#5227FF", "#FF9FFC"]

backgroundColorstring

Colour of the walls and of the distance the tunnel fades into. Grid lines adapt to it. Pass "transparent" to show the page behind.

Default"#0a0a0a"

lanesnumber

Tiles across the floor and ceiling. The walls get as many as fit the aspect ratio.

Default5

gapnumber

Space between tiles as a fraction of a cell. 0 makes tiles flush.

Default0.1

radiusnumber

Corner rounding of the tiles, from 0 (square) to 1 (circular).

Default0.06

photoFillnumber

Share of cells holding a photo, from 0 to 1.

Default0.3

accentFillnumber

Share of cells holding a gradient accent tile.

Default0.06

lineOpacitynumber

Opacity of the hairline grid.

Default0.12

fognumber

How quickly the tunnel fades into the background with distance.

Default1

speednumber

Cruising speed in cells per second. Negative values travel backwards; 0 stays still.

Default0.6

boostnumber

Speed multiplier while the pointer is held down.

Default10

blurnumber

Strength of the motion blur at high speed. 0 turns it off.

Default1

looknumber

How far the view turns and shifts toward the pointer.

Default1

fovnumber

Vertical field of view in degrees. Wider angles exaggerate the depth.

Default72

hovernumber

Brightening and lift of the tile under the pointer. 0 turns it off.

Default1

focusOnClickboolean

Clicking a photo flies it out of the wall to full view. Click again or press Escape to put it back.

Defaulttrue

captionsboolean

Show the title and position of an opened photo.

Defaulttrue

wheelboolean

Scroll to travel through the tunnel; scrolling while a photo is open puts it back and moves on. Set false to leave page scrolling untouched.

Defaulttrue

interactiveboolean

Enable pointer look, dragging, holding and clicking. Drag vertically with a mouse or sideways on touch.

Defaulttrue

seednumber

Changes which cells hold photos and accents.

Default0

pausedboolean

Stops cruising. Dragging and holding still work. Reduced-motion users never cruise.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

ariaLabelstring

Accessible description of the gallery and how to use it.

Default"Photo tunnel…"

onFocusChange(item, index) => void

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

Default—

ref{ close, travel }

Imperative controls: put an opened photo back, or give the camera a push of a number of cells.

Default—

childrenReactNode

Content centred over the tunnel, such as a headline or call to action.

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

built-in scene collection

Photos placed along the walls. Images must allow cross-origin loading. Titles are shown as captions when a photo is opened.

colors

[string, string]

["#5227FF", "#FF9FFC"]

The two ends of the gradient used for accent tiles.

backgroundColor

string

"#0a0a0a"

Colour of the walls and of the distance the tunnel fades into. Grid lines adapt to it. Pass "transparent" to show the page behind.

lanes

number

5

Tiles across the floor and ceiling. The walls get as many as fit the aspect ratio.

gap

number

0.1

Space between tiles as a fraction of a cell. 0 makes tiles flush.

radius

number

0.06

Corner rounding of the tiles, from 0 (square) to 1 (circular).

photoFill

number

0.3

Share of cells holding a photo, from 0 to 1.

accentFill

number

0.06

Share of cells holding a gradient accent tile.

lineOpacity

number

0.12

Opacity of the hairline grid.

fog

number

1

How quickly the tunnel fades into the background with distance.

speed

number

0.6

Cruising speed in cells per second. Negative values travel backwards; 0 stays still.

boost

number

10

Speed multiplier while the pointer is held down.

blur

number

1

Strength of the motion blur at high speed. 0 turns it off.

look

number

1

How far the view turns and shifts toward the pointer.

fov

number

72

Vertical field of view in degrees. Wider angles exaggerate the depth.

hover

number

1

Brightening and lift of the tile under the pointer. 0 turns it off.

focusOnClick

boolean

true

Clicking a photo flies it out of the wall to full view. Click again or press Escape to put it back.

captions

boolean

true

Show the title and position of an opened photo.

wheel

boolean

true

Scroll to travel through the tunnel; scrolling while a photo is open puts it back and moves on. Set false to leave page scrolling untouched.

interactive

boolean

true

Enable pointer look, dragging, holding and clicking. Drag vertically with a mouse or sideways on touch.

seed

number

0

Changes which cells hold photos and accents.

paused

boolean

false

Stops cruising. Dragging and holding still work. Reduced-motion users never cruise.

dpr

number

2

Maximum device pixel ratio for the canvas.

ariaLabel

string

"Photo tunnel…"

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.

ref

{ close, travel }

—

Imperative controls: put an opened photo back, or give the camera a push of a number of cells.

children

ReactNode

—

Content centred over the tunnel, such as a headline or call to action.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.