Spotlight Grid Background

A fine grid illuminated by a soft spotlight from above.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/spotlight-grid-background.json

Usage

tsx

import { SpotlightGridBackground } from "@/components/hangry-ui/shader/spotlight-grid-background";

<SpotlightGridBackground spotlightColor="#818cf8" gridSize={40} className="flex items-center justify-center p-12">
  <div>
    <h2>Your headline</h2>
    <p>Your content stays above the decorative background.</p>
  </div>
</SpotlightGridBackground>

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | spotlightColor | string | var(--primary) | Color of the soft light at the top. | | gridColor | string | var(--border) | Grid line color. | | gridSize | number | 48 | Grid cell size in pixels; minimum 8. | | children | ReactNode | — | Content placed above the decorative layers. | | Native div props | ComponentProps | — | Supports className, style, IDs, and accessibility attributes. |

Setup notes

Use Tailwind CSS v4 and the existing theme tokens. The root has a minimum height of 24rem; override it with className when needed. Decorative layers are hidden from assistive technology and do not intercept clicks. This background is static and needs no animation runtime.

Hovering gently brightens or moves the decorative layers. The frame and content stay still. Touch devices skip hover effects, and reduced motion disables movement.