Brand

Grid background

The line grid or dot matrix behind a hero, fading into the ground.

stablev0.1.0 Chromium 103 ui-scale safe

Install

Copies the file into components/ds/, with its registry dependencies and npm packages. See Installation for the one-time setup.
bunx shadcn@3 add @fastrp/grid-background

Examples

Default

Open alone
Grid · fade bottom
Dots · fade y

API

<GridBackground />

The brand's backdrop texture for a hero or a section: a line grid or a dot matrix fading into the ground, with an optional pool of the accent. Decorative — put it first in a `relative` parent and the content after it.

PropTypeDefaultNotes
classNamestring—
fade"none" | "top" | "bottom" | "x" | "y"—Which edges dissolve into the ground.
glowfalse | "center" | "top-left" | "top-right"falseA soft pool of the accent behind the pattern, at this corner.
pattern"grid" | "dots"—

Dependencies

npm

  • class-variance-authority@^0.7.1

Registry

  • @fastrp/utils

Source

components/ds/grid-background.tsxShow
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';

// @fast-ds [email protected]

const gridVariants = cva('pointer-events-none absolute inset-0', {
  variants: {
    pattern: {
      /** The web site's line grid, `--grid-size` apart. */
      grid: 'bg-grid',
      /** A fine dot matrix, `--dot-size` apart. */
      dots: 'bg-dots',
    },
    /** Which edges dissolve into the ground. */
    fade: {
      none: '',
      bottom: 'mask-fade-b',
      top: 'mask-fade-t',
      x: 'mask-fade-x',
      y: 'mask-fade-y',
    },
  },
  defaultVariants: { pattern: 'grid', fade: 'bottom' },
});

export type GridBackgroundProps = VariantProps<typeof gridVariants> & {
  /** A soft pool of the accent behind the pattern, at this corner. */
  glow?: 'top-left' | 'top-right' | 'center' | false;
  className?: string;
};

const GLOW: Record<'top-left' | 'top-right' | 'center', string> = {
  'top-left': 'bg-[radial-gradient(ellipse_at_10%_0%,hsl(var(--primary)/0.18),transparent_55%)]',
  'top-right': 'bg-[radial-gradient(ellipse_at_90%_0%,hsl(var(--primary)/0.18),transparent_55%)]',
  center: 'bg-[radial-gradient(ellipse_at_50%_40%,hsl(var(--primary)/0.16),transparent_60%)]',
};

/**
 * The brand's backdrop texture for a hero or a section: a line grid or a dot matrix fading into
 * the ground, with an optional pool of the accent. Decorative — put it first in a `relative`
 * parent and the content after it.
 */
function GridBackground({ pattern, fade, glow = false, className }: GridBackgroundProps) {
  return (
    <div aria-hidden data-slot="grid-background" className="pointer-events-none absolute inset-0">
      {glow && <div className={cn('absolute inset-0', GLOW[glow])} />}
      <div className={cn(gridVariants({ pattern, fade }), 'opacity-70', className)} />
    </div>
  );
}

export { GridBackground };