{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-liquid-metal-demo",
  "type": "registry:component",
  "registryDependencies": [
    "hero-liquid-metal"
  ],
  "files": [
    {
      "path": "registry/default/example/hero-liquid-metal-demo.tsx",
      "content": "\"use client\"\n\nimport {\n  AISDKIcon,\n  HeroLiquidMetal,\n  HeroLiquidMetalActions,\n  HeroLiquidMetalBadges,\n  HeroLiquidMetalContainer,\n  HeroLiquidMetalContent,\n  HeroLiquidMetalDescription,\n  HeroLiquidMetalHeading,\n  HeroLiquidMetalMobileVisual,\n  HeroLiquidMetalRoot,\n  HeroLiquidMetalVisual,\n  NextjsIcon,\n} from \"../ui/hero-liquid-metal\"\n\nexport default function HeroLiquidMetalDemo() {\n  return (\n    <div className=\"space-y-16\">\n      <div className=\"space-y-4\">\n        <h3 className=\"flex items-center justify-center text-lg font-medium\">\n          Default\n        </h3>\n        <HeroLiquidMetal />\n      </div>\n\n      <div className=\"space-y-4\">\n        <h3 className=\"flex items-center justify-center text-lg font-medium\">\n          Root-level shader props\n        </h3>\n        <HeroLiquidMetal\n          width={1280}\n          height={720}\n          image=\"https://shaders.paper.design/images/logos/diamond.svg\"\n          colorBack=\"#ffffff00\"\n          colorTint=\"#2c5d72\"\n          shape={undefined}\n          repetition={6}\n          softness={0.8}\n          shiftRed={1}\n          shiftBlue={-1}\n          distortion={0.4}\n          contour={0.4}\n          angle={0}\n          speed={1}\n          scale={0.6}\n          fit=\"contain\"\n        />\n      </div>\n\n      <div className=\"space-y-4\">\n        <h3 className=\"flex items-center justify-center text-lg font-medium\">\n          Configured via props\n        </h3>\n        <HeroLiquidMetalRoot\n          ctaProps={{\n            href: \"#\",\n            label: \"Try NewCopy for marketing\",\n          }}\n          description=\"Human-in-the-loop marketing copy software that helps teams draft, review, and ship high-converting campaigns with confidence.\"\n          desktopShaderProps={{\n            scale: 0.8,\n            speed: 0.7,\n            repetition: 7,\n            softness: 0.9,\n            distortion: 0.3,\n            colorTint: \"#4f46e5\",\n          }}\n          image=\"https://shaders.paper.design/images/logos/diamond.svg\"\n          mobileShaderProps={{\n            speed: 0.65,\n            scale: 0.78,\n            colorTint: \"#0ea5e9\",\n          }}\n          srTitle=\"Composable hero\"\n          subtitle=\"Marketing\"\n          techStack={[\n            { name: \"Next.js\", version: \"v16\" },\n            { name: \"AI SDK\", version: \"v6\" },\n            { name: \"Tailwind\", version: \"v4\" },\n          ]}\n          title=\"Cursor for\"\n        >\n          <HeroLiquidMetalContainer>\n            <HeroLiquidMetalContent>\n              <HeroLiquidMetalHeading />\n              <HeroLiquidMetalDescription />\n              <HeroLiquidMetalActions />\n              <div\n                className=\"hidden justify-center lg:flex lg:justify-start\"\n                data-slot=\"hero-liquid-metal-badges-wrap\"\n              >\n                <HeroLiquidMetalBadges\n                  techStack={[\n                    { name: \"Next.js\", version: \"v16\", icon: NextjsIcon },\n                    { name: \"AI SDK\", version: \"v6\", icon: AISDKIcon },\n                  ]}\n                />\n              </div>\n            </HeroLiquidMetalContent>\n            <HeroLiquidMetalVisual />\n          </HeroLiquidMetalContainer>\n          <HeroLiquidMetalMobileVisual />\n        </HeroLiquidMetalRoot>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}