Inverted Dome
An endless draggable image grid bent across a lens, so tiles stretch away towards the edges like the inside of a dome
Customize
Props
28| 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.
—tileWidthnumberTile width in CSS pixels.
200tileHeightnumberTile height in CSS pixels.
200gapnumberSpace between tiles in CSS pixels.
16borderRadiusnumberCorner radius of each tile in CSS pixels.
16curvenumberHow hard the lens stretches tiles towards the edges; 0 flattens the grid.
0.3curveRadiusnumberReach of the lens as a multiple of the viewport diagonal; larger softens the bend.
1.5zoomnumberMagnification at the centre of the lens.
0.1tileRotationnumberRotation of every tile in degrees.
0grayscalenumberDesaturation of the images, 0 to 1.
0vignettenumberDarkening towards the edges, 0 to 1.
0autoScrollXnumberContinuous horizontal drift in pixels per second.
0autoScrollYnumberContinuous vertical drift in pixels per second.
0enableDragbooleanAllow dragging the grid with pointer or touch.
trueenableWheelbooleanAllow scrolling the grid with the wheel or trackpad.
trueaxis"both" | "x" | "y"Restrict movement to one axis.
"both"dragSensitivitynumberMultiplier on drag distance.
1wheelSensitivitynumberMultiplier on wheel delta.
0.5frictionnumberVelocity kept per frame after release, 0 to 0.99; higher glides longer.
0.9segmentsnumberVertices per tile edge; more bends smoother at a GPU cost.
20seednumberShuffles which image lands on which cell.
0backgroundColorstringBackdrop behind the tiles.
"transparent"dprnumberUpper device pixel ratio bound.
2openOnClickbooleanOpen the clicked tile in a lightbox that blurs the grid behind it.
falseonTileClick(index: number, src: string) => voidFires with the image index and URL when a tile is clicked.
—onLoad() => voidFires once the atlas is ready and tiles are visible.
—classNamestringExtra classes for the root element.
—childrenReactNodeContent layered above the grid.
—