Retro Grid Background

Installation

npx kinetic-ui-cli@latest add retro-grid

How It Works

The RetroGrid component uses pure CSS backgrounds (linear gradients) and 3D transforms (rotateX with perspective) to create an infinitely panning 3D floor grid. It is highly performant because it relies solely on CSS hardware-accelerated animations rather than canvas or WebGL.

Usage Guide

1. Import the Component

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

import { RetroGrid } from "@/components/creative/retro-grid";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { RetroGrid } from "@/components/creative/retro-grid";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <RetroGrid
        angle{10}
        gridSize{10}
      />
    </div>
  );
}