Spatial Grid Image Explorer

This is a Spatial Grid Image Explorer. It maps a collection of high-resolution images onto an infinite 2D canvas, allowing users to pan spatially rather than scrolling linearly. Its function is to provide an immersive, map-like navigation experience for visual portfolios, shifting the paradigm from vertical feeds to omnidirectional exploration.

Specs

• Weight: ~5 KB. Zero external dependencies.
• Performance: High. All panning and zooming operations are delegated to GPU-accelerated CSS transform: translate3d and scale3d.
• Theming / Customization: The grid layout is controlled by a single CSS variable (--gridSize: 4).
• Responsiveness: Scales dynamically using viewport units (100vw, 100vh). [!] The minimap and zoom slider are hidden on screens smaller than 1200px via media queries to preserve touch interaction space.
• Graceful Degradation: If JavaScript fails, the interface is completely unusable as the canvas is locked at x:0, y:0 and hidden behind a loading state.

Anatomy

• HTML: A layered architecture. The .viewport handles scaling, the .canvas handles XY translation, and .map-container provides the HUD. The .focus-container acts as an invisible, clickable overlay for zooming into the active item.
• CSS (SCSS): The engine room. CSS Grid creates the massive 4x4 layout (grid-template-columns: repeat(var(--gridSize), 100vw)). CSS variables (--x, --y, --zoom) are used to drive the transforms, keeping the animation logic declarative.
• JS: The logic controller. It dynamically loads images to prevent initial render blocking, calculates array indices based on 2D coordinates (coords.y * gridSize + coords.x), and binds keyboard, mouse, and wheel inputs to the CSS variables.

Logic

The standout mechanism is the mathematical translation of a 1D array into a 2D spatial grid.

const panningTo = (i) => {
  coords.x = i % gridSize;
  coords.y = Math.floor(i / gridSize);
  canvas.style.setProperty("--x", coords.x);
  canvas.style.setProperty("--y", coords.y);
};

.canvas {
  transform: translate3d(
    calc((-100vw * var(--x)) - (var(--gap) * var(--x))),
    calc((-100vh * var(--y)) - (var(--gap) * var(--y))),
    0
  );
}

Instead of using complex JavaScript physics libraries to move the canvas, the script simply calculates the target column (modulo) and row (Math.floor) based on the image’s array index. It writes these integers to CSS variables. The CSS calc() function then multiplies these integers by the viewport dimensions and gaps, instantly snapping the translate3d matrix to the exact target coordinate with zero JavaScript rendering overhead.

Feel

Tactile and cinematic. Navigating via the minimap or arrow keys causes the camera to whip across the massive canvas with a satisfying cubic-bezier ease. The decoupling of the zoom level (.viewport) from the pan coordinates (.canvas) creates a distinct sense of depth, as if you are flying a drone over a physical exhibition space rather than clicking through a website.