{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cards-stack",
  "title": "Cards Stack",
  "description": "Stack of cards to showcase a related set of element, like your services, your work, features, process of work, timeline, etc.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/cards/cards-stack/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { HTMLMotionProps, motion } from 'motion/react';\n\nimport { cn } from '@/lib/utils';\n\ninterface CardStickyProps extends HTMLMotionProps<'div'> {\n  index?: number;\n  incrementY?: number;\n  incrementZ?: number;\n}\n\nexport const CardsStackContainer = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLProps<HTMLDivElement>\n>(({ children, className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn('relative w-full', className)}\n      style={{ perspective: '1000px', ...props.style }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\nCardsStackContainer.displayName = 'CardsStackContainer';\n\nexport const CardSticky = React.forwardRef<HTMLDivElement, CardStickyProps>(\n  (\n    {\n      index = 1,\n      incrementY = 10,\n      incrementZ = 10,\n      children,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const y = index * incrementY;\n    const z = index * incrementZ;\n\n    return (\n      <motion.div\n        ref={ref}\n        layout=\"position\"\n        style={{\n          top: y,\n          z,\n          backfaceVisibility: 'hidden',\n          ...style,\n        }}\n        className={cn('sticky', className)}\n        {...props}\n      >\n        {children}\n      </motion.div>\n    );\n  },\n);\nCardSticky.displayName = 'CardSticky';\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/cards/cards-stack.tsx"
    }
  ],
  "type": "registry:block"
}