Grid Background
CSS-based grid, dot, or cross pattern with optional mouse-following radial mask.
Import
import { GridBackground } from "@igorao79/uivix";Playground
Move your mouse over the area
40px
300px
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "grid" | "dots" | "cross" | "grid" | Pattern style |
| size | number | 40 | Grid cell size in px |
| color | string | "rgba(255,255,255,0.08)" | Line/dot color |
| opacity | number | 1 | Pattern opacity |
| followMouse | boolean | false | Enable mouse-following radial mask |
| maskRadius | number | 300 | Radial mask radius in px |
| className | string | fixed inset-0 ... | CSS class |