Grid Glow Background

Add a faint grid, a warm glow, and shaded edges behind a hero section.

Dependencies: No extra packages
Size: 139 lines
Controls: 8 controls

example.tsx

1import { GridGlowBackground } from "@/components/onycx/grid-glow-background";23export default function Example() {4  return (5    <GridGlowBackground6      glow={"#f16001"}7      mid={"#d12f00"}8      deep={"#800900"}9      dark={"#210604"}10      base={"#090909"}11      gridSize={80}12      gridOpacity={0.031}13      minHeight={920}14    />15  );16}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/grid-glow-background.json

1 · Dependencies

None beyond React and Tailwind.

2 · Copy the source

components/onycx/grid-glow-background.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the grid-glow-background.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
children	ReactNode	—	Rendered above every layer. Without children the original hero renders: topline, two-line title, artwork and a footer row with a pill link.
glow / mid / deep / dark / base	string	"#f16001" / "#d12f00" / "#800900" / "#210604" / "#090909"	Gradient stops at 0 / 28 / 52 / 76 / 100%; base also tints the vignette (75% top, 91% bottom).
gridSize / gridOpacity	number	80 / 0.031	Cell size and line strength; masked from transparent on the left to full on the right.
minHeight / height	number / string	920 / "min(100svh, 1120px)"	Section sizing; pass className for other heights.
image / imageAlt	string	"/media/hand-hero/hero-hand.webp"	Artwork of the default hero (ignored with children).

Behaviour notes

Grid and vignette layers are aria-hidden with pointer-events: none; the section isolates its stacking context so they stay behind children.
Pure CSS with no client JavaScript, so it is safe in server components. The original's GSAP title and artwork entrance is not part of this background.
The default artwork points to /media/hand-hero/hero-hand.webp; replace it with your own. Below 600px it widens to 145% and the section clips it, so the page never scrolls sideways.

Pattern origin

The OFFGRID studio hero: radial-gradient(ellipse at 49% 68%, #f16001 0%, #d12f00 28%, #800900 52%, #210604 76%, #090909 100%), 1px #ffffff08 grid lines every 80px masked linear-gradient(90deg, transparent, black), and a #090909bf → transparent 25% / 65% → #090909e8 vignette, on a min-height 920px, min(100svh, 1120px) section with the uppercase clamp(65px, 8.5vw, 134px) title behind the hand-and-sphere artwork.

#background#glow#grid#hero#gradient