{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "distributed-cards",
  "title": "Distr",
  "description": "Distributed cards, same as soliter, starts all at one position then animates to its position.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/scroll-animations/distributed-cards/index.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport type { ClassValue } from 'clsx';\nimport {\n  motion,\n  HTMLMotionProps,\n  MotionValue,\n  useScroll,\n  useTransform,\n  MapInputRange,\n  useMotionTemplate,\n} from 'motion/react';\nimport React from 'react';\n\ninterface DistributedCardsProps extends React.ComponentPropsWithRef<'div'> {\n  offset?: any;\n  spacerClassName?: ClassValue;\n}\ninterface DistributedCardsContextValue {\n  scrollYProgress: MotionValue<number>;\n}\ninterface DistributedCardsContainerProps extends HTMLMotionProps<'div'> {\n  yRange?: unknown[];\n  inputRange?: MapInputRange;\n}\ninterface DistributedCardCellProps extends HTMLMotionProps<'div'> {\n  yRange: unknown[];\n  xRange: unknown[];\n  rotateRange?: unknown[];\n  inputRange?: MapInputRange;\n}\n\nconst DistributedCardsContext = React.createContext<\n  DistributedCardsContextValue | undefined\n>(undefined);\nexport function useDistributedCardsContext() {\n  const context = React.useContext(DistributedCardsContext);\n  if (!context) {\n    throw new Error(\n      'useDistributedCardsContext must be used within a DistributedCardsContextProvider',\n    );\n  }\n  return context;\n}\nexport function DistributedCards({\n  offset = ['start start', 'end end'],\n  spacerClassName,\n  className,\n  children,\n  ...props\n}: DistributedCardsProps) {\n  const scrollRef = React.useRef<HTMLDivElement>(null);\n  const { scrollYProgress } = useScroll({\n    target: scrollRef,\n    offset: ['start start', 'end end'],\n  });\n\n  return (\n    <DistributedCardsContext.Provider value={{ scrollYProgress }}>\n      <div ref={scrollRef} className={cn('relative', className)} {...props}>\n        {children}\n        <div className={cn('h-96', className)} />\n      </div>\n    </DistributedCardsContext.Provider>\n  );\n}\n\nexport function DistributedCardsContainer({\n  yRange = [0, 384],\n  inputRange = [0, 1],\n  className,\n  style,\n  ...props\n}: DistributedCardsContainerProps) {\n  const { scrollYProgress } = useDistributedCardsContext();\n  const y = useTransform(scrollYProgress, inputRange, yRange);\n  return (\n    <motion.div\n      className={cn('w-full', className)}\n      style={{ y, ...style }}\n      {...props}\n    />\n  );\n}\n\nexport function DistributedCardCell({\n  yRange,\n  xRange,\n  inputRange = [0, 1],\n  rotateRange = [-5, 0],\n  style,\n  ...props\n}: DistributedCardCellProps) {\n  const { scrollYProgress } = useDistributedCardsContext();\n  const x = useTransform(scrollYProgress, inputRange, xRange);\n  const y = useTransform(scrollYProgress, inputRange, yRange);\n  const rotate = useTransform(scrollYProgress, inputRange, rotateRange);\n  const transform = useMotionTemplate`translateX(${x}) translateY(${y}) rotate(${rotate}deg)`;\n  return (\n    <motion.div\n      style={{\n        transform,\n        ...style,\n      }}\n      {...props}\n    />\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/distributed-cards.tsx"
    }
  ],
  "type": "registry:block"
}