{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "line-shadow-text",
  "type": "registry:ui",
  "title": "Line Shadow Text",
  "description": "A text component with a moving line shadow.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/magicui/line-shadow-text.tsx",
      "content": "\"use client\"\n\nimport { type CSSProperties, type HTMLAttributes } from \"react\"\nimport {\n  motion,\n  type DOMMotionComponents,\n  type MotionProps,\n} from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst motionElements = {\n  article: motion.article,\n  div: motion.div,\n  h1: motion.h1,\n  h2: motion.h2,\n  h3: motion.h3,\n  h4: motion.h4,\n  h5: motion.h5,\n  h6: motion.h6,\n  li: motion.li,\n  p: motion.p,\n  section: motion.section,\n  span: motion.span,\n} as const\n\ntype MotionElementType = Extract<\n  keyof DOMMotionComponents,\n  keyof typeof motionElements\n>\n\ninterface LineShadowTextProps\n  extends Omit<HTMLAttributes<HTMLElement>, keyof MotionProps>, MotionProps {\n  children: string\n  shadowColor?: string\n  as?: MotionElementType\n}\n\nexport function LineShadowText({\n  children,\n  shadowColor = \"black\",\n  className,\n  as: Component = \"span\",\n  ...props\n}: LineShadowTextProps) {\n  const MotionComponent = motionElements[Component]\n\n  return (\n    <MotionComponent\n      style={{ \"--shadow-color\": shadowColor } as CSSProperties}\n      className={cn(\n        \"relative z-0 inline-flex\",\n        \"after:absolute after:top-[0.04em] after:left-[0.04em] after:content-[attr(data-text)]\",\n        \"after:bg-[linear-gradient(45deg,transparent_45%,var(--shadow-color)_45%,var(--shadow-color)_55%,transparent_0)]\",\n        \"after:-z-10 after:bg-size-[0.06em_0.06em] after:bg-clip-text after:text-transparent\",\n        \"after:animate-line-shadow\",\n        className\n      )}\n      data-text={children}\n      {...props}\n    >\n      {children}\n    </MotionComponent>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "animate-line-shadow": "line-shadow 15s linear infinite"
    }
  },
  "css": {
    "@keyframes line-shadow": {
      "0%": {
        "background-position": "0 0"
      },
      "100%": {
        "background-position": "100% -100%"
      }
    }
  }
}