{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-shiny-text",
  "type": "registry:ui",
  "title": "Animated Shiny Text",
  "description": "A light glare effect which pans across text making it appear as if it is shimmering.",
  "files": [
    {
      "path": "registry/magicui/animated-shiny-text.tsx",
      "content": "import {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type FC,\n} from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface AnimatedShinyTextProps extends ComponentPropsWithoutRef<\"span\"> {\n  shimmerWidth?: number\n}\n\nexport const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({\n  children,\n  className,\n  shimmerWidth = 100,\n  ...props\n}) => {\n  return (\n    <span\n      style={\n        {\n          \"--shiny-width\": `${shimmerWidth}px`,\n        } as CSSProperties\n      }\n      className={cn(\n        \"mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70\",\n\n        // Shine effect\n        \"animate-shiny-text bg-size-[var(--shiny-width)_100%] bg-clip-text bg-position-[0_0] bg-no-repeat [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]\",\n\n        // Shine gradient\n        \"bg-linear-to-r from-transparent via-black/80 via-50% to-transparent dark:via-white/80\",\n\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "animate-shiny-text": "shiny-text 8s infinite"
    }
  },
  "css": {
    "@keyframes shiny-text": {
      "0%, 90%, 100%": {
        "background-position": "calc(-100% - var(--shiny-width)) 0"
      },
      "30%, 60%": {
        "background-position": "calc(100% + var(--shiny-width)) 0"
      }
    }
  }
}