Interactive Grid

A grid whose cells light up under the pointer and fade out behind it.

Move your pointer

Installation#

pnpm dlx shadcn@latest add @balick/interactive-grid

Or pass the full URL: https://ui.balick.me/r/interactive-grid.json

Usage#

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

export function Hero() {
  return (
    <section className="relative overflow-hidden">
      <InteractiveGrid />
      <h1 className="relative">Move your pointer</h1>
    </section>
  )
}

Props#

Prop	Type	Default	Description
`cellSize` Side of a cell, in pixels. The grid follows the pointer over its parent.	`number`	40	Side of a cell, in pixels. The grid follows the pointer over its parent.