{
  "name": "in-view-basic-multiple",
  "type": "registry:ui",
  "componentName": "in-view-basic-multiple",
  "description": "Multiple elements with animations triggered when scrolled into view.",
  "files": [
    {
      "path": "in-view-basic-multiple.tsx",
      "content": "import { InView } from '@/components/core/in-view';\n\nexport function InViewBasicMultiple() {\n  return (\n    <div className='h-[350px] w-full overflow-y-auto overflow-x-hidden'>\n      <div className='mb-36 py-12 text-center text-sm'>Scroll down</div>\n      <div className='flex h-[350px] items-end justify-center px-4 pb-24'>\n        <InView\n          variants={{\n            hidden: {\n              opacity: 0,\n              y: 30,\n              scale: 0.95,\n              filter: 'blur(4px)',\n            },\n            visible: {\n              opacity: 1,\n              y: 0,\n              scale: 1,\n              filter: 'blur(0px)',\n            },\n          }}\n          transition={{ duration: 0.3, ease: 'easeInOut' }}\n          viewOptions={{ margin: '0px 0px -350px 0px' }}\n        >\n          <div className='max-w-96 bg-zinc-100 p-4'>\n            <p className='text-zinc-600'>\n              <strong className='font-medium text-zinc-900'>Athletics.</strong>{' '}\n              Watch running, jumping, and throwing events. Athletes compete in\n              many different activities.\n            </p>\n          </div>\n        </InView>\n      </div>\n      <div className='flex h-[350px] items-end justify-center px-4 pb-24'>\n        <InView\n          variants={{\n            hidden: {\n              opacity: 0,\n              x: 100,\n            },\n            visible: {\n              opacity: 1,\n              x: 0,\n            },\n          }}\n          transition={{ duration: 0.3, ease: 'easeInOut' }}\n          viewOptions={{ margin: '0px 0px -350px 0px' }}\n        >\n          <div className='max-w-96 bg-zinc-900 p-4'>\n            <p className='text-zinc-400'>\n              <strong className='font-medium text-zinc-50'>Swimming.</strong>{' '}\n              See swimmers race in water. They use different styles to swim fast\n              and win medals.\n            </p>\n          </div>\n        </InView>\n      </div>\n      <div className='flex h-[350px] items-end justify-center overflow-x-hidden px-4 pb-24'>\n        <InView\n          variants={{\n            hidden: {\n              opacity: 0,\n              scale: 1.5,\n            },\n            visible: {\n              opacity: 1,\n              scale: 1,\n            },\n          }}\n          transition={{ duration: 0.3, ease: 'easeInOut' }}\n          viewOptions={{ margin: '0px 0px -350px 0px' }}\n        >\n          <div className='max-w-96 bg-zinc-100 p-4'>\n            <p className='text-zinc-600'>\n              <strong className='font-medium'>Gymnastics.</strong> Gymnasts\n              perform amazing flips and jumps. They show strength and balance in\n              their routines.\n            </p>\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"
    }
  ]
}