BricksLab Catalog

@brickslab/ui-web

Canvas-based mouse-responsive grid heat effect with customizable cell size and influence radius

Move your mouse

Props

Prop	Type	Défaut	Requis	Description
`cellSize`	`number`	`20`	—	Size of each grid cell in pixels
`radius`	`number`	`100`	—	Influence radius of mouse position
`intensity`	`number`	`0.8`	—	Strength of the heat effect (0-1)

Usage

tsx

import { InteractiveGridPattern } from "@brickslab/ui-web";

export function MyComponent() {
  return (
    <div className="relative w-full h-screen">
      <InteractiveGridPattern cellSize={20} radius={100} intensity={0.8} />
      <div className="absolute inset-0 flex items-center justify-center">
        <h1 className="text-4xl font-bold text-white">Interactive Mouseover</h1>
      </div>
    </div>
  );
}

Variations

Large Cells Low Intensity

Large Cells

Fine Grid High Intensity

Fine & Intense