backgrounds

Cross Grid Background

A server component that renders isolated + marks tiled across the background — each cell shows one centered cross (short horizontal arm + vertical arm) with clear whitespace gaps between marks. Uses two radial-gradient ellipses per tile (no continuous lines). Zero JS — color derives from --foreground (14% color-mix) on --background, theme-robust on both light and dark. Place in a relative parent; fills absolutely with pointer-events-none.

Ported from kennyotsu-monochromia (MIT)

cross-grid-bg

Install

1. Register the namespace (once per project):

json

// components.json — register the @bottega namespace once
{
  "registries": {
    "@bottega": { "url": "https://bottega.ariacode.ca/r/{name}.json" }
  }
}

2. Add the component:

bash

npx shadcn add @bottega/cross-grid-bg

Usage

Usagetsx

<CrossGridBg />

Props

Prop	Type	Default	Description
size	number	55	Cell (tile) size in pixels. Default: 55.

Source

cross-grid-bg.tsxtsx

import type React from "react";

export interface CrossGridBgProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Cell (tile) size in pixels. Default: 55. */
  size?: number;
}

/**
 * Tileable cross/plus-mark background layer (server component, zero JS).
 * Each tile shows one isolated + mark — two perpendicular radial-gradient
 * ellipses (horizontal arm + vertical arm) centered in the tile, leaving
 * clear whitespace gaps on all four sides between adjacent crosses.
 * Color derives from --foreground at 14% opacity so it reads on both themes.
 * Meant to be placed in a `relative` parent — fills the parent absolutely.
 */
export function CrossGridBg({
  size = 55,
  className = "",
  style,
  ...props
}: CrossGridBgProps) {
  // ponytail: one color var covers both themes via mix
  const color = "color-mix(in oklch, var(--foreground) 14%, transparent)";

  // Arm spans 50% of tile (25% gap on each side); line thickness ~1.5 px.
  // radial-gradient ellipse axes: (x-radius, y-radius) — naturally bounded,
  // so adjacent tiles have clear empty gaps between crosses (unlike linear-gradient
  // stripes which would run edge-to-edge forming a continuous grid).
  const armHalf = Math.round(size * 0.25); // half-length of each cross arm
  const halfLine = 0.75; // half of 1.5 px line width

  // ponytail: two ellipses = isolated + per tile; no additional layers needed
  const horizArm = `radial-gradient(${armHalf}px ${halfLine}px at 50% 50%, ${color} 100%, transparent 100%)`;
  const vertArm = `radial-gradient(${halfLine}px ${armHalf}px at 50% 50%, ${color} 100%, transparent 100%)`;

  return (
    <div
      aria-hidden="true"
      className={["absolute inset-0 pointer-events-none", className]
        .filter(Boolean)
        .join(" ")}
      style={{
        backgroundColor: "var(--background)",
        backgroundImage: `${horizArm}, ${vertArm}`,
        backgroundSize: `${size}px ${size}px`,
        ...style,
      }}
      {...props}
    />
  );
}

Dependencies

@bottega/tokens