Bend Gallery
A column of images that folds over as it scrolls, each tile bending flat and sinking away at the edges
Customize
Props
27| Name | Type | Default | Description |
|---|---|---|---|
images | (string | { src: string; alt?: string })[] | built-in set | Images shown in the column, as URLs or objects with alt text. |
infinite | boolean | true | Loop the column so it can be scrolled forever in either direction. |
itemWidth | number | 300 | Maximum width of a tile in pixels, shrinks to fit narrow containers. |
aspectRatio | number | 0.8 | Tile width divided by height. |
gap | number | -112 | Vertical gap between tiles in pixels, negative values overlap them. |
borderRadius | number | 7 | Corner radius of the tiles in pixels. |
grayscale | number | 1 | How far the images are drained of colour from 0 to 1. |
perspective | number | 900 | Perspective distance in pixels, smaller values bend harder. |
bendAngle | number | 90 | Rotation in degrees a tile reaches at the top and bottom edge. |
bendCurve | number | 0.6 | Shape of the bend from 0 for a hard fold to 1 for a smooth arc. |
depth | number | 800 | How far in pixels a tile sinks into the screen while centred. |
depthFocus | number | 8 | How the sinking is spread, higher values keep it to the centre. |
lift | number | 40 | Vertical squeeze towards the centre as a percentage of tile height. |
fade | number | 1 | How strongly edge tiles darken and desaturate from 0 to 1. |
fadeCurve | number | 3 | Curve of the fade, higher values keep the centre bright longer. |
overshoot | number | 0.2 | Fraction of the viewport height beyond the edges a tile keeps animating. |
smooth | number | 0.8 | Scroll follow damping from 0 for instant to 1 for 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 column drifts by itself, 0 to disable. |
pauseOnHover | boolean | true | Stop the drift while the pointer is over the gallery. |
vignette | boolean | false | Draw a radial vignette over the gallery. |
vignetteColor | string | "rgba(0, 0, 0, 0.5)" | Colour of the vignette edge, usually semi transparent. |
backgroundColor | string | "transparent" | Colour behind the tiles, transparent by default so the page shows through. |
onIndexChange | (index: number) => void | undefined | Fired when the tile nearest the centre changes. |
className | string | undefined | Extra classes for the outer container. |
children | ReactNode | undefined | Content layered above the gallery. |
images(string | { src: string; alt?: string })[]Images shown in the column, as URLs or objects with alt text.
built-in setinfinitebooleanLoop the column so it can be scrolled forever in either direction.
trueitemWidthnumberMaximum width of a tile in pixels, shrinks to fit narrow containers.
300aspectRationumberTile width divided by height.
0.8gapnumberVertical gap between tiles in pixels, negative values overlap them.
-112borderRadiusnumberCorner radius of the tiles in pixels.
7grayscalenumberHow far the images are drained of colour from 0 to 1.
1perspectivenumberPerspective distance in pixels, smaller values bend harder.
900bendAnglenumberRotation in degrees a tile reaches at the top and bottom edge.
90bendCurvenumberShape of the bend from 0 for a hard fold to 1 for a smooth arc.
0.6depthnumberHow far in pixels a tile sinks into the screen while centred.
800depthFocusnumberHow the sinking is spread, higher values keep it to the centre.
8liftnumberVertical squeeze towards the centre as a percentage of tile height.
40fadenumberHow strongly edge tiles darken and desaturate from 0 to 1.
1fadeCurvenumberCurve of the fade, higher values keep the centre bright longer.
3overshootnumberFraction of the viewport height beyond the edges a tile keeps animating.
0.2smoothnumberScroll follow damping from 0 for instant to 1 for very loose.
0.8wheelSpeednumberMultiplier applied to wheel and trackpad deltas.
1dragSpeednumberMultiplier applied to pointer drag deltas.
1.5autoScrollnumberPixels per second the column drifts by itself, 0 to disable.
0pauseOnHoverbooleanStop the drift while the pointer is over the gallery.
truevignettebooleanDraw a radial vignette over the gallery.
falsevignetteColorstringColour of the vignette edge, usually semi transparent.
"rgba(0, 0, 0, 0.5)"backgroundColorstringColour behind the tiles, transparent by default so the page shows through.
"transparent"onIndexChange(index: number) => voidFired when the tile nearest the centre changes.
undefinedclassNamestringExtra classes for the outer container.
undefinedchildrenReactNodeContent layered above the gallery.
undefined