background

GridFadeBackground

Grid pattern with center fade mask.

Playground

modegridColorgridOpacitybackgroundLabel

Scroll-based previews need you to scroll into view.

Live preview

Move mouse over grid

Code

<GridFadeBackground
  mode="mouse"
  gridColor="#a78bfa"
  gridOpacity={0.12}
  background="#0a0a0a"
  className="h-48 rounded-xl"
>
  <div className="relative z-10 flex h-full items-center justify-center text-sm">
    Move mouse over grid
  </div>
</GridFadeBackground>

Props

Prop	Type	Default	Description
mode	static \| mouse	static	mouse = focus follows pointer
followDuration	number	0.35	Mask follow smoothing (seconds)
gridColor	string	#ffffff	Grid line color (hex or rgb)
gridOpacity	number	0.08	Grid line opacity (0–1)
background	string	#0a0a0a	Canvas background color