Interactive Grid

Heroes 80

About

A background grid of cells that light up under the pointer and fade out behind it like a trail, for hero sections and cards.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Interactive Grid to your project and fits it to your theme.

Code

How Interactive Grid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { InteractiveGrid } from "@/components/ui/interactive-grid";

export default function InteractiveGridDemo() {
  return (
    <div className="relative flex size-full min-h-80 items-center justify-center overflow-hidden">
      <p className="z-10 text-4xl font-semibold tracking-tighter">
        Move your pointer
      </p>
      <InteractiveGrid className="[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]" />
    </div>
  );
}