Bend Gallery

A column of images that bends away as it scrolls

bend-gallery-tw

Customize

Infinite

Item Width

300px

Aspect Ratio

0.80

Gap

-112px

Border Radius

7px

Grayscale

1.00

Perspective

900px

Bend Angle

90°

Bend Curve

0.60

Depth

800px

Depth Focus

8.0

Lift

40%

Fade

1.00

Fade Curve

3.00

Overshoot

0.20

Smooth

0.80

Wheel Speed

1.0

Drag Speed

1.5

Auto Scroll

0px/s

Pause On HoverVignette

Vignette

Props

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.

Defaultbuilt-in set

infiniteboolean

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

Defaulttrue

itemWidthnumber

Maximum width of a tile in pixels, shrinks to fit narrow containers.

Default300

aspectRationumber

Tile width divided by height.

Default0.8

gapnumber

Vertical gap between tiles in pixels, negative values overlap them.

Default-112

borderRadiusnumber

Corner radius of the tiles in pixels.

Default7

grayscalenumber

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

Default1

perspectivenumber

Perspective distance in pixels, smaller values bend harder.

Default900

bendAnglenumber

Rotation in degrees a tile reaches at the top and bottom edge.

Default90

bendCurvenumber

Shape of the bend from 0 for a hard fold to 1 for a smooth arc.

Default0.6

depthnumber

How far in pixels a tile sinks into the screen while centred.

Default800

depthFocusnumber

How the sinking is spread, higher values keep it to the centre.

Default8

liftnumber

Vertical squeeze towards the centre as a percentage of tile height.

Default40

fadenumber

How strongly edge tiles darken and desaturate from 0 to 1.

Default1

fadeCurvenumber

Curve of the fade, higher values keep the centre bright longer.

Default3

overshootnumber

Fraction of the viewport height beyond the edges a tile keeps animating.

Default0.2

smoothnumber

Scroll follow damping from 0 for instant to 1 for very loose.

Default0.8

wheelSpeednumber

Multiplier applied to wheel and trackpad deltas.

Default1

dragSpeednumber

Multiplier applied to pointer drag deltas.

Default1.5

autoScrollnumber

Pixels per second the column drifts by itself, 0 to disable.

Default0

pauseOnHoverboolean

Stop the drift while the pointer is over the gallery.

Defaulttrue

vignetteboolean

Draw a radial vignette over the gallery.

Defaultfalse

vignetteColorstring

Colour of the vignette edge, usually semi transparent.

Default"rgba(0, 0, 0, 0.5)"

backgroundColorstring

Colour behind the tiles, transparent by default so the page shows through.

Default"transparent"

onIndexChange(index: number) => void

Fired when the tile nearest the centre changes.

Defaultundefined

classNamestring

Extra classes for the outer container.

Defaultundefined

childrenReactNode

Content layered above the gallery.

Defaultundefined

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.