backgrounds

Fade Ruled Background

A server component that renders evenly-spaced vertical ruled lines fading toward the bottom over a subtle two-stop gradient wash. Colors derive from --primary, --accent, --foreground, and --background tokens. Place in a relative parent; the layer fills it absolutely with pointer-events-none.

Ported from kencode7 (MIT)

fade-ruled-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/fade-ruled-bg

Usage

Usagetsx

<FadeRuledBg />

Props

Prop	Type	Default	Description
gap	number	50	Distance between vertical ruled lines in pixels. Default: 50.
lineOpacity	number	12	Opacity percentage of rule lines against --foreground (1–30). Default: 12.

Source

fade-ruled-bg.tsxtsx

import type React from "react";

export interface FadeRuledBgProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Distance between vertical ruled lines in pixels. Default: 50. */
  gap?: number;
  /** Opacity percentage of rule lines against --foreground (1–30). Default: 12. */
  lineOpacity?: number;
}

/**
 * Synthwave ruled-line background layer (server component, zero JS).
 * Evenly-spaced vertical lines fade toward the bottom over a subtle two-stop
 * primary-to-accent gradient wash masked by the background color at the top.
 * Colors derive from --background, --foreground, --primary, and --accent tokens.
 * Place in a `relative` parent — fills it absolutely with pointer-events-none.
 */
export function FadeRuledBg({
  gap = 50,
  lineOpacity = 12,
  className = "",
  style,
  ...props
}: FadeRuledBgProps) {
  const lineColor = `color-mix(in oklch, var(--foreground) ${lineOpacity}%, transparent)`;

  return (
    <div
      aria-hidden="true"
      className={["absolute inset-0 pointer-events-none overflow-hidden", className]
        .filter(Boolean)
        .join(" ")}
      style={{
        // Layered background:
        // 1st (top): background color fades to transparent — creates the "ruled paper" top wash
        // 2nd (bottom): subtle primary→accent gradient wash
        background: [
          `linear-gradient(to bottom, var(--background) 0%, var(--background) 40%, transparent 100%)`,
          `linear-gradient(to right, color-mix(in oklch, var(--primary) 25%, var(--background)), color-mix(in oklch, var(--accent) 25%, var(--background)))`,
        ].join(", "),
        ...style,
      }}
      {...props}
    >
      {/* vertical ruled lines with bottom-fade mask */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          backgroundImage: `linear-gradient(90deg, ${lineColor} 1px, transparent 1px)`,
          backgroundSize: `${gap}px 100%`,
          pointerEvents: "none",
          // mask alpha — not a UI color; fades lines out toward the bottom
          maskImage: "linear-gradient(to bottom, rgb(0 0 0 / 1) 0%, rgb(0 0 0 / 0) 70%)",
          WebkitMaskImage: "linear-gradient(to bottom, rgb(0 0 0 / 1) 0%, rgb(0 0 0 / 0) 70%)",
        }}
      />
    </div>
  );
}

Dependencies

@bottega/tokens