{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-liquid-metal",
  "type": "registry:ui",
  "description": "Split-layout hero section with responsive LiquidMetal shader visuals, CTA, and tech stack badges",
  "dependencies": [
    "@paper-design/shaders-react"
  ],
  "registryDependencies": [
    "badge",
    "button"
  ],
  "files": [
    {
      "path": "registry/default/ui/hero-liquid-metal.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { SVGProps } from \"react\"\nimport { LiquidMetal } from \"@paper-design/shaders-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\n\nconst MemoizedLiquidMetal = React.memo(LiquidMetal)\n\ntype LiquidMetalProps = React.ComponentProps<typeof LiquidMetal>\ntype LiquidMetalIcon = React.ComponentType<SVGProps<SVGSVGElement>>\n\nexport interface HeroLiquidMetalTechItem {\n  name: string\n  version?: string\n  icon?: LiquidMetalIcon\n}\n\nexport interface HeroLiquidMetalCTAProps {\n  label: React.ReactNode\n  href: string\n  target?: React.HTMLAttributeAnchorTarget\n  rel?: string\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>\n  className?: string\n  buttonClassName?: string\n}\n\n/** LiquidMetal shader props that can be passed at the root for convenience */\nexport type HeroLiquidMetalShaderOverrides = Partial<\n  Pick<\n    LiquidMetalProps,\n    | \"width\"\n    | \"height\"\n    | \"image\"\n    | \"colorBack\"\n    | \"colorTint\"\n    | \"shape\"\n    | \"repetition\"\n    | \"softness\"\n    | \"shiftRed\"\n    | \"shiftBlue\"\n    | \"distortion\"\n    | \"contour\"\n    | \"angle\"\n    | \"speed\"\n    | \"frame\"\n    | \"scale\"\n    | \"rotation\"\n    | \"offsetX\"\n    | \"offsetY\"\n    | \"fit\"\n    | \"originX\"\n    | \"originY\"\n    | \"minPixelRatio\"\n    | \"maxPixelCount\"\n  >\n>\n\nexport interface HeroLiquidMetalRootProps\n  extends Omit<React.ComponentPropsWithoutRef<\"section\">, \"title\">,\n    HeroLiquidMetalShaderOverrides {\n  srTitle?: string\n  title?: React.ReactNode\n  subtitle?: React.ReactNode\n  description?: React.ReactNode\n  showCta?: boolean\n  ctaProps?: Partial<HeroLiquidMetalCTAProps>\n  renderCta?: (defaultCta: React.ReactNode) => React.ReactNode\n  showBadges?: boolean\n  techStack?: HeroLiquidMetalTechItem[]\n  renderBadge?: (\n    tech: HeroLiquidMetalTechItem,\n    index: number,\n    defaultBadge: React.ReactNode\n  ) => React.ReactNode\n  desktopShaderProps?: Partial<LiquidMetalProps>\n  mobileShaderProps?: Partial<LiquidMetalProps>\n}\n\nexport interface HeroLiquidMetalHeadingProps\n  extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  title?: React.ReactNode\n  subtitle?: React.ReactNode\n  headingClassName?: string\n}\n\nexport interface HeroLiquidMetalDescriptionProps\n  extends React.ComponentPropsWithoutRef<\"div\"> {\n  description?: React.ReactNode\n  descriptionClassName?: string\n}\n\nexport interface HeroLiquidMetalActionsProps\n  extends React.ComponentPropsWithoutRef<\"div\"> {\n  showCta?: boolean\n  ctaProps?: Partial<HeroLiquidMetalCTAProps>\n  renderCta?: (defaultCta: React.ReactNode) => React.ReactNode\n}\n\nexport interface HeroLiquidMetalBadgesProps\n  extends React.ComponentPropsWithoutRef<\"div\"> {\n  showBadges?: boolean\n  techStack?: HeroLiquidMetalTechItem[]\n  renderBadge?: (\n    tech: HeroLiquidMetalTechItem,\n    index: number,\n    defaultBadge: React.ReactNode\n  ) => React.ReactNode\n}\n\nexport interface HeroLiquidMetalVisualProps\n  extends React.ComponentPropsWithoutRef<\"div\"> {\n  desktopShaderProps?: Partial<LiquidMetalProps>\n  desktopClassName?: string\n}\n\nexport interface HeroLiquidMetalMobileVisualProps\n  extends React.ComponentPropsWithoutRef<\"div\"> {\n  mobileShaderProps?: Partial<LiquidMetalProps>\n}\n\nexport interface HeroLiquidMetalProps extends HeroLiquidMetalRootProps {\n  containerClassName?: string\n  contentClassName?: string\n  headingWrapClassName?: string\n  headingClassName?: string\n  descriptionWrapClassName?: string\n  descriptionClassName?: string\n  ctaWrapClassName?: string\n  badgesWrapClassName?: string\n  visualClassName?: string\n  mobileVisualClassName?: string\n}\n\ninterface HeroLiquidMetalContextValue {\n  srTitle: string\n  title: React.ReactNode\n  subtitle: React.ReactNode\n  description: React.ReactNode\n  showCta: boolean\n  mergedCtaProps: HeroLiquidMetalCTAProps\n  renderCta?: (defaultCta: React.ReactNode) => React.ReactNode\n  showBadges: boolean\n  techStack: HeroLiquidMetalTechItem[]\n  renderBadge?: HeroLiquidMetalBadgesProps[\"renderBadge\"]\n  mergedDesktopShaderProps: Partial<LiquidMetalProps>\n  mergedMobileShaderProps: Partial<LiquidMetalProps>\n}\n\nconst defaultDesktopShaderProps: Partial<LiquidMetalProps> = {\n  width: 1280,\n  height: 720,\n  image: \"/cult-icon.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\nconst defaultMobileShaderProps: Partial<LiquidMetalProps> = {\n  image: \"/cult-icon.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.68,\n  fit: \"contain\",\n  style: { height: \"100%\", width: \"100%\" },\n}\n\nconst defaultCtaProps: HeroLiquidMetalCTAProps = {\n  label: \"Check it out today\",\n  href: \"https://aisdkagents.com\",\n  target: \"_blank\",\n  rel: \"noopener noreferrer\",\n}\n\nconst defaultDescription = (\n  <>\n    Full-stack vercel ai sdk patterns for workflows, tool calling, and agent\n    orchestration. Built with{\" \"}\n    <span className=\"font-medium tracking-tight\">ai sdk v6</span> and{\" \"}\n    <span className=\"font-medium tracking-tight\">shadcn/ui</span>.\n    <span className=\"hidden sm:inline\"> Headless, themable, practical.</span>\n  </>\n)\n\nconst defaultTechStack: HeroLiquidMetalTechItem[] = [\n  {\n    name: \"Next.js\",\n    version: \"v16\",\n    icon: NextjsIcon,\n  },\n  {\n    name: \"AI SDK\",\n    version: \"v6\",\n    icon: AISDKIcon,\n  },\n]\n\nconst HeroLiquidMetalContext = React.createContext<\n  HeroLiquidMetalContextValue | undefined\n>(undefined)\n\nfunction useHeroLiquidMetalContext() {\n  const context = React.useContext(HeroLiquidMetalContext)\n  if (!context) {\n    throw new Error(\n      \"HeroLiquidMetal components must be used within HeroLiquidMetalRoot\"\n    )\n  }\n  return context\n}\n\nexport function useHeroLiquidMetal() {\n  return useHeroLiquidMetalContext()\n}\n\nexport const HeroLiquidMetalRoot = React.forwardRef<\n  HTMLElement,\n  HeroLiquidMetalRootProps\n>(({ className, children, srTitle = \"AI SDK Agents\", title = <span className=\"\">\n      AI SDK Agents\n    </span>, subtitle = \"Copy and Paste\", description = defaultDescription, showCta = true, ctaProps, renderCta, showBadges = true, techStack = defaultTechStack, renderBadge, desktopShaderProps, mobileShaderProps, width, height, image, colorBack, colorTint, shape, repetition, softness, shiftRed, shiftBlue, distortion, contour, angle, speed, frame, scale, rotation, offsetX, offsetY, fit, originX, originY, minPixelRatio, maxPixelCount, ...props }, ref) => {\n  const mergedCtaProps = React.useMemo(\n    () => ({\n      ...defaultCtaProps,\n      ...ctaProps,\n    }),\n    [ctaProps]\n  )\n\n  const shaderOverrides = React.useMemo((): Partial<LiquidMetalProps> => {\n    const overrides: Partial<LiquidMetalProps> = {}\n    if (width !== undefined) overrides.width = width\n    if (height !== undefined) overrides.height = height\n    if (image !== undefined) overrides.image = image\n    if (colorBack !== undefined) overrides.colorBack = colorBack\n    if (colorTint !== undefined) overrides.colorTint = colorTint\n    if (shape !== undefined) overrides.shape = shape\n    if (repetition !== undefined) overrides.repetition = repetition\n    if (softness !== undefined) overrides.softness = softness\n    if (shiftRed !== undefined) overrides.shiftRed = shiftRed\n    if (shiftBlue !== undefined) overrides.shiftBlue = shiftBlue\n    if (distortion !== undefined) overrides.distortion = distortion\n    if (contour !== undefined) overrides.contour = contour\n    if (angle !== undefined) overrides.angle = angle\n    if (speed !== undefined) overrides.speed = speed\n    if (frame !== undefined) overrides.frame = frame\n    if (scale !== undefined) overrides.scale = scale\n    if (rotation !== undefined) overrides.rotation = rotation\n    if (offsetX !== undefined) overrides.offsetX = offsetX\n    if (offsetY !== undefined) overrides.offsetY = offsetY\n    if (fit !== undefined) overrides.fit = fit\n    if (originX !== undefined) overrides.originX = originX\n    if (originY !== undefined) overrides.originY = originY\n    if (minPixelRatio !== undefined) overrides.minPixelRatio = minPixelRatio\n    if (maxPixelCount !== undefined) overrides.maxPixelCount = maxPixelCount\n    return overrides\n  }, [\n    width,\n    height,\n    image,\n    colorBack,\n    colorTint,\n    shape,\n    repetition,\n    softness,\n    shiftRed,\n    shiftBlue,\n    distortion,\n    contour,\n    angle,\n    speed,\n    frame,\n    scale,\n    rotation,\n    offsetX,\n    offsetY,\n    fit,\n    originX,\n    originY,\n    minPixelRatio,\n    maxPixelCount,\n  ])\n\n  const mergedDesktopShaderProps = React.useMemo(\n    () => ({\n      ...defaultDesktopShaderProps,\n      ...shaderOverrides,\n      ...desktopShaderProps,\n    }),\n    [shaderOverrides, desktopShaderProps]\n  )\n\n  const mergedMobileShaderProps = React.useMemo(\n    () => ({\n      ...defaultMobileShaderProps,\n      ...shaderOverrides,\n      ...mobileShaderProps,\n      style: {\n        ...(defaultMobileShaderProps.style as React.CSSProperties),\n        ...(mobileShaderProps?.style as React.CSSProperties | undefined),\n      },\n    }),\n    [shaderOverrides, mobileShaderProps]\n  )\n\n  const contextValue = React.useMemo<HeroLiquidMetalContextValue>(\n    () => ({\n      srTitle,\n      title,\n      subtitle,\n      description,\n      showCta,\n      mergedCtaProps,\n      renderCta,\n      showBadges,\n      techStack,\n      renderBadge,\n      mergedDesktopShaderProps,\n      mergedMobileShaderProps,\n    }),\n    [\n      srTitle,\n      title,\n      subtitle,\n      description,\n      showCta,\n      mergedCtaProps,\n      renderCta,\n      showBadges,\n      techStack,\n      renderBadge,\n      mergedDesktopShaderProps,\n      mergedMobileShaderProps,\n    ]\n  )\n\n  return (\n    <HeroLiquidMetalContext.Provider value={contextValue}>\n      <section\n        className={cn(\"relative h-full w-full overflow-hidden\", className)}\n        data-slot=\"hero-liquid-metal-root\"\n        ref={ref}\n        {...props}\n      >\n        <h1 className=\"sr-only\">{srTitle}</h1>\n        {children}\n      </section>\n    </HeroLiquidMetalContext.Provider>\n  )\n})\nHeroLiquidMetalRoot.displayName = \"HeroLiquidMetalRoot\"\n\nexport function HeroLiquidMetalContainer({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"relative z-10 container grid gap-6 pb-16 sm:gap-8 sm:pb-20 lg:grid-cols-[1fr_minmax(300px,500px)] lg:items-center lg:gap-12 lg:pb-24 xl:grid-cols-[1fr_1fr]\",\n        className\n      )}\n      data-slot=\"hero-liquid-metal-container\"\n      {...props}\n    />\n  )\n}\n\nexport function HeroLiquidMetalContent({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col justify-center gap-4 text-balance sm:gap-5 sm:px-4 md:px-8 lg:gap-6 lg:pr-0 lg:pl-4 xl:pl-8 2xl:pl-0\",\n        className\n      )}\n      data-slot=\"hero-liquid-metal-content\"\n      {...props}\n    />\n  )\n}\n\nexport function HeroLiquidMetalHeading({\n  className,\n  title,\n  subtitle,\n  headingClassName,\n  children,\n  ...props\n}: HeroLiquidMetalHeadingProps) {\n  const context = useHeroLiquidMetalContext()\n  const resolvedTitle = title ?? context.title\n  const resolvedSubtitle = subtitle ?? context.subtitle\n\n  return (\n    <div\n      className={cn(\"pt-4 text-center sm:pt-6 lg:pt-0 lg:text-left\", className)}\n      data-slot=\"hero-liquid-metal-heading-wrap\"\n      {...props}\n    >\n      {children ?? (\n        <div className=\"relative\">\n          <h2\n            className={cn(\n              \"relative mb-0 text-3xl font-medium tracking-[-0.04em] text-balance sm:text-4xl md:text-5xl lg:tracking-[-0.06em] xl:text-6xl 2xl:text-7xl\",\n              headingClassName\n            )}\n            data-slot=\"hero-liquid-metal-heading\"\n          >\n            {resolvedTitle} <br />\n            {resolvedSubtitle}\n          </h2>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport function HeroLiquidMetalDescription({\n  className,\n  description,\n  descriptionClassName,\n  children,\n  ...props\n}: HeroLiquidMetalDescriptionProps) {\n  const context = useHeroLiquidMetalContext()\n  const resolvedDescription = description ?? context.description\n\n  return (\n    <div\n      className={cn(\n        \"mx-auto max-w-xl pb-2 text-center sm:pb-4 lg:mx-0 lg:max-w-none lg:pb-0 lg:text-left\",\n        className\n      )}\n      data-slot=\"hero-liquid-metal-description-wrap\"\n      {...props}\n    >\n      {children ?? (\n        <p\n          className={cn(\n            \"text-foreground/70 md:text-foreground/80 mt-0 mb-0 font-sans text-sm sm:text-base lg:text-lg xl:text-xl\",\n            descriptionClassName\n          )}\n          data-slot=\"hero-liquid-metal-description\"\n        >\n          {resolvedDescription}\n        </p>\n      )}\n    </div>\n  )\n}\n\nexport function HeroLiquidMetalActions({\n  className,\n  showCta,\n  ctaProps,\n  renderCta,\n  children,\n  ...props\n}: HeroLiquidMetalActionsProps) {\n  const context = useHeroLiquidMetalContext()\n  const shouldShowCta = showCta ?? context.showCta\n  const resolvedCtaProps = { ...context.mergedCtaProps, ...ctaProps }\n  const resolvedRenderCta = renderCta ?? context.renderCta\n\n  if (!shouldShowCta) {\n    return null\n  }\n\n  const defaultCta = <HeroLiquidMetalCTA {...resolvedCtaProps} />\n\n  return (\n    <div\n      className={cn(\"flex justify-center lg:justify-start\", className)}\n      data-slot=\"hero-liquid-metal-cta-wrap\"\n      {...props}\n    >\n      {children ??\n        (resolvedRenderCta ? resolvedRenderCta(defaultCta) : defaultCta)}\n    </div>\n  )\n}\n\nexport function HeroLiquidMetalCTA({\n  label,\n  href,\n  target,\n  rel,\n  onClick,\n  className,\n  buttonClassName,\n}: HeroLiquidMetalCTAProps) {\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4 pb-4 md:pb-0\",\n        className\n      )}\n      data-slot=\"hero-liquid-metal-cta\"\n    >\n      <Button asChild className={cn(\"\", buttonClassName)} size=\"lg\">\n        <a href={href} onClick={onClick} rel={rel} target={target}>\n          {label}\n        </a>\n      </Button>\n    </div>\n  )\n}\n\nexport function HeroLiquidMetalBadges({\n  className,\n  showBadges,\n  techStack,\n  renderBadge,\n  ...props\n}: HeroLiquidMetalBadgesProps) {\n  const context = useHeroLiquidMetalContext()\n  const shouldShowBadges = showBadges ?? context.showBadges\n  const resolvedTechStack = techStack ?? context.techStack\n  const resolvedRenderBadge = renderBadge ?? context.renderBadge\n\n  if (!shouldShowBadges) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-wrap items-center justify-center gap-2.5\",\n        className\n      )}\n      data-slot=\"hero-liquid-metal-badges\"\n      {...props}\n    >\n      {resolvedTechStack.map((tech, index) => {\n        const Icon = tech.icon\n        const defaultBadge = (\n          <Badge\n            className={cn(\n              \"group relative px-3.5 py-1.5 font-medium transition-all duration-150\",\n              \"border-border/50 bg-card text-card-foreground border\",\n              \"shadow-[0_1px_3px_rgba(0,0,0,0.08)] dark:shadow-[0_1px_3px_rgba(0,0,0,0.3)]\",\n              \"hover:-translate-y-px hover:shadow-[0_2px_8px_rgba(0,0,0,0.12)] dark:hover:shadow-[0_2px_8px_rgba(0,0,0,0.4)]\"\n            )}\n            data-slot=\"hero-liquid-metal-badge\"\n            key={tech.name}\n            variant=\"outline\"\n          >\n            {Icon ? <Icon className=\"mr-1 size-3.5 opacity-80\" /> : null}\n            <span className=\"font-semibold tracking-tight\">{tech.name}</span>\n            {tech.version ? (\n              <span className=\"font-mono text-xs opacity-50\">\n                {tech.version}\n              </span>\n            ) : null}\n          </Badge>\n        )\n\n        if (resolvedRenderBadge) {\n          return (\n            <React.Fragment key={tech.name}>\n              {resolvedRenderBadge(tech, index, defaultBadge)}\n            </React.Fragment>\n          )\n        }\n\n        return defaultBadge\n      })}\n    </div>\n  )\n}\n\nexport function HeroLiquidMetalVisual({\n  className,\n  desktopClassName,\n  desktopShaderProps,\n  ...props\n}: HeroLiquidMetalVisualProps) {\n  const context = useHeroLiquidMetalContext()\n  const resolvedDesktopShaderProps = {\n    ...context.mergedDesktopShaderProps,\n    ...desktopShaderProps,\n  }\n\n  return (\n    <div\n      className={cn(\n        \"relative hidden h-[350px] lg:block lg:h-[400px] xl:h-[500px]\",\n        className\n      )}\n      data-slot=\"hero-liquid-metal-visual\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"absolute inset-0 flex items-center justify-center overflow-hidden rounded-full\",\n          desktopClassName\n        )}\n        data-slot=\"hero-liquid-metal-desktop\"\n      >\n        <MemoizedLiquidMetal\n          {...resolvedDesktopShaderProps}\n          image={\n            resolvedDesktopShaderProps.image ??\n            (defaultDesktopShaderProps.image as string)\n          }\n        />\n      </div>\n    </div>\n  )\n}\n\nexport function HeroLiquidMetalMobileVisual({\n  className,\n  mobileShaderProps,\n  ...props\n}: HeroLiquidMetalMobileVisualProps) {\n  const context = useHeroLiquidMetalContext()\n  const resolvedMobileShaderProps = {\n    ...context.mergedMobileShaderProps,\n    ...mobileShaderProps,\n    style: {\n      ...(context.mergedMobileShaderProps.style as React.CSSProperties),\n      ...(mobileShaderProps?.style as React.CSSProperties | undefined),\n    },\n  }\n\n  return (\n    <div\n      className={cn(\n        \"pointer-events-none absolute inset-x-0 -bottom-24 -z-10 h-[360px] overflow-hidden lg:hidden\",\n        className\n      )}\n      data-slot=\"hero-liquid-metal-mobile\"\n      {...props}\n    >\n      <div className=\"from-background via-background/95 absolute inset-x-0 top-0 z-10 h-56 bg-gradient-to-b to-transparent\" />\n      <MemoizedLiquidMetal\n        {...resolvedMobileShaderProps}\n        image={\n          resolvedMobileShaderProps.image ??\n          (defaultMobileShaderProps.image as string)\n        }\n      />\n    </div>\n  )\n}\n\nexport function HeroLiquidMetal({\n  containerClassName,\n  contentClassName,\n  headingWrapClassName,\n  headingClassName,\n  descriptionWrapClassName,\n  descriptionClassName,\n  ctaWrapClassName,\n  badgesWrapClassName,\n  visualClassName,\n  mobileVisualClassName,\n  ...props\n}: HeroLiquidMetalProps) {\n  return (\n    <HeroLiquidMetalRoot {...props}>\n      <HeroLiquidMetalContainer className={containerClassName}>\n        <HeroLiquidMetalContent className={contentClassName}>\n          <HeroLiquidMetalHeading\n            className={headingWrapClassName}\n            headingClassName={headingClassName}\n          />\n          <HeroLiquidMetalDescription\n            className={descriptionWrapClassName}\n            descriptionClassName={descriptionClassName}\n          />\n          <HeroLiquidMetalActions className={ctaWrapClassName} />\n          <div\n            className={cn(\n              \"hidden justify-center lg:flex lg:justify-start\",\n              badgesWrapClassName\n            )}\n            data-slot=\"hero-liquid-metal-badges-wrap\"\n          >\n            <HeroLiquidMetalBadges />\n          </div>\n        </HeroLiquidMetalContent>\n        <HeroLiquidMetalVisual className={visualClassName} />\n      </HeroLiquidMetalContainer>\n      <HeroLiquidMetalMobileVisual className={mobileVisualClassName} />\n    </HeroLiquidMetalRoot>\n  )\n}\n\nexport function AISDKIcon(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      color=\"currentcolor\"\n      data-testid=\"geist-icon\"\n      height=\"1em\"\n      strokeLinejoin=\"round\"\n      viewBox=\"0 0 16 16\"\n      width=\"1em\"\n      {...props}\n    >\n      <title>AI SDK</title>\n      <path\n        d=\"M2.5.5V0h1v.5a2 2 0 002 2H6v1h-.5a2 2 0 00-2 2V6h-1v-.5a2 2 0 00-2-2H0v-1h.5a2 2 0 002-2zM14.5 4.5V5h-1v-.5a1 1 0 00-1-1H12v-1h.5a1 1 0 001-1V1h1v.5a1 1 0 001 1h.5v1h-.5a1 1 0 00-1 1zM8.407 4.93L8.5 4h1l.093.93a5 5 0 004.478 4.477L15 9.5v1l-.93.093a5 5 0 00-4.477 4.478L9.5 16h-1l-.093-.93a5 5 0 00-4.478-4.477L3 10.5v-1l.93-.093A5 5 0 008.406 4.93z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nexport function NextjsIcon(props: SVGProps<SVGSVGElement>) {\n  const id = React.useId()\n  const maskId = `${id}-mask`\n  const paint0Id = `${id}-paint0`\n  const paint1Id = `${id}-paint1`\n\n  return (\n    <svg\n      fill=\"none\"\n      height=\"1em\"\n      viewBox=\"0 0 180 180\"\n      width=\"1em\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <title>Next.js</title>\n      <mask\n        height={180}\n        id={maskId}\n        maskUnits=\"userSpaceOnUse\"\n        style={{\n          maskType: \"alpha\",\n        }}\n        width={180}\n        x={0}\n        y={0}\n      >\n        <circle cx={90} cy={90} fill=\"black\" r={90} />\n      </mask>\n      <g mask={`url(#${maskId})`}>\n        <circle\n          cx={90}\n          cy={90}\n          fill=\"black\"\n          r={87}\n          stroke=\"white\"\n          strokeWidth={6}\n        />\n        <path\n          d=\"M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z\"\n          fill={`url(#${paint0Id})`}\n        />\n        <rect\n          fill={`url(#${paint1Id})`}\n          height={72}\n          width={12}\n          x={115}\n          y={54}\n        />\n      </g>\n      <defs>\n        <linearGradient\n          gradientUnits=\"userSpaceOnUse\"\n          id={paint0Id}\n          x1={109}\n          x2={144.5}\n          y1={116.5}\n          y2={160.5}\n        >\n          <stop stopColor=\"white\" />\n          <stop offset={1} stopColor=\"white\" stopOpacity={0} />\n        </linearGradient>\n        <linearGradient\n          gradientUnits=\"userSpaceOnUse\"\n          id={paint1Id}\n          x1={121}\n          x2={120.799}\n          y1={54}\n          y2={106.875}\n        >\n          <stop stopColor=\"white\" />\n          <stop offset={1} stopColor=\"white\" stopOpacity={0} />\n        </linearGradient>\n      </defs>\n    </svg>\n  )\n}\n\nexport default HeroLiquidMetal\n",
      "type": "registry:ui"
    }
  ]
}