Twisting Gallery
Images spinning through a lazy twist as they scroll past, blurring with speed and swaying across the column
Customize
Props
30| 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 | 80 | 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 twist harder. |
sway | number | 0.2 | Horizontal sway of the column as a fraction of the container width. |
tilt | number | 10 | Maximum random forward tilt in degrees a tile starts and ends with. |
twistMin | number | 200 | Smallest turn in degrees a tile spins through while passing. |
twistMax | number | 290 | Largest turn in degrees a tile spins through while passing. |
roll | number | 10 | Maximum random roll in degrees a tile starts and ends with. |
depth | number | 150 | How far in pixels a tile sinks into the screen while centred. |
blur | number | 15 | Maximum motion blur in pixels at full scroll speed, 0 to disable. |
blurSensitivity | number | 40 | Scroll speed in pixels per frame that counts as full speed. |
desaturate | number | 1 | How much colour drains at full speed from 0 to 1. |
seed | number | 1 | Seed for the per tile rotations. |
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(255, 255, 255, 0.6)" | 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.
80borderRadiusnumberCorner radius of the tiles in pixels.
7grayscalenumberHow far the images are drained of colour from 0 to 1.
1perspectivenumberPerspective distance in pixels, smaller values twist harder.
900swaynumberHorizontal sway of the column as a fraction of the container width.
0.2tiltnumberMaximum random forward tilt in degrees a tile starts and ends with.
10twistMinnumberSmallest turn in degrees a tile spins through while passing.
200twistMaxnumberLargest turn in degrees a tile spins through while passing.
290rollnumberMaximum random roll in degrees a tile starts and ends with.
10depthnumberHow far in pixels a tile sinks into the screen while centred.
150blurnumberMaximum motion blur in pixels at full scroll speed, 0 to disable.
15blurSensitivitynumberScroll speed in pixels per frame that counts as full speed.
40desaturatenumberHow much colour drains at full speed from 0 to 1.
1seednumberSeed for the per tile rotations.
1overshootnumberFraction 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(255, 255, 255, 0.6)"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