Spotlight Grid
hotThe Linear/Vercel hero grid: a faint pattern with a pointer-following spotlight that reveals brighter lines and a colour wash. Driven by two CSS variables from a single rAF — zero re-renders.
csspointermask3 files · 163 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/spotlight-grid.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs spotlight-gridUsage
import { SpotlightGrid } from "@/components/opus/backgrounds/spotlight-grid";
<SpotlightGrid pattern="lines" className="absolute inset-0" />API
| Prop | Type | Default | Description |
|---|---|---|---|
| pattern | "lines" | "dots" | "cross" | "lines" | Grid style. |
| lineColor / glowColor | string | — | Resting and revealed line colours (any CSS colour). |
| wash | string | — | Soft colour under the spotlight. |
| cell / radius | number | 44 / 260 | Cell size and spotlight radius (px). |
| fade | boolean | true | Fade the grid toward the edges. |
| className | string | — | Wrapper classes — `absolute inset-0` to fill a relative parent. |
| children | ReactNode | — | Content rendered on top. |
Notes
- No canvas, no WebGL — only CSS gradients/masks and compositor-friendly transform animations.
- Server-component safe unless marked otherwise; animations stop under
prefers-reduced-motion. - Client component (it listens to the pointer); everything visual is CSS.