{
  "name": "in-view-images-grid",
  "type": "registry:ui",
  "componentName": "in-view-images-grid",
  "description": "Grid of images with staggered animations when scrolled into view.",
  "files": [
    {
      "path": "in-view-images-grid.tsx",
      "content": "'use client';\nimport { InView } from '@/components/core/in-view';\nimport { motion } from 'motion/react';\n\nexport function InViewImagesGrid() {\n  return (\n    <div className='h-full w-full overflow-auto'>\n      <div className='mb-20 py-12 text-center text-sm'>Scroll down</div>\n      <div className='flex h-[1200px] items-end justify-center pb-12'>\n        <InView\n          viewOptions={{ once: true, margin: '0px 0px -250px 0px' }}\n          variants={{\n            hidden: {\n              opacity: 0,\n            },\n            visible: {\n              opacity: 1,\n              transition: {\n                staggerChildren: 0.09,\n              },\n            },\n          }}\n        >\n          <div className='columns-2 gap-4 px-8 sm:columns-3'>\n            {[\n              'https://images.beta.cosmos.so/e5ebb6f8-8202-40ec-bc70-976f81153501?format=jpeg',\n              'https://images.beta.cosmos.so/1b6f1bee-1b4c-4035-9e93-c93ef4d445e1?format=jpeg',\n              'https://images.beta.cosmos.so/9968a6cf-d7f6-4ec9-a56d-ac4eef3f8689?format=jpeg',\n              'https://images.beta.cosmos.so/4b88a39c-c657-4911-b843-b473237e83b5?format=jpeg',\n              'https://images.beta.cosmos.so/86af92c0-064d-4801-b7ed-232535b03328?format=jpeg',\n              'https://images.beta.cosmos.so/399e2a4a-e118-4aaf-9c7e-155ed18f6556?format=jpeg',\n              'https://images.beta.cosmos.so/6ff16bc9-dc94-4549-a057-673a603ce203?format=jpeg',\n              'https://images.beta.cosmos.so/d67c3185-4480-4408-8f9d-1cbf541e5d91?format=jpeg',\n              'https://images.beta.cosmos.so/a7b19274-3370-4080-b734-e8ac268d8c8e.?format=jpeg',\n              'https://images.beta.cosmos.so/551daf0d-77e8-472c-9324-468fed15a0ba?format=jpeg',\n            ].map((imgSrc, index) => {\n              return (\n                <motion.div\n                  variants={{\n                    hidden: { opacity: 0, scale: 0.8, filter: 'blur(10px)' },\n                    visible: {\n                      opacity: 1,\n                      scale: 1,\n                      filter: 'blur(0px)',\n                    },\n                  }}\n                  key={index}\n                  className='mb-4'\n                >\n                  <img\n                    src={imgSrc}\n                    alt={`Image placeholder from cosmos.so, index:${index}`}\n                    className='size-full rounded-lg object-contain'\n                  />\n                </motion.div>\n              );\n            })}\n          </div>\n        </InView>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/core/in-view.tsx",
      "content": "'use client';\nimport { ReactNode, useRef, useState } from 'react';\nimport {\n  motion,\n  useInView,\n  Variant,\n  Transition,\n  UseInViewOptions,\n} from 'motion/react';\n\nexport type InViewProps = {\n  children: ReactNode;\n  variants?: {\n    hidden: Variant;\n    visible: Variant;\n  };\n  transition?: Transition;\n  viewOptions?: UseInViewOptions;\n  as?: React.ElementType;\n  once?: boolean\n};\n\nconst defaultVariants = {\n  hidden: { opacity: 0 },\n  visible: { opacity: 1 },\n};\n\nexport function InView({\n  children,\n  variants = defaultVariants,\n  transition,\n  viewOptions,\n  as = 'div',\n  once\n}: InViewProps) {\n  const ref = useRef(null);\n  const isInView = useInView(ref, viewOptions);\n\n  const [isViewed, setIsViewed] = useState(false)\n\n  const MotionComponent = motion[as as keyof typeof motion] as typeof as;\n\n  return (\n    <MotionComponent\n      ref={ref}\n      initial='hidden'\n      onAnimationComplete={() => {\n        if (once) setIsViewed(true)\n      }}\n      animate={(isInView || isViewed) ? \"visible\" : \"hidden\"}\n\n      variants={variants}\n      transition={transition}\n    >\n      {children}\n    </MotionComponent>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}