Infinite Grid

A high-performance, interactive 3D infinite grid component built with OGL as seen on phantom.land

Note: This component uses OGL & requires ogl and gsap as dependencies.

API

Prop Name	Type	Default	Description
`cardData`	`CardData[]`	`[]`	Data for every tile shown in the grid. Required.
`options`	`Partial<InfiniteGridOptions>`	`{}`	Optional overrides for layout, camera, and post-processing (see table below).

Option	Type	Default	Description
`gridCols`	`number`	`4`	Grid Columns .
`gridRows`	`number`	`4`	Grid Rows .
`gridGap`	`number`	`0`	Gap between squares.
`tileSize`	`number`	`2.4`	Tile size (OGL units).
`baseCameraZ`	`number`	`10`	Starting Z-distance of the camera.
`enablePostProcessing`	`boolean`	`true`	Toggle the post-processing pipeline.
`postProcessParams.distortionIntensity`	`number`	`-0.2`	Barrel / pincushion distortion strength (0 = none).
`postProcessParams.vignetteOffset`	`number`	`0.0`	Vignette offset; higher ⇒ smaller clear area.
`postProcessParams.vignetteDarkness`	`number`	`0.0`	Vignette darkness; higher ⇒ darker edges.

Field	Type	Required	Description
`title`	`string`	✓	Main heading text.
`badge`	`string`	✓	Badge label (render logic can be customised).
`description`	`string`	–	Longer body text.
`tags`	`string[]`	✓	Tag pills rendered at the bottom.
`date`	`string`	✓	Date string shown bottom-right.
`image`	`string`	–	URL for the tile's background image.

Event Name	Payload	Description
`tileClicked`	`{ card: CardData, index: number }`	Fired whenever a tile is clicked/tapped. The payload contains the clicked `CardData` object and its zero-based `index`.
`onTileLoaded`	-	Fired when all the images are loaded inside the tile.

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://registry.inspira-ui.com/infinite-grid.json"

npm

pnpm

bun

yarn

npm install ogl gsap

InfiniteGrid.vue

InfiniteGridClass.ts

DisposalManager.ts

EventHandler.ts

GridManager.ts

PostProcessShader.ts

createTexture.ts

shaders.ts

types.ts

Inspired from Phantom Land
Special thanks to Safak Dinc for the idea and for granting permission to include it here. You can find the original repository at infinite-grid. Your contribution is greatly appreciated!
Credits to kalix127 for porting this component.

On This Page