{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "highlighted-text",
  "title": "Highlighted Text",
  "description": "Text with sliding background highlight animation using mix-blend-mode.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/spell-ui/highlighted-text.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\ntype From = \"left\" | \"right\" | \"top\" | \"bottom\";\n\ninterface HighlightedTextProps {\n  children: React.ReactNode;\n  className?: string;\n  from?: From;\n  delay?: number;\n  inView?: boolean;\n  once?: boolean;\n}\n\nconst fromVariants = {\n  left: {\n    hidden: { x: \"-100%\" },\n    visible: { x: \"0%\" },\n  },\n  right: {\n    hidden: { x: \"100%\" },\n    visible: { x: \"0%\" },\n  },\n  top: {\n    hidden: { y: \"-100%\" },\n    visible: { y: \"0%\" },\n  },\n  bottom: {\n    hidden: { y: \"100%\" },\n    visible: { y: \"0%\" },\n  },\n};\n\nexport function HighlightedText({\n  children,\n  className,\n  from = \"bottom\",\n  delay = 0,\n  inView = false,\n  once = true,\n}: HighlightedTextProps) {\n  const variants = fromVariants[from];\n\n  return (\n    <motion.span\n      className={cn(\n        \"relative inline-flex overflow-hidden align-baseline\",\n        className,\n      )}\n      initial=\"hidden\"\n      whileInView={inView ? \"visible\" : undefined}\n      animate={inView ? undefined : \"visible\"}\n      viewport={{ once }}\n    >\n      <motion.span\n        className=\"absolute inset-0 -left-[0.15em] -right-[0.18em] bg-black dark:bg-white z-0\"\n        variants={variants}\n        transition={{\n          type: \"spring\",\n          damping: 30,\n          stiffness: 300,\n          delay,\n        }}\n      />\n      <span className=\"relative z-10 mix-blend-difference text-white pl-[0.15em] pr-[0.18em]\">\n        {children}\n      </span>\n    </motion.span>\n  );\n}\n\nexport default HighlightedText;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}