Dolly Gallery

Images stacked in depth that you fly through on scroll

dolly-gallery-tw

Customize

Infinite

Item Width

340

Aspect Ratio

0.80

Border Radius

Grayscale

1.00

Perspective

1000

Spacing

800

Spread

0.80

Scatter

0.10

Reveal Range

1.5

Pass Range

1.0

Parallax X

0.12

Parallax Y

0.06

Parallax Smooth

0.85

Tilt

4.0

Pulse

0.030

Drift

0.08

Smooth

0.85

Wheel Speed

1.0

Drag Speed

1.5

Auto Scroll

Pause On Hover

Props

Name	Type	Default	Description
`images`	(string \| { src: string; alt?: string })[]	`8 Unsplash photos`	Images stacked into the depth, as URLs or objects with alt text.
`infinite`	boolean	`true`	Loop the stack so it can be scrolled forever in either direction.
`itemWidth`	number	`340`	Maximum width of an image in pixels at the focus depth. Shrinks to fit narrow containers.
`aspectRatio`	number	`0.8`	Image width divided by height.
`borderRadius`	number	`7`	Corner radius of the images in pixels.
`grayscale`	number	`1`	How far the images are drained of colour, 0 to 1.
`perspective`	number	`1000`	Perspective distance in pixels. Smaller values exaggerate the depth.
`spacing`	number	`800`	Depth in pixels between consecutive images. Also the scroll distance per image.
`spread`	number	`0.8`	Sideways offset of each image as a fraction of its width, alternating sides.
`scatter`	number	`0.1`	Vertical scatter of each image as a fraction of its height.
`revealRange`	number	`1.5`	Images this many steps deeper than the focus are still faintly visible.
`passRange`	number	`1`	Images this many steps in front of the focus are still faintly visible.
`parallaxX`	number	`0.12`	How far the focused image follows the pointer sideways, as a fraction of its width.
`parallaxY`	number	`0.06`	How far the focused image follows the pointer vertically, as a fraction of its height.
`parallaxSmooth`	number	`0.85`	Pointer follow damping. 0 snaps, 1 trails far behind.
`tilt`	number	`4`	Degrees the focused image tilts towards the pointer while scrolling fast.
`pulse`	number	`0.03`	How much the focused image swells while scrolling fast. 0.03 is 3 percent.
`drift`	number	`0.08`	How far the stack drifts against the scroll direction, as a fraction of image height.
`smooth`	number	`0.85`	Scroll follow damping. 0 is instant, 1 is very loose.
`wheelSpeed`	number	`1`	Multiplier applied to wheel and trackpad deltas.
`dragSpeed`	number	`1.5`	Multiplier applied to pointer drag deltas.
`autoScroll`	number	`0`	Pixels per second the camera travels by itself. 0 disables.
`pauseOnHover`	boolean	`true`	Stop the travel while the pointer is over the gallery.
`backgroundColor`	string	`"transparent"`	Colour behind the images.
`onIndexChange`	(index: number) => void	`—`	Fired when the image nearest the focus depth changes.
`className`	string	`—`	Extra classes for the outer container.
`children`	ReactNode	`—`	Content layered above the gallery.

images(string | { src: string; alt?: string })[]

Images stacked into the depth, as URLs or objects with alt text.

Default8 Unsplash photos

infiniteboolean

Loop the stack so it can be scrolled forever in either direction.

Defaulttrue

itemWidthnumber

Maximum width of an image in pixels at the focus depth. Shrinks to fit narrow containers.

Default340

aspectRationumber

Image width divided by height.

Default0.8

borderRadiusnumber

Corner radius of the images in pixels.

Default7

grayscalenumber

How far the images are drained of colour, 0 to 1.

Default1

perspectivenumber

Perspective distance in pixels. Smaller values exaggerate the depth.

Default1000

spacingnumber

Depth in pixels between consecutive images. Also the scroll distance per image.

Default800

spreadnumber

