{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cards-stack-rotated",
  "title": "Cards Stack Rotated",
  "description": "Stack of cards rotated by a defined index value to rotate in sequence, it show one card at a time depending on the scroll position.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "registry/cards/card-testimonial/index.tsx"
  ],
  "files": [
    {
      "path": "registry/cards/cards-stack-rotated/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\nimport {\n  HTMLMotionProps,\n  MotionValue,\n  motion,\n  useMotionTemplate,\n  useScroll,\n  useTransform,\n} from 'motion/react';\n\nimport { cn } from '@/lib/utils';\n\ninterface CardStickyProps extends HTMLMotionProps<'div'> {\n  arrayLength: number;\n  index: number;\n  incrementY?: number;\n  incrementZ?: number;\n  incrementRotation?: number;\n}\ninterface ContainerScrollContextValue {\n  scrollYProgress: MotionValue<number>;\n}\n\nconst ContainerScrollContext = React.createContext<\n  ContainerScrollContextValue | undefined\n>(undefined);\nfunction useContainerScrollContext() {\n  const context = React.useContext(ContainerScrollContext);\n  if (context === undefined) {\n    throw new Error(\n      'useContainerScrollContext must be used within a ContainerScrollContextProvider',\n    );\n  }\n  return context;\n}\n\nexport const ContainerScrollRotatedCards: React.FC<\n  React.HTMLAttributes<HTMLDivElement>\n> = ({ children, style, className, ...props }) => {\n  const scrollRef = React.useRef<HTMLDivElement>(null);\n  const { scrollYProgress } = useScroll({\n    target: scrollRef,\n    offset: ['start center', 'end end'],\n  });\n\n  return (\n    <ContainerScrollContext.Provider value={{ scrollYProgress }}>\n      <div\n        ref={scrollRef}\n        className={cn('relative min-h-svh w-full', className)}\n        style={{ perspective: '1000px', ...style }}\n        {...props}\n      >\n        {children}\n      </div>\n    </ContainerScrollContext.Provider>\n  );\n};\nContainerScrollRotatedCards.displayName = 'ContainerScroll';\n\nexport const CardsContainer: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({\n  children,\n  className,\n  ...props\n}) => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn('stiky top-0 left-0', className)}\n      style={{ perspective: '1000px', ...props.style }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\nCardsContainer.displayName = 'CardsContainer';\n\nexport const CardTransformed = React.forwardRef<\n  HTMLDivElement,\n  CardStickyProps\n>(\n  (\n    {\n      arrayLength,\n      index,\n      incrementY = 10,\n      incrementZ = 10,\n      incrementRotation = -index + 90,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const { scrollYProgress } = useContainerScrollContext();\n\n    const start = index / (arrayLength + 1);\n    const end = (index + 1) / (arrayLength + 1);\n    const range = React.useMemo(() => [start, end], [start, end]);\n    const rotateRange = [range[0] - 1.5, range[1] / 1.5];\n\n    const y = useTransform(scrollYProgress, range, ['0%', '-180%']);\n    const rotate = useTransform(scrollYProgress, rotateRange, [\n      incrementRotation,\n      0,\n    ]);\n    const transform = useMotionTemplate`translateZ(${\n      index * incrementZ\n    }px) translateY(${y}) rotate(${rotate}deg)`;\n\n    const cardStyle = {\n      top: index * incrementY,\n      transform,\n      backfaceVisibility: 'hidden' as const,\n      zIndex: (arrayLength - index) * incrementZ,\n      ...style,\n    };\n    return (\n      <motion.div\n        layout=\"position\"\n        ref={ref}\n        style={cardStyle}\n        className={cn('absolute will-change-transform', className)}\n        {...props}\n      />\n    );\n  },\n);\nCardTransformed.displayName = 'CardTransformed';\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/cards/cards-stack-rotated.tsx"
    }
  ],
  "type": "registry:block"
}