Scroll Bend

A strip of images that bulges or pinches with your scroll speed

scroll-bend-tw

Customize

Strength

1.00

Max Bend

0.38

Rest Bend

0.00

Axis Bias

0.75

Lens Radius

1.00

Response

0.32s

Wobble

0.25

Item Size

0.68

Aspect Ratio

1.35

Gap

16px

Radius

18px

Auto Scroll

50px/s

Wheel Speed

1.00

Drag Speed

1.00

Inertia

0.55s

Fade

0.16

Shade

0.22

Aberration

0.40

Quality

1.00

Pause On HoverSnapInfinitePaused

Props

Name	Type	Default	Description
`items`	(string \| { src: string; alt?: string })[]	`8 abstract images`	Images in the strip, as URLs or { src, alt } objects. Alt text goes into a hidden list that screen readers announce.
`orientation`	"vertical" \| "horizontal"	`"vertical"`	Direction the strip runs and scrolls.
`bend`	"convex" \| "concave" \| "direction"	`"direction"`	How speed shapes the lens. convex swells the middle toward you, concave pinches it, direction swells while scrolling forward and pinches while scrolling back.
`strength`	number	`1`	How quickly the bend builds as scrolling speeds up. Higher values bend fully at gentler speeds.
`maxBend`	number	`0.38`	Strongest bend that speed can add, from 0 to 0.45.
`restBend`	number	`0`	Bend the strip holds when it is still. Positive values bulge, negative values pinch.
`axisBias`	number	`0.75`	How much the lens also stretches along the strip. 0 only widens the silhouette and keeps the gaps straight, 1 is a full fisheye where the gaps bow.
`lensRadius`	number	`1`	Size of the lens relative to the visible strip. Smaller values gather the bend into the middle.
`response`	number	`0.32`	Seconds the bend takes to follow a change in speed.
`wobble`	number	`0.25`	Overshoot as the bend springs back, from 0 (none) to 1 (jelly).
`itemSize`	number	`0.68`	Tile size across the strip, as a fraction of the container's shorter side.
`aspectRatio`	number	`1.35 vertical, 0.78 horizontal`	Tile width divided by height. Images are cropped to fill their tile.
`gap`	number	`16`	Space between tiles in pixels.
`radius`	number	`18`	Corner radius of the tiles in pixels.
`autoScroll`	number	`50`	Drift speed in pixels per second while idle. It pauses briefly after any input. Negative values drift backward, 0 turns it off.
`pauseOnHover`	boolean	`false`	Stop the drift while the pointer is over the strip.
`wheelSpeed`	number	`1`	Multiplier for wheel and trackpad scrolling. 0 leaves the page scroll untouched.
`dragSpeed`	number	`1`	Multiplier for mouse and touch dragging. 0 turns dragging off.
`inertia`	number	`0.55`	Seconds of momentum after a flick. It also sets how softly wheel scrolling glides.
`snap`	boolean	`true`	Settle on the nearest image when scrolling stops. Applies when autoScroll is 0. A single wheel notch then steps one image.
`infinite`	boolean	`true`	Loop the images endlessly. When off, the ends stretch and spring back, and the drift turns around.
`fade`	number	`0.16`	Length of the fade to transparent at each end, as a fraction of the strip's length.
`shade`	number	`0.22`	How much the tiles darken toward the ends, from 0 to 1.
`aberration`	number	`0.4`	Colour fringing that appears as the lens bends, from 0 to 1.
`paused`	boolean	`false`	Stop the drift. Scrolling, dragging and the keyboard still work. Reduced-motion users get no drift or bend.
`quality`	number	`1`	Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.
`onIndexChange`	(index: number) => void	`—`	Called with the index of the image nearest the centre whenever it changes.
`ariaLabel`	string	`"Image gallery"`	Accessible name of the carousel. When it has focus, the arrow keys and Page Up/Down step one image, Home and End jump to the first and last.
`ref`	{ next, previous, goTo, impulse }	`—`	next() and previous() step one image, goTo(index) glides to an image, impulse(velocity) pushes the strip in pixels per second.
`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(string | { src: string; alt?: string })[]

Images in the strip, as URLs or { src, alt } objects. Alt text goes into a hidden list that screen readers announce.

Default8 abstract images

orientation"vertical" | "horizontal"

Direction the strip runs and scrolls.

Default"vertical"

bend"convex" | "concave" | "direction"

How speed shapes the lens. convex swells the middle toward you, concave pinches it, direction swells while scrolling forward and pinches while scrolling back.

Default"direction"

strengthnumber

How quickly the bend builds as scrolling speeds up. Higher values bend fully at gentler speeds.

Default1

maxBendnumber

Strongest bend that speed can add, from 0 to 0.45.

Default0.38

restBendnumber

Bend the strip holds when it is still. Positive values bulge, negative values pinch.

Default0

axisBiasnumber

How much the lens also stretches along the strip. 0 only widens the silhouette and keeps the gaps straight, 1 is a full fisheye where the gaps bow.

Default0.75

lensRadiusnumber

Size of the lens relative to the visible strip. Smaller values gather the bend into the middle.

Default1

responsenumber

Seconds the bend takes to follow a change in speed.

Default0.32

wobblenumber

Overshoot as the bend springs back, from 0 (none) to 1 (jelly).

Default0.25

itemSizenumber

Tile size across the strip, as a fraction of the container's shorter side.

Default0.68

aspectRationumber

Tile width divided by height. Images are cropped to fill their tile.

Default1.35 vertical, 0.78 horizontal

gapnumber

Space between tiles in pixels.

Default16

radiusnumber

Corner radius of the tiles in pixels.

Default18

autoScrollnumber

Drift speed in pixels per second while idle. It pauses briefly after any input. Negative values drift backward, 0 turns it off.

Default50

pauseOnHoverboolean

Stop the drift while the pointer is over the strip.

Defaultfalse

wheelSpeednumber

Multiplier for wheel and trackpad scrolling. 0 leaves the page scroll untouched.

Default1

dragSpeednumber

Multiplier for mouse and touch dragging. 0 turns dragging off.

Default1

inertianumber

Seconds of momentum after a flick. It also sets how softly wheel scrolling glides.

Default0.55

snapboolean

Settle on the nearest image when scrolling stops. Applies when autoScroll is 0. A single wheel notch then steps one image.

Defaulttrue

infiniteboolean

Loop the images endlessly. When off, the ends stretch and spring back, and the drift turns around.

Defaulttrue

fadenumber

Length of the fade to transparent at each end, as a fraction of the strip's length.

Default0.16

shadenumber

How much the tiles darken toward the ends, from 0 to 1.

Default0.22

aberrationnumber

Colour fringing that appears as the lens bends, from 0 to 1.

Default0.4

pausedboolean

Stop the drift. Scrolling, dragging and the keyboard still work. Reduced-motion users get no drift or bend.

Defaultfalse

qualitynumber

Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.

Default1

onIndexChange(index: number) => void

Called with the index of the image nearest the centre whenever it changes.

Default—

ariaLabelstring

Accessible name of the carousel. When it has focus, the arrow keys and Page Up/Down step one image, Home and End jump to the first and last.

Default"Image gallery"

ref{ next, previous, goTo, impulse }

next() and previous() step one image, goTo(index) glides to an image, impulse(velocity) pushes the strip in pixels per second.

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

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

8 abstract images

Images in the strip, as URLs or { src, alt } objects. Alt text goes into a hidden list that screen readers announce.

orientation

"vertical" | "horizontal"

"vertical"

Direction the strip runs and scrolls.

bend

"convex" | "concave" | "direction"

"direction"

How speed shapes the lens. convex swells the middle toward you, concave pinches it, direction swells while scrolling forward and pinches while scrolling back.

strength

number

1

How quickly the bend builds as scrolling speeds up. Higher values bend fully at gentler speeds.

maxBend

number

0.38

Strongest bend that speed can add, from 0 to 0.45.

restBend

number

0

Bend the strip holds when it is still. Positive values bulge, negative values pinch.

axisBias

number

0.75

How much the lens also stretches along the strip. 0 only widens the silhouette and keeps the gaps straight, 1 is a full fisheye where the gaps bow.

lensRadius

number

1

Size of the lens relative to the visible strip. Smaller values gather the bend into the middle.

response

number

0.32

Seconds the bend takes to follow a change in speed.

wobble

number

0.25

Overshoot as the bend springs back, from 0 (none) to 1 (jelly).

itemSize

number

0.68

Tile size across the strip, as a fraction of the container's shorter side.

aspectRatio

number

1.35 vertical, 0.78 horizontal

Tile width divided by height. Images are cropped to fill their tile.

gap

number

16

Space between tiles in pixels.

radius

number

18

Corner radius of the tiles in pixels.

autoScroll

number

50

Drift speed in pixels per second while idle. It pauses briefly after any input. Negative values drift backward, 0 turns it off.

pauseOnHover

boolean

false

Stop the drift while the pointer is over the strip.

wheelSpeed

number

1

Multiplier for wheel and trackpad scrolling. 0 leaves the page scroll untouched.

dragSpeed

number

1

Multiplier for mouse and touch dragging. 0 turns dragging off.

inertia

number

0.55

Seconds of momentum after a flick. It also sets how softly wheel scrolling glides.

snap

boolean

true

Settle on the nearest image when scrolling stops. Applies when autoScroll is 0. A single wheel notch then steps one image.

infinite

boolean

true

Loop the images endlessly. When off, the ends stretch and spring back, and the drift turns around.

fade

number

0.16

Length of the fade to transparent at each end, as a fraction of the strip's length.

shade

number

0.22

How much the tiles darken toward the ends, from 0 to 1.

aberration

number

0.4

Colour fringing that appears as the lens bends, from 0 to 1.

paused

boolean

false

Stop the drift. Scrolling, dragging and the keyboard still work. Reduced-motion users get no drift or bend.

quality

number

1

Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.

onIndexChange

(index: number) => void

—

Called with the index of the image nearest the centre whenever it changes.

ariaLabel

string

"Image gallery"

Accessible name of the carousel. When it has focus, the arrow keys and Page Up/Down step one image, Home and End jump to the first and last.

ref

{ next, previous, goTo, impulse }

—

next() and previous() step one image, goTo(index) glides to an image, impulse(velocity) pushes the strip in pixels per second.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.