Sideways offset of each image as a fraction of its width, alternating sides.

Default0.8

scatternumber

Vertical scatter of each image as a fraction of its height.

Default0.1

revealRangenumber

Images this many steps deeper than the focus are still faintly visible.

Default1.5

passRangenumber

Images this many steps in front of the focus are still faintly visible.

Default1

parallaxXnumber

How far the focused image follows the pointer sideways, as a fraction of its width.

Default0.12

parallaxYnumber

How far the focused image follows the pointer vertically, as a fraction of its height.

Default0.06

parallaxSmoothnumber

Pointer follow damping. 0 snaps, 1 trails far behind.

Default0.85

tiltnumber

Degrees the focused image tilts towards the pointer while scrolling fast.

Default4

pulsenumber

How much the focused image swells while scrolling fast. 0.03 is 3 percent.

Default0.03

driftnumber

How far the stack drifts against the scroll direction, as a fraction of image height.

Default0.08

smoothnumber

Scroll follow damping. 0 is instant, 1 is very loose.

Default0.85

wheelSpeednumber

Multiplier applied to wheel and trackpad deltas.

Default1

dragSpeednumber

Multiplier applied to pointer drag deltas.

Default1.5

autoScrollnumber

Pixels per second the camera travels by itself. 0 disables.

Default0

pauseOnHoverboolean

Stop the travel while the pointer is over the gallery.

Defaulttrue

backgroundColorstring

Colour behind the images.

Default"transparent"

onIndexChange(index: number) => void

Fired when the image nearest the focus depth changes.

Default—

classNamestring

Extra classes for the outer container.

Default—

childrenReactNode

Content layered above the gallery.

Default—

Name

Type

Default

Description

images

(string | { src: string; alt?: string })[]

8 Unsplash photos

Images stacked into the depth, as URLs or objects with alt text.

infinite

boolean

true

Loop the stack so it can be scrolled forever in either direction.

itemWidth

number

340

Maximum width of an image in pixels at the focus depth. Shrinks to fit narrow containers.

aspectRatio

number

0.8

Image width divided by height.

borderRadius

number

7

Corner radius of the images in pixels.

grayscale

number

1

How far the images are drained of colour, 0 to 1.

perspective

number

1000

Perspective distance in pixels. Smaller values exaggerate the depth.

spacing

number

800

Depth in pixels between consecutive images. Also the scroll distance per image.

spread

number

0.8

Sideways offset of each image as a fraction of its width, alternating sides.

scatter

number

0.1

Vertical scatter of each image as a fraction of its height.

revealRange

number

1.5

Images this many steps deeper than the focus are still faintly visible.

passRange

number

1

Images this many steps in front of the focus are still faintly visible.

parallaxX

number

0.12

How far the focused image follows the pointer sideways, as a fraction of its width.

parallaxY

number

0.06

How far the focused image follows the pointer vertically, as a fraction of its height.

parallaxSmooth

number

0.85

Pointer follow damping. 0 snaps, 1 trails far behind.

tilt

number

4

Degrees the focused image tilts towards the pointer while scrolling fast.

pulse

number

0.03

How much the focused image swells while scrolling fast. 0.03 is 3 percent.

drift

number

0.08

How far the stack drifts against the scroll direction, as a fraction of image height.

smooth

number

0.85

Scroll follow damping. 0 is instant, 1 is very loose.

wheelSpeed

number

1

Multiplier applied to wheel and trackpad deltas.

dragSpeed

number

1.5

Multiplier applied to pointer drag deltas.

autoScroll

number

0

Pixels per second the camera travels by itself. 0 disables.

pauseOnHover

boolean

true

Stop the travel while the pointer is over the gallery.

backgroundColor

string

"transparent"

Colour behind the images.

onIndexChange

(index: number) => void

—

Fired when the image nearest the focus depth changes.

className

string

—

Extra classes for the outer container.

children

ReactNode

—

Content layered above the gallery.