{
  "name": "background-effect",
  "type": "registry:component",
  "description": "Visual background effect surface with StylePack tokens",
  "files": [
    {
      "path": "ui/BackgroundEffect.astro",
      "type": "registry:component",
      "content": "---\n// @stylepack\n// Do not edit. Tightly coupled to Pablo’s StylePack (proprietary). Customize via props/CSS vars only.\n\n// import \"../../styles/background-gradient.css\";\n\ninterface Props {\n  // gradient\n  gradientType?: string;\n  gradientColor?: string;\n  // pattern\n  patternType?: 'none';\n  // noise\n  noiseType?: 'none';\n  // className\n  className?: string;\n}\n\nconst { className = '', gradientType, gradientColor, patternType, noiseType } = Astro.props;\n\nconst inlineStyle = [\n  gradientType ? `--sp-bg-gradient-type: ${gradientType};` : '',\n  gradientColor ? `--sp-bg-gradient-color: ${gradientColor};` : '',\n  patternType ? `--sp-layered-bg-pattern: ${patternType};` : '',\n  noiseType ? `--sp-bg-noise: ${noiseType};` : '',\n]\n  .filter(Boolean)\n  .join(' ');\n---\n\n<div\n  class={`${className} absolute inset-0 -z-10 pointer-events-none background-effect-base`}\n  style={inlineStyle}\n>\n  <div class=\"background-layer background-layer-gradient\"></div>\n  <div class=\"background-layer background-layer-pattern\"></div>\n  <div class=\"background-layer background-layer-noise\"></div>\n</div>\n\n<style>\n  @reference \"tailwindcss\";\n\n  @layer components {\n    .background-effect-base {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n    }\n\n    .background-layer {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n      z-index: 0;\n    }\n\n    /* Layer 1: Gradient Background */\n    .background-layer-gradient {\n      background-image: var(--sp-bg-gradient-type, none);\n    }\n\n    /* Layer 2: Pattern Overlay */\n    .background-layer-pattern {\n      background-image: var(--sp-layered-bg-pattern, none);\n      background-size: var(--sp-layered-bg-pattern-size, 80px);\n      background-repeat: repeat;\n      mix-blend-mode: var(--sp-layered-bg-pattern-blend-mode, normal);\n      opacity: var(--sp-layered-bg-pattern-opacity, 0);\n      mask-image: var(--sp-layered-bg-pattern-mask, none);\n      -webkit-mask-image: var(--sp-layered-bg-pattern-mask, none);\n    }\n\n    /* Layer 3: Noise Texture */\n    .background-layer-noise {\n      background-image: var(--sp-bg-noise, none);\n      background-size: var(--sp-bg-noise-size, 320px);\n      background-repeat: repeat;\n      mix-blend-mode: var(--sp-bg-noise-blend-mode, normal);\n      opacity: var(--sp-bg-noise-opacity, 0);\n    }\n  }\n</style>\n"
    }
  ],
  "category": "ui"
}