{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "aurora-hero",
  "type": "registry:ui",
  "dependencies": [],
  "files": [
    {
      "path": "components/ui/aurora-hero.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface AuroraHeroProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The main title text to display with the glass displacement effect. */\n  title?: string;\n  /** Whether to show the toggle switch for background modes. */\n  showSwitch?: boolean;\n}\n\nexport function AuroraHero({\n  title = \"An awesome title\",\n  className,\n  ...props\n}: AuroraHeroProps) {\n\n  // Safely URL-encoded SVG string for the fluted glass effect\n  const filterImageHref = \"data:image/svg+xml,\" + encodeURIComponent(`\n    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' color-interpolation-filters='sRGB'>\n      <g>\n        <rect width='1' height='1' fill='black' />\n        <rect width='1' height='1' fill='url(#red)' style='mix-blend-mode:screen' />\n        <rect width='1' height='1' fill='url(#green)' style='mix-blend-mode:screen' />\n        <rect width='1' height='1' fill='url(#yellow)' style='mix-blend-mode:screen' />\n      </g>\n      <defs>\n        <radialGradient id='yellow' cx='0' cy='0' r='1' >\n          <stop stop-color='yellow' />\n          <stop stop-color='yellow' offset='1' stop-opacity='0' />\n        </radialGradient>\n        <radialGradient id='green' cx='1' cy='0' r='1' >\n          <stop stop-color='green' />\n          <stop stop-color='green' offset='1' stop-opacity='0' />\n        </radialGradient>\n        <radialGradient id='red' cx='0' cy='1' r='1' >\n          <stop stop-color='red' />\n          <stop stop-color='red' offset='1' stop-opacity='0' />\n        </radialGradient>\n      </defs>\n    </svg>\n  `);\n\n  return (\n    <section\n      className={cn(\"aurora-hero-wrapper w-full min-h-[400px] h-[500px] sm:h-[600px] relative overflow-hidden\", className)}\n      {...props}\n    >\n      <style>{`\n        .aurora-hero-wrapper {\n          --stripe-color: #000;\n          --bg-filter: blur(10px) opacity(50%) saturate(200%);\n          background: var(--stripe-color);\n          font-family: Inter, sans-serif;\n        }\n        :is(.dark) .aurora-hero-wrapper {\n          --stripe-color: #fff;\n          --bg-filter: blur(10px) invert(100%);\n        }\n        @keyframes smoothBg {\n          from { background-position: 50% 50%, 50% 50%; }\n          to { background-position: 350% 50%, 350% 50%; }\n        }\n        .aurora-hero-bg {\n          width: 100%;\n          height: 100%;\n          position: absolute;\n          inset: 0;\n          --stripes: repeating-linear-gradient(\n            100deg, \n            var(--stripe-color) 0%, \n            var(--stripe-color) 7%, \n            transparent 10%, \n            transparent 12%, \n            var(--stripe-color) 16%\n          );\n          --rainbow: repeating-linear-gradient(\n            100deg, \n            #60a5fa 10%, \n            #e879f9 15%, \n            #60a5fa 20%, \n            #5eead4 25%, \n            #60a5fa 30%\n          );\n          background-image: var(--stripes), var(--rainbow);\n          background-size: 300%, 200%;\n          background-position: 50% 50%, 50% 50%;\n          filter: var(--bg-filter);\n          mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);\n          -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);\n        }\n        .aurora-hero-bg::after {\n          content: \"\";\n          position: absolute;\n          inset: 0;\n          background-image: var(--stripes), var(--rainbow);\n          background-size: 200%, 100%;\n          animation: smoothBg 60s linear infinite;\n          background-attachment: fixed;\n          mix-blend-mode: difference;\n        }\n        .aurora-content {\n          position: absolute;\n          inset: 0;\n          width: 100%;\n          height: 100%;\n          display: flex;\n          place-content: center;\n          place-items: center;\n          flex-flow: column;\n          gap: 4.5%;\n          text-align: center;\n          backdrop-filter: contrast(0.9) blur(7px) url(#fluted);\n          -webkit-backdrop-filter: contrast(0.9) blur(7px) url(#fluted);\n          mix-blend-mode: difference;\n          filter: invert(1);\n        }\n        .h1-scalingSize {\n          font-size: calc(1rem - -5vw);\n          position: relative;\n          isolation: isolate;\n          font-weight: 700;\n        }\n        .h1-scalingSize::first-letter {\n          font-size: 300%;\n        }\n        .h1-scalingSize::before {\n          content: attr(data-text);\n          position: absolute;\n          inset: 0;\n          background: white;\n          text-shadow: 0 0 1px #ffffff;\n          background-clip: text;\n          -webkit-text-fill-color: transparent;\n          background-color: white;\n          -webkit-mask: linear-gradient(#000 0 0) luminance;\n          mask: linear-gradient(#000 0 0) luminance, alpha;\n          backdrop-filter: blur(19px) brightness(12.5);\n          -webkit-text-stroke: 1px white;\n          display: flex;\n          margin: auto;\n          z-index: 1;\n          pointer-events: none;\n        }\n      `}</style>\n\n      <div className=\"aurora-hero-bg\"></div>\n\n      <div className=\"aurora-content\">\n        <h1 className=\"h1-scalingSize\" data-text={title}>{title}</h1>\n      </div>\n\n      <svg\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n        colorInterpolationFilters=\"sRGB\"\n        style={{ position: \"absolute\", opacity: 0, height: 0, width: 0, pointerEvents: \"none\" }}\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <filter id=\"fluted\" primitiveUnits=\"objectBoundingBox\">\n          <feImage\n            x=\"0\"\n            y=\"0\"\n            result=\"image_0\"\n            crossOrigin=\"anonymous\"\n            href={filterImageHref}\n            preserveAspectRatio=\"none meet\"\n            width=\".03\"\n            height=\"1\"\n          />\n          <feTile in=\"image_0\" result=\"tile_0\" />\n          <feGaussianBlur stdDeviation=\".0001\" edgeMode=\"none\" in=\"tile_0\" result=\"bar_smoothness\" x=\"0\" y=\"0\" />\n          <feDisplacementMap scale=\".08\" xChannelSelector=\"R\" yChannelSelector=\"G\" in=\"SourceGraphic\" in2=\"bar_smoothness\" result=\"displacement_0\" />\n        </filter>\n      </svg>\n    </section>\n  );\n}\n\nexport default AuroraHero;\n",
      "type": "registry:ui",
      "target": "components/ui/aurora-hero.tsx"
    }
  ]
}