shadcn/app/public/registry/styles/default/grid-pattern.json

{
  "name": "grid-pattern",
  "description": "Animated grid background pattern",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "name": "grid-pattern.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface GridPatternProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Grid pattern variant */\n  variant?: \"dots\" | \"lines\" | \"crosses\" | \"plus\" | \"squares\"\n  /** Size of grid elements */\n  size?: number | { width?: number; height?: number }\n  /** Spacing between grid elements */\n  gap?: number | { x?: number; y?: number }\n  /** Color of grid elements */\n  color?: string\n  /** Opacity of grid elements */\n  opacity?: number\n  /** Stroke width for line-based patterns */\n  strokeWidth?: number\n  /** Enable fade effect */\n  fade?: boolean | \"edges\" | \"center\" | \"radial\"\n  /** Gradient overlay */\n  gradient?: {\n    from?: string\n    via?: string\n    to?: string\n    opacity?: number\n  }\n  /** Animation configuration */\n  animation?: {\n    duration?: number\n    direction?: \"normal\" | \"reverse\" | \"alternate\"\n    timing?: \"linear\" | \"ease\" | \"ease-in\" | \"ease-out\" | \"ease-in-out\"\n  }\n  /** Position offset */\n  offset?: { x?: number; y?: number }\n  /** Maximum render area (for performance) */\n  maxArea?: { width?: number; height?: number }\n}\n\nconst GridPattern = React.forwardRef<HTMLDivElement, GridPatternProps>(\n  (\n    {\n      variant = \"dots\",\n      size = 4,\n      gap = 20,\n      color = \"currentColor\",\n      opacity = 0.4,\n      strokeWidth = 1,\n      fade = false,\n      gradient,\n      animation,\n      offset,\n      maxArea,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const patternId = React.useId()\n    const maskId = React.useId()\n    const gradientId = React.useId()\n\n    const normalizedSize =\n      typeof size === \"number\"\n        ? { width: size, height: size }\n        : { width: size.width ?? 4, height: size.height ?? 4 }\n\n    const normalizedGap =\n      typeof gap === \"number\"\n        ? { x: gap, y: gap }\n        : { x: gap.x ?? 20, y: gap.y ?? 20 }\n\n    const normalizedOffset = {\n      x: offset?.x ?? 0,\n      y: offset?.y ?? 0,\n    }\n\n    const renderPattern = () => {\n      switch (variant) {\n        case \"dots\":\n          return (\n            <circle\n              cx={normalizedSize.width / 2}\n              cy={normalizedSize.height / 2}\n              r={normalizedSize.width / 2}\n              fill={color}\n              opacity={opacity}\n            />\n          )\n\n        case \"lines\":\n          return (\n            <>\n              <line\n                x1=\"0\"\n                y1=\"0\"\n                x2=\"0\"\n                y2={normalizedGap.y}\n                stroke={color}\n                strokeWidth={strokeWidth}\n                opacity={opacity}\n              />\n              <line\n                x1=\"0\"\n                y1=\"0\"\n                x2={normalizedGap.x}\n                y2=\"0\"\n                stroke={color}\n                strokeWidth={strokeWidth}\n                opacity={opacity}\n              />\n            </>\n          )\n\n        case \"crosses\":\n          return (\n            <>\n              <line\n                x1={normalizedSize.width / 2}\n                y1=\"0\"\n                x2={normalizedSize.width / 2}\n                y2={normalizedSize.height}\n                stroke={color}\n                strokeWidth={strokeWidth}\n                opacity={opacity}\n              />\n              <line\n                x1=\"0\"\n                y1={normalizedSize.height / 2}\n                x2={normalizedSize.width}\n                y2={normalizedSize.height / 2}\n                stroke={color}\n                strokeWidth={strokeWidth}\n                opacity={opacity}\n              />\n            </>\n          )\n\n        case \"plus\":\n          return (\n            <path\n              d={`M ${normalizedSize.width / 2} 0 L ${normalizedSize.width / 2} ${normalizedSize.height} M 0 ${normalizedSize.height / 2} L ${normalizedSize.width} ${normalizedSize.height / 2}`}\n              stroke={color}\n              strokeWidth={strokeWidth}\n              opacity={opacity}\n              fill=\"none\"\n              strokeLinecap=\"round\"\n            />\n          )\n\n        case \"squares\":\n          return (\n            <rect\n              width={normalizedSize.width}\n              height={normalizedSize.height}\n              fill=\"none\"\n              stroke={color}\n              strokeWidth={strokeWidth}\n              opacity={opacity}\n            />\n          )\n\n        default:\n          return null\n      }\n    }\n\n    const renderFadeMask = () => {\n      if (!fade) return null\n\n      switch (fade) {\n        case \"edges\":\n        case true:\n          return (\n            <linearGradient id={maskId} gradientUnits=\"userSpaceOnUse\">\n              <stop offset=\"0%\" stopColor=\"white\" stopOpacity=\"0\" />\n              <stop offset=\"10%\" stopColor=\"white\" stopOpacity=\"1\" />\n              <stop offset=\"90%\" stopColor=\"white\" stopOpacity=\"1\" />\n              <stop offset=\"100%\" stopColor=\"white\" stopOpacity=\"0\" />\n            </linearGradient>\n          )\n\n        case \"center\":\n          return (\n            <radialGradient id={maskId} gradientUnits=\"userSpaceOnUse\">\n              <stop offset=\"0%\" stopColor=\"white\" stopOpacity=\"1\" />\n              <stop offset=\"70%\" stopColor=\"white\" stopOpacity=\"1\" />\n              <stop offset=\"100%\" stopColor=\"white\" stopOpacity=\"0\" />\n            </radialGradient>\n          )\n\n        case \"radial\":\n          return (\n            <radialGradient id={maskId} gradientUnits=\"userSpaceOnUse\">\n              <stop offset=\"0%\" stopColor=\"white\" stopOpacity=\"0\" />\n              <stop offset=\"30%\" stopColor=\"white\" stopOpacity=\"1\" />\n              <stop offset=\"100%\" stopColor=\"white\" stopOpacity=\"1\" />\n            </radialGradient>\n          )\n\n        default:\n          return null\n      }\n    }\n\n    const animationStyle = animation\n      ? {\n          animation: `grid-pattern-move ${animation.duration ?? 10}s ${\n            animation.timing ?? \"linear\"\n          } infinite ${animation.direction ?? \"normal\"}`,\n        }\n      : {}\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"pointer-events-none absolute inset-0 overflow-hidden\",\n          className\n        )}\n        style={{\n          ...style,\n          ...animationStyle,\n        }}\n        {...props}\n      >\n        <svg\n          className=\"absolute h-full w-full\"\n          style={{\n            transform: `translate(${normalizedOffset.x}px, ${normalizedOffset.y}px)`,\n          }}\n        >\n          <defs>\n            <pattern\n              id={patternId}\n              x=\"0\"\n              y=\"0\"\n              width={normalizedGap.x}\n              height={normalizedGap.y}\n              patternUnits=\"userSpaceOnUse\"\n            >\n              {renderPattern()}\n            </pattern>\n            {renderFadeMask()}\n            {gradient && (\n              <linearGradient\n                id={gradientId}\n                x1=\"0%\"\n                y1=\"0%\"\n                x2=\"100%\"\n                y2=\"100%\"\n              >\n                <stop offset=\"0%\" stopColor={gradient.from ?? \"transparent\"} />\n                {gradient.via && <stop offset=\"50%\" stopColor={gradient.via} />}\n                <stop offset=\"100%\" stopColor={gradient.to ?? \"transparent\"} />\n              </linearGradient>\n            )}\n          </defs>\n\n          <rect\n            width={maxArea?.width ?? \"100%\"}\n            height={maxArea?.height ?? \"100%\"}\n            fill={`url(#${patternId})`}\n            mask={fade ? `url(#${maskId})` : undefined}\n          />\n\n          {gradient && (\n            <rect\n              width={maxArea?.width ?? \"100%\"}\n              height={maxArea?.height ?? \"100%\"}\n              fill={`url(#${gradientId})`}\n              opacity={gradient.opacity ?? 0.5}\n              className=\"mix-blend-multiply dark:mix-blend-screen\"\n            />\n          )}\n        </svg>\n\n        <style>{`\n          @keyframes grid-pattern-move {\n            0% {\n              transform: translate(0, 0);\n            }\n            100% {\n              transform: translate(${normalizedGap.x}px, ${normalizedGap.y}px);\n            }\n          }\n        `}</style>\n      </div>\n    )\n  }\n)\n\nGridPattern.displayName = \"GridPattern\"\n\n// Preset configurations\nexport const GridPatternPresets = {\n  dotMatrix: {\n    variant: \"dots\" as const,\n    size: 3,\n    gap: 30,\n    opacity: 0.3,\n  },\n  fineDots: {\n    variant: \"dots\" as const,\n    size: 1,\n    gap: 10,\n    opacity: 0.4,\n  },\n  gridLines: {\n    variant: \"lines\" as const,\n    gap: 40,\n    strokeWidth: 1,\n    opacity: 0.2,\n  },\n  crosshatch: {\n    variant: \"crosses\" as const,\n    size: 10,\n    gap: 20,\n    strokeWidth: 1,\n    opacity: 0.3,\n  },\n  blueprint: {\n    variant: \"lines\" as const,\n    gap: 20,\n    strokeWidth: 0.5,\n    color: \"#3b82f6\",\n    opacity: 0.3,\n  },\n  graph: {\n    variant: \"lines\" as const,\n    gap: { x: 50, y: 50 },\n    strokeWidth: 1,\n    opacity: 0.15,\n    fade: \"edges\" as const,\n  },\n  isometric: {\n    variant: \"lines\" as const,\n    gap: { x: 30, y: 17.32 }, // 30deg isometric\n    strokeWidth: 0.5,\n    opacity: 0.2,\n  },\n  hexagon: {\n    variant: \"dots\" as const,\n    size: 2,\n    gap: { x: 30, y: 26 }, // Hexagonal pattern\n    opacity: 0.3,\n  },\n}\n\nexport { GridPattern }\n"
    }
  ],
  "type": "components:animation"
}