Dolly Gallery
Images stacked into the distance that the camera dollies through on scroll, each one fading in from the depth and slipping past the lens
Customize
Props
27| 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.
8 Unsplash photosinfinitebooleanLoop the stack so it can be scrolled forever in either direction.
trueitemWidthnumberMaximum width of an image in pixels at the focus depth. Shrinks to fit narrow containers.
340aspectRationumberImage width divided by height.
0.8borderRadiusnumberCorner radius of the images in pixels.
7grayscalenumberHow far the images are drained of colour, 0 to 1.
1perspectivenumberPerspective distance in pixels. Smaller values exaggerate the depth.
1000spacingnumberDepth in pixels between consecutive images. Also the scroll distance per image.
800spreadnumberSideways offset of each image as a fraction of its width, alternating sides.
0.8scatternumberVertical scatter of each image as a fraction of its height.
0.1revealRangenumberImages this many steps deeper than the focus are still faintly visible.
1.5passRangenumberImages this many steps in front of the focus are still faintly visible.
1parallaxXnumberHow far the focused image follows the pointer sideways, as a fraction of its width.
0.12parallaxYnumberHow far the focused image follows the pointer vertically, as a fraction of its height.
0.06parallaxSmoothnumberPointer follow damping. 0 snaps, 1 trails far behind.
0.85tiltnumberDegrees the focused image tilts towards the pointer while scrolling fast.
4pulsenumberHow much the focused image swells while scrolling fast. 0.03 is 3 percent.
0.03driftnumberHow far the stack drifts against the scroll direction, as a fraction of image height.
0.08smoothnumberScroll follow damping. 0 is instant, 1 is very loose.
0.85wheelSpeednumberMultiplier applied to wheel and trackpad deltas.
1dragSpeednumberMultiplier applied to pointer drag deltas.
1.5autoScrollnumberPixels per second the camera travels by itself. 0 disables.
0pauseOnHoverbooleanStop the travel while the pointer is over the gallery.
truebackgroundColorstringColour behind the images.
"transparent"onIndexChange(index: number) => voidFired when the image nearest the focus depth changes.
—classNamestringExtra classes for the outer container.
—childrenReactNodeContent layered above the gallery.
—