Infinite Gallery

3D infinite scrolling image gallery with drag and parallax

infinite-gallery-tw

Customize

Tweak the props live

Grid

Density5

Image Size14

Cell Size110

View Range2

Image Radius0.06

Interaction

Drag Speed1

Drift Amount8

Friction0.9

Auto Zoom

Auto Zoom Speed0.5

Focus on Click

Fog & Color

Fog Near120

Fog Far320

Background

#FFFFFF

Fog Color

#FFFFFF

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)

widthstring | number

Container width

Default:"100%"

heightstring | number

Container height

Default:"100%"

classNamestring

Additional CSS classes for styling

Default:""

imagesGalleryImage[]

Array of images with url + intrinsic dimensions ({ url, width, height })

Default:DEFAULT_IMAGES

densitynumber

Number of images per grid cell (1–15)

Default:5

imageSizenumber

Base size of each image plane in world units (4–40)

Default:14

cellSizenumber

Grid cell size in world units (30–300)

Default:110

viewRangenumber

How far (in cells) to render around the camera (1–4)

Default:2

fogNearnumber

Fog start distance (10–500)

Default:120

fogFarnumber

Fog end distance (50–800)

Default:320

dragSpeednumber

Drag / scroll sensitivity (0.1–5)

Default:1

driftAmountnumber

Mouse-follow parallax drift amount (0–20)

Default:8

frictionnumber

Velocity decay (0 = instant stop, 1 = never stops)

Default:0.9

autoZoomboolean

Automatically zoom forward continuously

Default:false

autoZoomSpeednumber

Speed of auto-zoom in world units per frame (0.1–3)

Default:0.5

imageRadiusnumber

Border radius on images (0–1, fraction of short edge)

Default:0.06

allowImageFocusOnClickboolean

Allow clicking images to focus/zoom on them

Default:true

backgroundColorstring

Background color (hex)

Default:"#000000"

fogColorstring

Fog color — usually matches background (hex)

Default:"#000000"