Grid Fade Background

Grid pattern with center fade mask and pointer follow mode.

Move pointer over grid

Installation

Requires MotionProvider and gsap. Add the grid fade background component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/grid-fade-background.json

Usage

import { GridFadeBackground } from "@/void/background/grid-fade-background"

<GridFadeBackground mode="mouse" gridColor="#22c55e" gridOpacity={0.35} className="min-h-[400px]">
  <Content />
</GridFadeBackground>

Examples

Default

Move pointer over grid

Code

import { GridFadeBackground } from "@/void/background/grid-fade-background"

<GridFadeBackground mode="mouse" gridColor="#22c55e" gridOpacity={0.35} className="min-h-[400px]">
  <Content />
</GridFadeBackground>