Pixel Grid

Pixel Grid

Pro

Installation

ProRequires a Planes Pro license.

pnpm dlx shadcn add @useplanes/pixel-grid

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 163 Pro components · lifetime updates.

I have a license Get Pro

import { PixelGrid } from "@/components/ui/PixelGrid";

<div className="relative h-[560px] bg-black">
  <PixelGrid />
  <h1 className="absolute inset-0 grid place-items-center text-white">
    Your headline
  </h1>
</div>

Use cases

Hero background
A quiet matrix that reacts to the cursor without pulling focus from the copy.
Dashboard or status page
Reads as live hardware, so it suits uptime and systems pages.
Keynote or video loop
Record straight off the canvas for a slide background.