BannerPattern

The neon.com banner dot pattern as a live WebGL surface.

BannerPattern recreates neon.com’s banner dot pattern as a shader. The construction mirrors the source SVG: a square-dot grid masks a drifting color field — Neon green upper-left, sage bridging the middle, amber strengthening right, a cream hot spot in the corner, rust pooling low — so every dot samples whatever color sits behind it. Per-dot brightness jitter stands in for the source’s fractal-noise grain, and a dim haze of the same field glows behind the grid. Drag the dials — cell and dot size reshape the grid, haze lifts the glow, and the palettes re-tint the field:

Install

npx shadcn@latest add https://ui.neon.com/r/banner-pattern.json

Usage

import { BannerPattern } from "@/components/neon-ui/banner-pattern";

<div className="relative isolate overflow-hidden bg-black">
  <BannerPattern className="absolute inset-0" />
  <div className="relative">{content}</div>
</div>;

Props

How the dots get their color

The dots are never colored directly. The source SVG repeats an 8px tile as an alpha mask over blurred gradient ellipses; this shader does the same in one pass — build the color field, cut it with the grid, let each dot inherit the field at its position. Recoloring the whole surface is therefore just swapping the field palette; the grid never changes.

Accessibility

• The canvas is aria-hidden decoration; content stacks above it in the DOM.
• Renders one static frame under prefers-reduced-motion (and when speed is 0).
• Foreground text needs its own contrast — add a scrim overlay (the demo shows a bottom bg-gradient-to-t from-black/80 layer).
• Skips GL work entirely while the canvas is hidden, so it costs nothing behind overlays.