Contact Sheet

Photos streaming out of the center, developing like prints

contact-sheet-tw

Customize

Background

Border Color

Count

Speed

0.10

Rush

0.35

Spiral

0.00

Blank Area

0.20

Size

0.170

Size Variance

0.25

Aspect

0.80

Radius

12px

Border

0.000

Rim

0.12

Roll

0.0°

Develop

0.85

Shadow

0.50

Edge Fade

0.35

Hover Slow

0.60

Catch On HoverDraggableWheelCaptionsPaused

Props

Name	Type	Default	Description
`items`	{ src: string; alt: string; title?: string; subtitle?: string; href?: string }[]	`studio portrait collection`	Photos streamed from the center, cycling through the collection in order. Images must allow cross-origin loading. Title and subtitle caption an opened photo.
`count`	number	`18`	How many photos are in flight at once, up to 96.
`speed`	number	`0.1`	How fast the photos travel outward. Negative values reverse the stream so photos sink into the center.
`rush`	number	`0.35`	How the photos accelerate as they near the edges. 0 is an even, calm zoom; 1 is true perspective, where photos rush past at the end.
`spiral`	number	`0`	How much the paths curl as photos travel outward. 0 flies them straight; negative values curl the other way.
`blankArea`	number	`0.2`	Size of the empty center the photos emerge from, as a fraction of the half-diagonal. Room for a headline.
`size`	number	`0.17`	Photo height, as a fraction of the shorter side, when a photo is halfway out. Photos grow as they travel.
`sizeVariance`	number	`0.25`	How much photo sizes vary, for a sense of depth.
`aspect`	number	`0.8`	Width divided by height of the photos in the stream. Images are cropped to fill.
`radius`	number	`12`	Corner radius in pixels at the reference size. Smaller photos scale it down.
`border`	number	`0`	Print border, as a fraction of the photo size. With a border, each photo develops on blank paper of the border color, like a darkroom print.
`borderColor`	string	`"#FFFFFF"`	Color of the print border and paper.
`rim`	number	`0.12`	Strength of the hairline edge highlight around each photo.
`roll`	number	`0`	Maximum random tilt of each photo in degrees, like scattered prints.
`develop`	number	`0.85`	How photos appear as they emerge. 0 fades them in; 1 develops them tone by tone, monochrome first, then in color.
`edgeFade`	number	`0.35`	How softly photos dissolve into the background at the edges of the frame.
`shadow`	number	`0.5`	Strength of the soft shadow under each photo.
`hoverSlow`	number	`0.6`	How much the stream slows while the pointer is over it, so photos are easy to catch.
`catchOnHover`	boolean	`true`	Hovering a photo catches it: it stops in place and lifts while the rest of the stream flows past.
`draggable`	boolean	`true`	Drag to steer the stream. Pulling away from the center flies forward and pushing toward it flies back, while dragging around the center turns it. Both keep momentum.
`wheel`	boolean	`true`	Scroll to fly through the stream. Set false to leave page scrolling untouched.
`captions`	boolean	`true`	Show the title and subtitle under an opened photo.
`backgroundColor`	string	`"transparent"`	Background of the component. Photos develop out of it, and captions adapt to it.
`paused`	boolean	`false`	Stops the stream. Space toggles it too, and reduced-motion users get a still field that only moves on input.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`ariaLabel`	string	`"Contact sheet…"`	Accessible description of the gallery and how to use it.
`onOpen`	(item, index) => void	`—`	Called when a photo is opened by a click, Enter or the ref.
`onClose`	() => void	`—`	Called when the opened photo returns to the stream.
`ref`	{ boost, open, close }	`—`	boost(amount) flies forward or back, open(index?) opens a photo, close() returns it.
`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 streamed from the center, cycling through the collection in order. Images must allow cross-origin loading. Title and subtitle caption an opened photo.

Defaultstudio portrait collection

countnumber

How many photos are in flight at once, up to 96.

Default18

speednumber

How fast the photos travel outward. Negative values reverse the stream so photos sink into the center.

Default0.1

rushnumber

How the photos accelerate as they near the edges. 0 is an even, calm zoom; 1 is true perspective, where photos rush past at the end.

Default0.35

spiralnumber

How much the paths curl as photos travel outward. 0 flies them straight; negative values curl the other way.

Default0

blankAreanumber

Size of the empty center the photos emerge from, as a fraction of the half-diagonal. Room for a headline.

Default0.2

sizenumber

Photo height, as a fraction of the shorter side, when a photo is halfway out. Photos grow as they travel.

Default0.17

sizeVariancenumber

How much photo sizes vary, for a sense of depth.

Default0.25

aspectnumber

Width divided by height of the photos in the stream. Images are cropped to fill.

Default0.8

radiusnumber

Corner radius in pixels at the reference size. Smaller photos scale it down.

Default12

bordernumber

Print border, as a fraction of the photo size. With a border, each photo develops on blank paper of the border color, like a darkroom print.

Default0

borderColorstring

Color of the print border and paper.

Default"#FFFFFF"

rimnumber

Strength of the hairline edge highlight around each photo.

Default0.12

rollnumber

Maximum random tilt of each photo in degrees, like scattered prints.

Default0

developnumber

How photos appear as they emerge. 0 fades them in; 1 develops them tone by tone, monochrome first, then in color.

Default0.85

edgeFadenumber

How softly photos dissolve into the background at the edges of the frame.

Default0.35

shadownumber

Strength of the soft shadow under each photo.

Default0.5

hoverSlownumber

How much the stream slows while the pointer is over it, so photos are easy to catch.

Default0.6

catchOnHoverboolean

Hovering a photo catches it: it stops in place and lifts while the rest of the stream flows past.

Defaulttrue

draggableboolean

Drag to steer the stream. Pulling away from the center flies forward and pushing toward it flies back, while dragging around the center turns it. Both keep momentum.

Defaulttrue

wheelboolean

Scroll to fly through the stream. Set false to leave page scrolling untouched.

Defaulttrue

captionsboolean

Show the title and subtitle under an opened photo.

Defaulttrue

backgroundColorstring

Background of the component. Photos develop out of it, and captions adapt to it.

Default"transparent"

pausedboolean

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

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

ariaLabelstring

Accessible description of the gallery and how to use it.

Default"Contact sheet…"

onOpen(item, index) => void

Called when a photo is opened by a click, Enter or the ref.

Default—

onClose() => void

Called when the opened photo returns to the stream.

Default—

ref{ boost, open, close }

boost(amount) flies forward or back, open(index?) opens a photo, close() returns it.

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

studio portrait collection

Photos streamed from the center, cycling through the collection in order. Images must allow cross-origin loading. Title and subtitle caption an opened photo.

count

number

18

How many photos are in flight at once, up to 96.

speed

number

0.1

How fast the photos travel outward. Negative values reverse the stream so photos sink into the center.

rush

number

0.35

How the photos accelerate as they near the edges. 0 is an even, calm zoom; 1 is true perspective, where photos rush past at the end.

spiral

number

0

How much the paths curl as photos travel outward. 0 flies them straight; negative values curl the other way.

blankArea

number

0.2

Size of the empty center the photos emerge from, as a fraction of the half-diagonal. Room for a headline.

size

number

0.17

Photo height, as a fraction of the shorter side, when a photo is halfway out. Photos grow as they travel.

sizeVariance

number

0.25

How much photo sizes vary, for a sense of depth.

aspect

number

0.8

Width divided by height of the photos in the stream. Images are cropped to fill.

radius

number

12

Corner radius in pixels at the reference size. Smaller photos scale it down.

border

number

0

Print border, as a fraction of the photo size. With a border, each photo develops on blank paper of the border color, like a darkroom print.

borderColor

string

"#FFFFFF"

Color of the print border and paper.

rim

number

0.12

Strength of the hairline edge highlight around each photo.

roll

number

0

Maximum random tilt of each photo in degrees, like scattered prints.

develop

number

0.85

How photos appear as they emerge. 0 fades them in; 1 develops them tone by tone, monochrome first, then in color.

edgeFade

number

0.35

How softly photos dissolve into the background at the edges of the frame.

shadow

number

0.5

Strength of the soft shadow under each photo.

hoverSlow

number

0.6

How much the stream slows while the pointer is over it, so photos are easy to catch.

catchOnHover

boolean

true

Hovering a photo catches it: it stops in place and lifts while the rest of the stream flows past.

draggable

boolean

true

Drag to steer the stream. Pulling away from the center flies forward and pushing toward it flies back, while dragging around the center turns it. Both keep momentum.

wheel

boolean

true

Scroll to fly through the stream. Set false to leave page scrolling untouched.

captions

boolean

true

Show the title and subtitle under an opened photo.

backgroundColor

string

"transparent"

Background of the component. Photos develop out of it, and captions adapt to it.

paused

boolean

false

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

dpr

number

2

Maximum device pixel ratio for the canvas.

ariaLabel

string

"Contact sheet…"

Accessible description of the gallery and how to use it.

onOpen

(item, index) => void

—

Called when a photo is opened by a click, Enter or the ref.

onClose

() => void

—

Called when the opened photo returns to the stream.

ref

{ boost, open, close }

—

boost(amount) flies forward or back, open(index?) opens a photo, close() returns it.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.