{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "highlight-text",
  "type": "registry:ui",
  "title": "Highlight Text",
  "description": "A text component that smoothly reveals an animated highlight effect.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/text/highlight/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport {\n  motion,\n  useInView,\n  type HTMLMotionProps,\n  type Transition,\n  type UseInViewOptions,\n} from 'motion/react';\n\nimport { cn } from '@/lib/utils';\n\ntype HighlightTextProps = HTMLMotionProps<'span'> & {\n  text: string;\n  inView?: boolean;\n  inViewMargin?: UseInViewOptions['margin'];\n  inViewOnce?: boolean;\n  transition?: Transition;\n};\n\nfunction HighlightText({\n  ref,\n  text,\n  className,\n  inView = false,\n  inViewMargin = '0px',\n  transition = { duration: 2, ease: 'easeInOut' },\n  ...props\n}: HighlightTextProps) {\n  const localRef = React.useRef<HTMLSpanElement>(null);\n  React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);\n\n  const inViewResult = useInView(localRef, {\n    once: true,\n    margin: inViewMargin,\n  });\n  const isInView = !inView || inViewResult;\n\n  return (\n    <motion.span\n      ref={localRef}\n      data-slot=\"highlight-text\"\n      initial={{\n        backgroundSize: '0% 100%',\n      }}\n      animate={isInView ? { backgroundSize: '100% 100%' } : undefined}\n      transition={transition}\n      style={{\n        backgroundRepeat: 'no-repeat',\n        backgroundPosition: 'left center',\n        display: 'inline',\n      }}\n      className={cn(\n        `relative inline-block px-2 py-1 rounded-lg bg-gradient-to-r from-blue-100 to-purple-100 dark:from-blue-500 dark:to-purple-500`,\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </motion.span>\n  );\n}\n\nexport { HighlightText, type HighlightTextProps };\n",
      "type": "registry:ui",
      "target": "components/animate-ui/text/highlight.tsx"
    }
  ]
}