{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-animation-rotate",
  "title": "Scroll Rotation Animation",
  "description": "Collection of scroll rotation animations, Triggering the animation by scroll event.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/scroll-animations/scroll-animation-rotate/index.tsx",
      "content": "'use client';\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\n\nimport {\n  HTMLMotionProps,\n  motion,\n  MotionValue,\n  useMotionTemplate,\n  useReducedMotion,\n  useScroll,\n  UseScrollOptions,\n  useSpring,\n  useTransform,\n} from 'motion/react';\n\ninterface ScrollAnimationRotateContextValue {\n  scrollProgress: MotionValue<number>;\n}\ninterface ScrollAnimationRotateProps {\n  spacerClass?: string;\n  offset?: UseScrollOptions['offset'];\n}\nconst ScrollAnimationRotateContext = React.createContext<\n  ScrollAnimationRotateContextValue | undefined\n>(undefined);\nexport function useScrollAnimationRotateContext() {\n  const context = React.useContext(ScrollAnimationRotateContext);\n  if (!context) {\n    throw new Error(\n      'useScrollAnimationRotateContext must be used within a GalleryRotatedScrollContextProvider',\n    );\n  }\n  return context;\n}\n\nexport const ScrollAnimationRotate = ({\n  spacerClass,\n  offset = ['start center', 'center center'],\n  children,\n  className,\n  style,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> & ScrollAnimationRotateProps) => {\n  const scrollRef = React.useRef<HTMLDivElement>(null);\n  const { scrollYProgress } = useScroll({\n    target: scrollRef,\n    offset: offset,\n  });\n  const smoothProgress = useSpring(scrollYProgress, {\n    damping: 30,\n    stiffness: 400,\n    restDelta: 0.001,\n  });\n  const reducedMotion = useReducedMotion();\n  const scrollProgress = reducedMotion ? scrollYProgress : smoothProgress;\n\n  return (\n    <ScrollAnimationRotateContext.Provider value={{ scrollProgress }}>\n      <div\n        ref={scrollRef}\n        className={cn('relative perspective-distant', className)}\n        style={{\n          perspectiveOrigin: 'center top',\n          transformStyle: 'preserve-3d',\n          transformOrigin: '50% 50%',\n          ...style,\n        }}\n        {...props}\n      >\n        {children}\n        <div className={cn('w-full h-96', spacerClass)} />\n      </div>\n    </ScrollAnimationRotateContext.Provider>\n  );\n};\nScrollAnimationRotate.displayName = 'ScrollAnimationRotate';\n\ninterface ScrollAnimationRotateContainerProps extends HTMLMotionProps<'div'> {\n  yRange?: [number, number];\n  rotateRange?: [number, number];\n  scaleRange?: [number, number];\n  rotationDirection?: 'x' | 'y' | 'z';\n}\nexport const ScrollAnimationRotateContainer = React.forwardRef<\n  HTMLDivElement,\n  ScrollAnimationRotateContainerProps\n>(\n  (\n    {\n      yRange = [0, 350],\n      rotateRange = [80, 0],\n      scaleRange = [1.1, 1],\n      className,\n      rotationDirection = 'x',\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const { scrollProgress } = useScrollAnimationRotateContext();\n\n    const y = useTransform(scrollProgress, [0, 1], yRange);\n\n    const rotate = useTransform(scrollProgress, [0, 0.5], rotateRange);\n    const scale = useTransform(scrollProgress, [0.5, 0.9], scaleRange);\n    const transform = useMotionTemplate`rotate${rotationDirection.toUpperCase()}(${rotate}deg) scale(${scale}) translateY(${y}px)`;\n    return (\n      <motion.div\n        ref={ref}\n        className={cn('flex relative', className)}\n        style={{\n          transform,\n          ...style,\n        }}\n        {...props}\n      />\n    );\n  },\n);\nScrollAnimationRotateContainer.displayName = 'ScrollAnimationRotateContainer';\n\nexport const ScrollAnimationRotateCol = React.forwardRef<\n  HTMLDivElement,\n  HTMLMotionProps<'div'> & { yRange?: [string, string] }\n>(({ yRange = ['-5%', '1%'], className, style, ...props }, ref) => {\n  const { scrollProgress } = useScrollAnimationRotateContext();\n\n  const y = useTransform(scrollProgress, [0.4, 0.8], yRange);\n  // 0 25px 50px -12px rgb(0 0 0 / 0.25)\n  return (\n    <motion.div\n      ref={ref}\n      className={cn('relative flex flex-col w-full', className)}\n      style={{\n        y,\n        backfaceVisibility: 'hidden',\n        ...style,\n      }}\n      {...props}\n    />\n  );\n});\nScrollAnimationRotateCol.displayName = 'ScrollAnimationRotateCol';\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/scroll-animation-rotate.tsx"
    }
  ],
  "type": "registry:block"
}