Cursor Grid

A highly optimized <canvas> implementation of a grid that lights up based on cursor proximity and triggers ripples on click. Since it uses requestAnimationFrame and canvas 2D, it has a negligible impact on DOM performance, easily running at 60fps on huge containers.

Installation

CLI

npx @modus-ui/cli add cursor-grid

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/cursor-grid.tsx.
3. Paste the code.

Usage

import { CursorGrid } from "@/components/ui/cursor-grid";

export default function Example() {
  return (
    <div className="relative h-screen w-full bg-black">
      <CursorGrid color="hsl(var(--primary))" cellSize={25} radius={150} />
    </div>
  );
}

Props