{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "background-patterns",
  "title": "Background Patterns",
  "description": "A set of stock Untitled-UI CSS masked-grid backdrops (basic, fading and diagonal-cross variants) for a one-liner decorative layer.",
  "registryDependencies": [
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/blocks/marketing/background-patterns.tsx",
      "content": "import { cn } from \"@/lib/utils\"\n\n/**\n * Stock Untitled-UI CSS background patterns — a set of self-contained, masked\n * grid variants for a one-liner decorative backdrop without the full `Backdrop`\n * config engine. Each is an `aria-hidden absolute inset-0 z-0` layer whose line\n * colour is the theme's `--color-border-tertiary`, so it stays subtle and flips\n * with light/dark automatically.\n *\n * Drop one inside a `relative overflow-hidden` container; tune z-index/opacity\n * via `className`.\n */\n\ninterface BackgroundPatternProps {\n  className?: string\n}\n\n/** Grid line colour, aligned with the design tokens. */\nconst patternLineColor = \"var(--color-border-tertiary)\"\n\n/** Basic uniform grid. */\nfunction BasicGridPattern({ className }: BackgroundPatternProps) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"pointer-events-none absolute inset-0 z-0 bg-[length:40px_40px] bg-[linear-gradient(to_right,_var(--pattern-line)_1px,_transparent_1px),linear-gradient(to_bottom,_var(--pattern-line)_1px,_transparent_1px)]\",\n        className\n      )}\n      style={{ [\"--pattern-line\" as string]: patternLineColor }}\n    />\n  )\n}\n\n/** Grid that fades out toward the bottom of the container. */\nfunction BottomFadeGridPattern({ className }: BackgroundPatternProps) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"pointer-events-none absolute inset-0 z-0 bg-[length:32px_32px] bg-[linear-gradient(to_right,_var(--pattern-line)_1px,_transparent_1px),linear-gradient(to_bottom,_var(--pattern-line)_1px,_transparent_1px)]\",\n        className\n      )}\n      style={{\n        [\"--pattern-line\" as string]: patternLineColor,\n        WebkitMaskImage:\n          \"radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)\",\n        maskImage:\n          \"radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)\",\n      }}\n    />\n  )\n}\n\n/** Grid that fades out toward the top-right of the container. */\nfunction TopRightFadeGridPattern({ className }: BackgroundPatternProps) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"pointer-events-none absolute inset-0 z-0 bg-[length:32px_32px] bg-[linear-gradient(to_right,_var(--pattern-line)_1px,_transparent_1px),linear-gradient(to_bottom,_var(--pattern-line)_1px,_transparent_1px)]\",\n        className\n      )}\n      style={{\n        [\"--pattern-line\" as string]: patternLineColor,\n        WebkitMaskImage:\n          \"radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%)\",\n        maskImage:\n          \"radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%)\",\n      }}\n    />\n  )\n}\n\n/** Diagonal cross grid — intersecting 45° / 135° line fields. */\nfunction DiagonalCrossGridPattern({ className }: BackgroundPatternProps) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\"pointer-events-none absolute inset-0 z-0\", className)}\n      style={{\n        backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 32px, ${patternLineColor} 32px, ${patternLineColor} 33px), repeating-linear-gradient(135deg, transparent, transparent 32px, ${patternLineColor} 32px, ${patternLineColor} 33px)`,\n      }}\n    />\n  )\n}\n\n/** Diagonal cross grid that fades from the centre outward. */\nfunction CenterFadeDiagonalCrossGridPattern({\n  className,\n}: BackgroundPatternProps) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\"pointer-events-none absolute inset-0 z-0\", className)}\n      style={{\n        backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 32px, ${patternLineColor} 32px, ${patternLineColor} 33px), repeating-linear-gradient(135deg, transparent, transparent 32px, ${patternLineColor} 32px, ${patternLineColor} 33px)`,\n        WebkitMaskImage:\n          \"radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)\",\n        maskImage:\n          \"radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)\",\n      }}\n    />\n  )\n}\n\n/** Diagonal cross grid that fades out toward the bottom-right. */\nfunction BottomRightFadeDiagonalCrossGridPattern({\n  className,\n}: BackgroundPatternProps) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\"pointer-events-none absolute inset-0 z-0\", className)}\n      style={{\n        backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 32px, ${patternLineColor} 32px, ${patternLineColor} 33px), repeating-linear-gradient(135deg, transparent, transparent 32px, ${patternLineColor} 32px, ${patternLineColor} 33px)`,\n        WebkitMaskImage:\n          \"radial-gradient(ellipse 80% 80% at 100% 100%, #000 50%, transparent 90%)\",\n        maskImage:\n          \"radial-gradient(ellipse 80% 80% at 100% 100%, #000 50%, transparent 90%)\",\n      }}\n    />\n  )\n}\n\n/**\n * Dashed grid with a radial fade from the top edge — the advanced technique:\n * dashed lines via repeating-linear-gradient masks composited with a radial\n * fade (`maskComposite: intersect`).\n */\nfunction TopFadeDashedGridPattern({ className }: BackgroundPatternProps) {\n  const dashMask =\n    \"repeating-linear-gradient(to right, black 0px, black 3px, transparent 3px, transparent 8px), repeating-linear-gradient(to bottom, black 0px, black 3px, transparent 3px, transparent 8px), radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)\"\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\"pointer-events-none absolute inset-0 z-0\", className)}\n      style={{\n        backgroundImage: `linear-gradient(to right, ${patternLineColor} 1px, transparent 1px), linear-gradient(to bottom, ${patternLineColor} 1px, transparent 1px)`,\n        backgroundSize: \"20px 20px\",\n        backgroundPosition: \"0 0, 0 0\",\n        maskImage: dashMask,\n        WebkitMaskImage: dashMask,\n        maskComposite: \"intersect\",\n        WebkitMaskComposite: \"source-in\",\n      }}\n    />\n  )\n}\n\nexport {\n  BasicGridPattern,\n  BottomFadeGridPattern,\n  TopRightFadeGridPattern,\n  DiagonalCrossGridPattern,\n  CenterFadeDiagonalCrossGridPattern,\n  BottomRightFadeDiagonalCrossGridPattern,\n  TopFadeDashedGridPattern,\n}\n",
      "type": "registry:component",
      "target": "components/blocks/marketing/background-patterns.tsx"
    }
  ],
  "type": "registry:block"
}