Infinite Panning Grid

Installation

npx kinetic-ui-cli@latest add infinite-panning-grid

How It Works

To achieve a true "infinite" pan without complex WebGL shaders, we utilize a 2x2 grid of identical cloned "tiles".

Inside a requestAnimationFrame loop, we accumulate X and Y translation based on the distance of the cursor from the center of the screen. When the translation offset exceeds the width/height of a single tile, we use modulo logic to seamlessly snap it back to 0.

Because we render a 2x2 grid, this sudden snap is completely invisible to the user, creating the illusion of infinite space.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { InfinitePanningGrid } from "@/components/creative/infinite-panning-grid";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { InfinitePanningGrid } from "@/components/creative/infinite-panning-grid";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <InfinitePanningGrid
        items{/* value */}
        speed{10}
      />
    </div>
  );
}