{
  "name": "infinite-slider-vertical",
  "type": "registry:ui",
  "componentName": "infinite-slider-vertical",
  "description": "Vertical orientation of the infinite slider component.",
  "files": [
    {
      "path": "infinite-slider-vertical.tsx",
      "content": "import { InfiniteSlider } from '@/components/core/infinite-slider';\n\nexport function InfiniteSliderVertical() {\n  return (\n    <div className='flex h-[350px] space-x-4'>\n      <InfiniteSlider direction='vertical'>\n        <img\n          src='https://i.scdn.co/image/ab67616d00001e02ad24c5e36ddcd1957ad35677'\n          alt='Dean blunt - Black Metal 2'\n          className='aspect-square w-[120px] rounded-[4px]'\n        />\n        <img\n          src='https://i.scdn.co/image/ab67616d00001e02af73f776b92d4614152fb141'\n          alt='Jungle Jack - JUNGLE DES ILLUSIONS VOL 2'\n          className='aspect-square w-[120px] rounded-[4px]'\n        />\n        <img\n          src='https://i.scdn.co/image/ab67616d00001e02ecdb8f824367a53468100faf'\n          alt='Yung Lean - Stardust'\n          className='aspect-square w-[120px] rounded-[4px]'\n        />\n        <img\n          src='https://i.scdn.co/image/ab67616d00001e021624590458126fc8b8c64c2f'\n          alt='Lana Del Rey - Ultraviolence'\n          className='aspect-square w-[120px] rounded-[4px]'\n        />\n        <img\n          src='https://i.scdn.co/image/ab67616d00001e020dcf0f3680cff56fe5ff2288'\n          alt='A$AP Rocky - Tailor Swif'\n          className='aspect-square w-[120px] rounded-[4px]'\n        />\n        <img\n          src='https://i.scdn.co/image/ab67616d00001e02bc1028b7e9cd2b17c770a520'\n          alt='Midnight Miami (feat Konvy) - Nino Paid, Konvy'\n          className='aspect-square w-[120px] rounded-[4px]'\n        />\n      </InfiniteSlider>\n      <InfiniteSlider direction='vertical' reverse>\n        <img\n          src='https://i.scdn.co/image/ab67616d00001e020fc93fe41791c5aa51ae9645'\n          alt='DAYS BEFORE RODEO - Travis Scott'\n          className='aspect-square w-[120px] rounded-[4px]'\n        />\n        <img\n          src='https://i.scdn.co/image/ab67616d00001e02d3e668d0c74720c8c23978e3'\n          alt=\"You're in My System - TORYONTHEBEAT\"\n          className='aspect-square w-[120px] rounded-[4px]'\n        />\n        <img\n          src='https://i.scdn.co/image/ab67616d00001e0234537499b159b0e6d18e5655'\n          alt=\"You can't tell me - People Make the World Go Round\"\n          className='aspect-square w-[120px] rounded-[4px]'\n        />\n        <img\n          src='https://i.scdn.co/image/ab67616d00001e020cd942c1a864afa4e92d04f2'\n          alt='ye - Kanye West'\n          className='aspect-square w-[120px] rounded-[4px]'\n        />\n        <img\n          src='https://i.scdn.co/image/ab67616d00001e02a875c3ec944b4f164ab5c350'\n          alt='Slime Season 3 - Young Thug'\n          className='aspect-square w-[120px] rounded-[4px]'\n        />\n        <img\n          src='https://i.scdn.co/image/ab67616d00001e026376f0d88bbbc8cd051e3401'\n          alt='SWAG - 8ruki'\n          className='aspect-square w-[120px] rounded-[4px]'\n        />\n      </InfiniteSlider>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/core/infinite-slider.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport { useMotionValue, animate, motion } from 'motion/react';\nimport { useState, useEffect } from 'react';\nimport useMeasure from 'react-use-measure';\n\nexport type InfiniteSliderProps = {\n  children: React.ReactNode;\n  gap?: number;\n  speed?: number;\n  speedOnHover?: number;\n  direction?: 'horizontal' | 'vertical';\n  reverse?: boolean;\n  className?: string;\n};\n\nexport function InfiniteSlider({\n  children,\n  gap = 16,\n  speed = 100,\n  speedOnHover,\n  direction = 'horizontal',\n  reverse = false,\n  className,\n}: InfiniteSliderProps) {\n  const [isHovering, setIsHovering] = useState(false);\n  const currentSpeed = isHovering && speedOnHover ? speedOnHover : speed;\n  const [ref, { width, height }] = useMeasure();\n  const translation = useMotionValue(0);\n  const [isTransitioning, setIsTransitioning] = useState(false);\n  const [key, setKey] = useState(0);\n\n  useEffect(() => {\n    let controls;\n    const size = direction === 'horizontal' ? width : height;\n    const contentSize = size + gap;\n    const from = reverse ? -contentSize / 2 : 0;\n    const to = reverse ? 0 : -contentSize / 2;\n\n    const distanceToTravel = Math.abs(to - from);\n    const duration = distanceToTravel / currentSpeed;\n\n    if (isTransitioning) {\n      const remainingDistance = Math.abs(translation.get() - to);\n      const transitionDuration = remainingDistance / currentSpeed;\n\n      controls = animate(translation, [translation.get(), to], {\n        ease: 'linear',\n        duration: transitionDuration,\n        onComplete: () => {\n          setIsTransitioning(false);\n          setKey((prevKey) => prevKey + 1);\n        },\n      });\n    } else {\n      controls = animate(translation, [from, to], {\n        ease: 'linear',\n        duration: duration,\n        repeat: Infinity,\n        repeatType: 'loop',\n        repeatDelay: 0,\n        onRepeat: () => {\n          translation.set(from);\n        },\n      });\n    }\n\n    return controls?.stop;\n  }, [\n    key,\n    translation,\n    currentSpeed,\n    width,\n    height,\n    gap,\n    isTransitioning,\n    direction,\n    reverse,\n  ]);\n\n  const hoverProps = speedOnHover\n    ? {\n        onHoverStart: () => {\n          setIsTransitioning(true);\n          setIsHovering(true);\n        },\n        onHoverEnd: () => {\n          setIsTransitioning(true);\n          setIsHovering(false);\n        },\n      }\n    : {};\n\n  return (\n    <div className={cn('overflow-hidden', className)}>\n      <motion.div\n        className='flex w-max'\n        style={{\n          ...(direction === 'horizontal'\n            ? { x: translation }\n            : { y: translation }),\n          gap: `${gap}px`,\n          flexDirection: direction === 'horizontal' ? 'row' : 'column',\n        }}\n        ref={ref}\n        {...hoverProps}\n      >\n        {children}\n        {children}\n      </motion.div>\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}