{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-text-marquee-bidirectional",
  "dependencies": [
    "motion",
    "@motionone/utils"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/text-animation/text-marque/animationtwo.tsx",
      "content": "'use client';\nimport ScrollBaseAnimation from '@/components/ui/scroll-text-marque';\nimport React from 'react';\n\nfunction Animationtwo() {\n  return (\n    <>\n      <div className='h-[500px] grid place-content-center'>\n        <ScrollBaseAnimation\n          // delay={500}\n          baseVelocity={3}\n          scrollDependent={true}\n          clasname='font-bold tracking-[-0.07em] leading-[90%]'\n        >\n          Best Component library For Developer\n        </ScrollBaseAnimation>\n      </div>\n    </>\n  );\n}\n\nexport default Animationtwo;\n",
      "type": "registry:component"
    },
    {
      "path": "./components/ui/scroll-text-marque.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport { wrap } from '@motionone/utils';\nimport {\n  motion,\n  useAnimationFrame,\n  useMotionValue,\n  useScroll,\n  useSpring,\n  useTransform,\n  useVelocity,\n} from 'motion/react';\nimport { useEffect, useRef } from 'react';\n\ninterface ParallaxProps {\n  children: string;\n  baseVelocity: number;\n  clasname?: string;\n  scrollDependent?: boolean; // Toggle scroll-dependent behavior\n  delay?: number; // Delay before animation starts\n}\n\nexport default function ScrollBaseAnimation({\n  children,\n  baseVelocity = -5,\n  clasname,\n  scrollDependent = false, // Default to false\n  delay = 0, // Default delay is 0 (no delay)\n}: ParallaxProps) {\n  const baseX = useMotionValue(0);\n  const { scrollY } = useScroll();\n  const scrollVelocity = useVelocity(scrollY);\n  const smoothVelocity = useSpring(scrollVelocity, {\n    damping: 50,\n    stiffness: 400,\n  });\n  const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 2], {\n    clamp: false,\n  });\n\n  const x = useTransform(baseX, (v) => `${wrap(-20, -45, v)}%`);\n\n  const directionFactor = useRef<number>(1);\n  const hasStarted = useRef(false); // Track animation start status\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      hasStarted.current = true; // Start animation after the delay\n    }, delay);\n\n    return () => clearTimeout(timer); // Cleanup on unmount\n  }, [delay]);\n\n  useAnimationFrame((t, delta) => {\n    if (!hasStarted.current) return; // Skip if delay hasn't passed\n\n    let moveBy = directionFactor.current * baseVelocity * (delta / 1000);\n\n    // Reverse direction if scrollDependent is true\n    if (scrollDependent) {\n      if (velocityFactor.get() < 0) {\n        directionFactor.current = -1;\n      } else if (velocityFactor.get() > 0) {\n        directionFactor.current = 1;\n      }\n    }\n\n    moveBy += directionFactor.current * moveBy * velocityFactor.get();\n\n    baseX.set(baseX.get() + moveBy);\n  });\n\n  return (\n    <div className='overflow-hidden whitespace-nowrap flex flex-nowrap'>\n      <motion.div className='flex whitespace-nowrap gap-10 flex-nowrap' style={{ x }}>\n        <span className={cn(`block sm:text-[8vw] text-[11vw]`, clasname)}>{children}</span>\n        <span className={cn(`block sm:text-[8vw] text-[11vw]`, clasname)}>{children}</span>\n        <span className={cn(`block sm:text-[8vw] text-[11vw]`, clasname)}>{children}</span>\n        <span className={cn(`block sm:text-[8vw] text-[11vw]`, clasname)}>{children}</span>\n      </motion.div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}