Mouse-Reactive Floating Image Gallery

This is a Mouse-Reactive Floating Image Gallery. It places an oversized grid of visual assets behind the viewport, hidden by the overflow. Its function is to provide an immersive, explorative navigation experience where the user’s cursor physically steers the scene across a scattered landscape of content.

Specs

• Weight: ~4 KB (logic only). Zero external libraries.
• Performance: Ultra-high. Relies on GPU-accelerated translate and scale properties.
• Theming / Customization: High. Tile positions are defined via CSS percentages (top, left), allowing for non-linear, “chaotic” layouts.
• Responsiveness: Fluid. Uses vmax units to ensure the gallery container always remains larger than the screen dimensions.
• Web APIs: Web Animations API (WAAPI).
• Graceful Degradation: Fails to a static centered grid. The interaction requires JavaScript to calculate the viewport-to-container delta.

Anatomy

The component operates as a decoupled viewport and content plane.

• HTML (The Skeleton): A singular #gallery container housing multiple .tile nodes. Each tile acts as a frame for an <img>.
• CSS (The Skin): Sets the canvas size to 140vmax to guarantee overflow. Tiles use nth-child selectors to assign unique background colors (serving as placeholders) and spatial coordinates.
• JS (The Nervous System): The move engine. It calculates the mouse position as a percentage of the window size and maps that value to the total overflow dimensions of the gallery.

Logic

The core mechanism is “Normalized Viewport Mapping”.

const xDecimal = mouseX / window.innerWidth,
      yDecimal = mouseY / window.innerHeight;

const panX = maxX * xDecimal * -1,
      panY = maxY * yDecimal * -1;

Instead of direct 1:1 pixel tracking, the script converts the cursor’s location into a decimal (0.0 to 1.0). This decimal is then multiplied by the “maximum available scroll” (maxX/maxY). This ensures that when the mouse is at the far right of the screen, the gallery is translated exactly to its far left edge, creating a perfect windowing effect regardless of screen resolution.

Feel

Viscous and weighted. The use of a 4000ms duration within the gallery.animate call provides a heavy, drifting momentum. The gallery doesn’t snap to the cursor; it follows it with an organic lag, making the interaction feel more like navigating through a physical liquid environment than a digital interface.