Inverted Dome

A draggable image grid curved like the inside of a dome

inverted-dome-tw

Customize

Tile Width

200px

Tile Height

200px

Gap

16px

Border Radius

16px

Curve

0.30

Curve Radius

1.50

Zoom

0.10

Tile Rotation

0°

Grayscale

1.00

Vignette

0.00

Auto Scroll X

0px/s

Auto Scroll Y

0px/s

Open On ClickEnable DragEnable Wheel

Drag Sensitivity

1.00

Wheel Sensitivity

0.50

Friction

0.90

Segments

Seed

Props

Name	Type	Default	Description
`images`	string[]	`—`	Image URLs tiled across the endless grid.
`tileWidth`	number	`200`	Tile width in CSS pixels.
`tileHeight`	number	`200`	Tile height in CSS pixels.
`gap`	number	`16`	Space between tiles in CSS pixels.
`borderRadius`	number	`16`	Corner radius of each tile in CSS pixels.
`curve`	number	`0.3`	How hard the lens stretches tiles towards the edges; 0 flattens the grid.
`curveRadius`	number	`1.5`	Reach of the lens as a multiple of the viewport diagonal; larger softens the bend.
`zoom`	number	`0.1`	Magnification at the centre of the lens.
`tileRotation`	number	`0`	Rotation of every tile in degrees.
`grayscale`	number	`0`	Desaturation of the images, 0 to 1.
`vignette`	number	`0`	Darkening towards the edges, 0 to 1.
`autoScrollX`	number	`0`	Continuous horizontal drift in pixels per second.
`autoScrollY`	number	`0`	Continuous vertical drift in pixels per second.
`enableDrag`	boolean	`true`	Allow dragging the grid with pointer or touch.
`enableWheel`	boolean	`true`	Allow scrolling the grid with the wheel or trackpad.
`axis`	"both" \| "x" \| "y"	`"both"`	Restrict movement to one axis.
`dragSensitivity`	number	`1`	Multiplier on drag distance.
`wheelSensitivity`	number	`0.5`	Multiplier on wheel delta.
`friction`	number	`0.9`	Velocity kept per frame after release, 0 to 0.99; higher glides longer.
`segments`	number	`20`	Vertices per tile edge; more bends smoother at a GPU cost.
`seed`	number	`0`	Shuffles which image lands on which cell.
`backgroundColor`	string	`"transparent"`	Backdrop behind the tiles.
`dpr`	number	`2`	Upper device pixel ratio bound.
`openOnClick`	boolean	`false`	Open the clicked tile in a lightbox that blurs the grid behind it.
`onTileClick`	(index: number, src: string) => void	`—`	Fires with the image index and URL when a tile is clicked.
`onLoad`	() => void	`—`	Fires once the atlas is ready and tiles are visible.
`className`	string	`—`	Extra classes for the root element.
`children`	ReactNode	`—`	Content layered above the grid.

imagesstring[]

Image URLs tiled across the endless grid.

Default—

tileWidthnumber

Tile width in CSS pixels.

Default200

tileHeightnumber

Tile height in CSS pixels.

Default200

gapnumber

Space between tiles in CSS pixels.

Default16

borderRadiusnumber

Corner radius of each tile in CSS pixels.

Default16

curvenumber

How hard the lens stretches tiles towards the edges; 0 flattens the grid.

Default0.3

curveRadiusnumber

Reach of the lens as a multiple of the viewport diagonal; larger softens the bend.

Default1.5

zoomnumber

Magnification at the centre of the lens.

Default0.1

tileRotationnumber

Rotation of every tile in degrees.

Default0

grayscalenumber

Desaturation of the images, 0 to 1.

Default0

vignettenumber

Darkening towards the edges, 0 to 1.

Default0

autoScrollXnumber

Continuous horizontal drift in pixels per second.

Default0

autoScrollYnumber

Continuous vertical drift in pixels per second.

Default0

enableDragboolean

Allow dragging the grid with pointer or touch.

Defaulttrue

enableWheelboolean

Allow scrolling the grid with the wheel or trackpad.

Defaulttrue

axis"both" | "x" | "y"

Restrict movement to one axis.

Default"both"

dragSensitivitynumber

Multiplier on drag distance.

Default1

wheelSensitivitynumber

Multiplier on wheel delta.

Default0.5

frictionnumber

Velocity kept per frame after release, 0 to 0.99; higher glides longer.

Default0.9

segmentsnumber

Vertices per tile edge; more bends smoother at a GPU cost.

Default20

seednumber

Shuffles which image lands on which cell.

Default0

backgroundColorstring

Backdrop behind the tiles.

Default"transparent"

dprnumber

Upper device pixel ratio bound.

Default2

openOnClickboolean

Open the clicked tile in a lightbox that blurs the grid behind it.

Defaultfalse

onTileClick(index: number, src: string) => void

Fires with the image index and URL when a tile is clicked.

Default—

onLoad() => void

Fires once the atlas is ready and tiles are visible.

Default—

classNamestring

Extra classes for the root element.

Default—

childrenReactNode

Content layered above the grid.

Default—

Name

Type

Default

Description

images

string[]

—

Image URLs tiled across the endless grid.

tileWidth

number

200

Tile width in CSS pixels.

tileHeight

number

200

Tile height in CSS pixels.

gap

number

16

Space between tiles in CSS pixels.

borderRadius

number

16

Corner radius of each tile in CSS pixels.

curve

number

0.3

How hard the lens stretches tiles towards the edges; 0 flattens the grid.

curveRadius

number

1.5

Reach of the lens as a multiple of the viewport diagonal; larger softens the bend.

zoom

number

0.1

Magnification at the centre of the lens.

tileRotation

number

0

Rotation of every tile in degrees.

grayscale

number

0

Desaturation of the images, 0 to 1.

vignette

number

0

Darkening towards the edges, 0 to 1.

autoScrollX

number

0

Continuous horizontal drift in pixels per second.

autoScrollY

number

0

Continuous vertical drift in pixels per second.

enableDrag

boolean

true

Allow dragging the grid with pointer or touch.

enableWheel

boolean

true

Allow scrolling the grid with the wheel or trackpad.

axis

"both" | "x" | "y"

"both"

Restrict movement to one axis.

dragSensitivity

number

1

Multiplier on drag distance.

wheelSensitivity

number

0.5

Multiplier on wheel delta.

friction

number

0.9

Velocity kept per frame after release, 0 to 0.99; higher glides longer.

segments

number

20

Vertices per tile edge; more bends smoother at a GPU cost.

seed

number

0

Shuffles which image lands on which cell.

backgroundColor

string

"transparent"

Backdrop behind the tiles.

dpr

number

2

Upper device pixel ratio bound.

openOnClick

boolean

false

Open the clicked tile in a lightbox that blurs the grid behind it.

onTileClick

(index: number, src: string) => void

—

Fires with the image index and URL when a tile is clicked.

onLoad

() => void

—

Fires once the atlas is ready and tiles are visible.

className

string

—

Extra classes for the root element.

children

ReactNode

—

Content layered above the grid.