Transform image browsing into an endless spatial grid for portfolios, campaigns, and visual archives that need more depth than a flat gallery.
Infinite Grid Gallery turns a flat collection of visuals into a field you can move through. The gallery stops feeling like a page section and starts feeling like space.
Use Infinite Grid Gallery when a portfolio, campaign archive, or image-led product story needs more presence than a normal grid. It works best when the visitor is supposed to browse by movement, not compare every item in one glance. The page job is exploration: images should keep arriving without making the user feel trapped in a canvas.
The production risk is orientation. Infinite galleries can become impressive and useless very quickly if the user loses their position, cannot open a real item, or cannot access the same content without WebGL. The fallback should be a clean, crawlable gallery grid in DOM order.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
A creative studio can use Infinite Grid Gallery on a selected-work page where the goal is not fast comparison, but atmosphere and curiosity. The visitor moves through a field of project stills, selects a focused image, and enters the case study. The outcome is exploration: the work feels abundant without dumping every thumbnail into a static wall.
Not for ecommerce catalogues, pricing pages, comparison grids, documentation, or routes where users need fast scanning.
Not for image sets where every item must be visible at once before the visitor can make a decision.
Cap device pixel ratio, compress textures, lazy-load image assets carefully, pause rendering when offscreen, and dispose of geometries, materials, and textures on route change. Avoid turning one gallery into a GPU donation box.
The gallery items need text equivalents, real links, and a fallback list or grid. On mobile, reduce camera movement, limit texture count, or switch to a static gallery. Reduced-motion users should get the same images without infinite movement.
| Prop | Type | Default | Description |
|---|---|---|---|
columns | number | 4 | Desktop grid column count. |
gap | number | 44 | Spacing between grid images. |
speed | number | 1 | Grid movement speed. |
imageScale | number | 1 | Scale applied to gallery images. |
Use it when an image-led portfolio, campaign archive, or visual showcase needs spatial browsing instead of a standard grid.
Yes. The same items should render as a normal HTML gallery or list when WebGL is unavailable, reduced motion is enabled, or the device cannot support the scene smoothly.
Only the visible and near-visible set should be active. The cost is driven by texture size, draw calls, and how much of the scene stays alive, not just the number of items in your database.
Every meaningful item should map to a real link, modal, or detail action. The WebGL surface can make the browsing feel dimensional, but the click path still needs standard navigation behavior.
Use a simplified grid, swipeable gallery, or reduced camera movement. A phone should not be forced through a desktop-scale infinite field.
Yes. A custom version should define image structure, texture treatment, camera rules, fallback layout, performance budget, source handoff, and implementation notes for the specific portfolio or launch context.
Need a custom effect? Tell us what to create.
