{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-animation",
  "title": "Scroll Animation",
  "description": "Collection of scroll triggered animations, Triggering the animation by scroll event.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/scroll-animations/scroll-animation/index.tsx",
      "content": "'use client';\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport {\n  HTMLMotionProps,\n  MapInputRange,\n  motion,\n  MotionValue,\n  useMotionTemplate,\n  useReducedMotion,\n  useScroll,\n  UseScrollOptions,\n  useSpring,\n  useTransform,\n} from 'motion/react';\n\ninterface ScrollAnimationContextValue {\n  scrollProgress: MotionValue<number>;\n}\nconst ScrollAnimationContext = React.createContext<\n  ScrollAnimationContextValue | undefined\n>(undefined);\n\nexport function useScrollAnimationContext() {\n  const context = React.useContext(ScrollAnimationContext);\n  if (!context) {\n    throw new Error(\n      'useScrollAnimationContext must be used within a ScrollAnimationContextProvider',\n    );\n  }\n  return context;\n}\ninterface ScrollAnimationProps extends React.ComponentPropsWithRef<'div'> {\n  spacerClass?: string;\n  offset?: UseScrollOptions['offset'];\n}\nexport function ScrollAnimation({\n  spacerClass,\n  offset,\n  className,\n  children,\n  ...props\n}: ScrollAnimationProps) {\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    <ScrollAnimationContext.Provider value={{ scrollProgress }}>\n      <div ref={scrollRef} className={cn('relative', className)} {...props}>\n        {children}\n        <div className={cn('w-full h-96', spacerClass)} />\n      </div>\n    </ScrollAnimationContext.Provider>\n  );\n}\n\nexport function ScrollInsetX({\n  insetRange = [48, 0],\n  inputRange = [0, 1],\n  className,\n  style,\n  ...props\n}: HTMLMotionProps<'div'> & { insetRange?: number[]; inputRange?: number[] }) {\n  const { scrollProgress } = useScrollAnimationContext();\n  const xInset = useTransform(scrollProgress, inputRange, insetRange);\n  const clipPath = useMotionTemplate`inset(0px ${xInset}px)`;\n  return (\n    <motion.div\n      className={className}\n      style={{ clipPath, willChange: 'clip-path', ...style }}\n      {...props}\n    />\n  );\n}\nexport function ScrollInsetY({\n  insetRange = [48, 0],\n  inputRange = [0, 1],\n  className,\n  style,\n  ...props\n}: HTMLMotionProps<'div'> & { insetRange?: number[]; inputRange?: number[] }) {\n  const { scrollProgress } = useScrollAnimationContext();\n  const yInset = useTransform(scrollProgress, inputRange, insetRange);\n  const clipPath = useMotionTemplate`inset(${yInset}px 0px)`;\n  return (\n    <motion.div\n      className={className}\n      style={{ clipPath, willChange: 'clip-path', ...style }}\n      {...props}\n    />\n  );\n}\n\nexport function ScrollInset({\n  inputRange = [0, 1],\n  insetRangeY = [45, 0],\n  insetXRange = [45, 0],\n  roundednessRange = [16, 16],\n  className,\n  style,\n  ...props\n}: HTMLMotionProps<'div'> & {\n  inputRange?: MapInputRange;\n  insetRangeY?: unknown[];\n  insetXRange?: unknown[];\n  roundednessRange?: unknown[];\n}) {\n  const { scrollProgress } = useScrollAnimationContext();\n  const insetY = useTransform(scrollProgress, inputRange, insetRangeY);\n  const insetX = useTransform(scrollProgress, inputRange, insetXRange);\n  const roundedness = useTransform(\n    scrollProgress,\n    inputRange,\n    roundednessRange,\n  );\n\n  const clipPath = useMotionTemplate`inset(${insetY}% ${insetX}% ${insetY}% ${insetX}% round ${roundedness}px)`;\n  return (\n    <motion.div\n      className={className}\n      style={{ clipPath, willChange: 'clip-path', ...style }}\n      {...props}\n    />\n  );\n}\n\nexport function ScrollTranslateY({\n  yRange = [0, 384],\n  inputRange = [0, 1],\n  style,\n  className,\n  ...props\n}: HTMLMotionProps<'div'> & { yRange?: unknown[]; inputRange?: number[] }) {\n  const { scrollProgress } = useScrollAnimationContext();\n  const y = useTransform(scrollProgress, inputRange, yRange);\n  return (\n    <motion.div\n      style={{ y, willChange: 'transform', ...style }}\n      className={cn('relative origin-top', className)}\n      {...props}\n    />\n  );\n}\n\nexport function ScrollTranslateX({\n  xRange = [0, 100],\n  inputRange = [0, 1],\n  style,\n  className,\n  ...props\n}: HTMLMotionProps<'div'> & { xRange?: unknown[]; inputRange?: number[] }) {\n  const { scrollProgress } = useScrollAnimationContext();\n  const x = useTransform(scrollProgress, inputRange, xRange);\n  return (\n    <motion.div\n      style={{ x, willChange: 'transform', ...style }}\n      className={cn('relative origin-top', className)}\n      {...props}\n    />\n  );\n}\nexport function ScrollOpacity({\n  opacityRange = [0, 1],\n  inputRange = [0, 1],\n  style,\n  ...props\n}: HTMLMotionProps<'div'> & {\n  opacityRange?: unknown[];\n  inputRange?: number[];\n}) {\n  const { scrollProgress } = useScrollAnimationContext();\n  const opacity = useTransform(scrollProgress, inputRange, opacityRange);\n  return (\n    <motion.div\n      style={{ opacity, willChange: 'opacity', ...style }}\n      {...props}\n    />\n  );\n}\nexport function ScrollScale({\n  scaleRange = [1.2, 1],\n  inputRange = [0, 1],\n  className,\n  style,\n  ...props\n}: HTMLMotionProps<'div'> & { scaleRange?: unknown[]; inputRange?: number[] }) {\n  const { scrollProgress } = useScrollAnimationContext();\n  const scale = useTransform(scrollProgress, inputRange, scaleRange);\n  return (\n    <motion.div\n      className={className}\n      style={{ scale, willChange: 'transform', ...style }}\n      {...props}\n    />\n  );\n}\nexport function ScrollRadius({\n  radiusRange = [9999, 16],\n  inputRange = [0, 1],\n  className,\n  style,\n  ...props\n}: HTMLMotionProps<'div'> & {\n  radiusRange?: unknown[];\n  inputRange?: number[];\n}) {\n  const { scrollProgress } = useScrollAnimationContext();\n  const borderRadius = useTransform(scrollProgress, inputRange, radiusRange);\n  return (\n    <motion.div\n      layout\n      className={className}\n      style={{ borderRadius, willChange: 'border-radius', ...style }}\n      {...props}\n    />\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/scroll-animation.tsx"
    }
  ],
  "type": "registry:block"
}