{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-progress-tracker-shadcnui",
  "type": "registry:page",
  "title": "Scroll Progress Tracker",
  "description": "Fixed progress bar that follows scroll and glows on section changes",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/motion-core/scroll-progress-tracker.tsx",
      "content": "\"use client\";\n\nimport { motion, useScroll, useSpring, useTransform } from \"framer-motion\";\nimport { useEffect, useState } from \"react\";\n\ntype ScrollProgressTrackerProps = {\n  sections?: string[];\n  height?: number;\n};\n\nexport function ScrollProgressTracker({\n  sections = [],\n  height = 4,\n}: ScrollProgressTrackerProps) {\n  // Wrap in a container div to avoid fixed positioning issues in preview\n  return (\n    <div className=\"relative h-16 w-full\">\n      <ScrollProgressTrackerInner sections={sections} height={height} />\n    </div>\n  );\n}\n\nfunction ScrollProgressTrackerInner({\n  sections = [],\n  height = 4,\n}: ScrollProgressTrackerProps) {\n  const { scrollYProgress } = useScroll();\n  const scaleX = useSpring(scrollYProgress, {\n    stiffness: 200,\n    damping: 30,\n  });\n\n  const [currentSection, setCurrentSection] = useState(0);\n\n  useEffect(() => {\n    const unsubscribe = scrollYProgress.on(\"change\", (latest) => {\n      if (sections.length > 0) {\n        const sectionIndex = Math.floor(latest * sections.length);\n        if (sectionIndex !== currentSection) {\n          setCurrentSection(sectionIndex);\n        }\n      }\n    });\n\n    return () => unsubscribe();\n  }, [scrollYProgress, sections.length, currentSection]);\n\n  const colorProgress = useTransform(\n    scrollYProgress,\n    [0, 0.5, 1],\n    [\"rgb(99, 102, 241)\", \"rgb(139, 92, 246)\", \"rgb(236, 72, 153)\"]\n  );\n\n  return (\n    <div className=\"relative h-1 w-full bg-background/50 backdrop-blur-sm\">\n      <motion.div\n        style={{\n          scaleX,\n          backgroundColor: sections.length > 0 ? undefined : colorProgress,\n        }}\n        className=\"h-full origin-left\"\n      >\n        {sections.length > 0 && (\n          <motion.div\n            style={{\n              backgroundColor: colorProgress,\n            }}\n            className=\"h-full w-full\"\n          />\n        )}\n      </motion.div>\n\n      {sections.length > 0 && (\n        <motion.div\n          style={{\n            boxShadow:\n              currentSection < sections.length\n                ? `0 0 20px ${colorProgress.get()}`\n                : \"none\",\n          }}\n          className=\"pointer-events-none absolute inset-0\"\n        />\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:page",
      "target": "components/uitripled/scroll-progress-tracker-shadcnui.tsx"
    }
  ]
}