Infinite Gallery
3D infinite scrolling image gallery with drag and parallax
infinite-gallery-tw
Customize
Grid
5
14
110
2
0.06
Interaction
1
8
0.9
0.5
Fog & Color
120
320
Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | string | number | "100%" | Container width |
| height | string | number | "100%" | Container height |
| className | string | "" | Additional CSS classes for styling |
| images | GalleryImage[] | DEFAULT_IMAGES | Array of images with url + intrinsic dimensions ({ url, width, height }) |
| density | number | 5 | Number of images per grid cell (1–15) |
| imageSize | number | 14 | Base size of each image plane in world units (4–40) |
| cellSize | number | 110 | Grid cell size in world units (30–300) |
| viewRange | number | 2 | How far (in cells) to render around the camera (1–4) |
| fogNear | number | 120 | Fog start distance (10–500) |
| fogFar | number | 320 | Fog end distance (50–800) |
| dragSpeed | number | 1 | Drag / scroll sensitivity (0.1–5) |
| driftAmount | number | 8 | Mouse-follow parallax drift amount (0–20) |
| friction | number | 0.9 | Velocity decay (0 = instant stop, 1 = never stops) |
| autoZoom | boolean | false | Automatically zoom forward continuously |
| autoZoomSpeed | number | 0.5 | Speed of auto-zoom in world units per frame (0.1–3) |
| imageRadius | number | 0.06 | Border radius on images (0–1, fraction of short edge) |
| allowImageFocusOnClick | boolean | true | Allow clicking images to focus/zoom on them |
| backgroundColor | string | "#000000" | Background color (hex) |
| fogColor | string | "#000000" | Fog color — usually matches background (hex) |