{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "container-stagger-2-demo",
  "title": "Container Stagger Demo",
  "description": "Demo showing another use case for container stagger with your motion components.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/container-stagger",
    "https://systaliko-ui.vercel.app/r/animation-variants"
  ],
  "files": [
    {
      "path": "registry/demo/blocks/container-stagger-2/index.tsx",
      "content": "'use client';\nimport { ContainerStagger } from '@/components/systaliko-ui/blocks/container-stagger';\nimport { animation_variants } from '@/components/systaliko-ui/utils/animation-variants';\nimport { motion, MotionConfig } from 'motion/react';\n\nconst animationVariants = animation_variants['opacity'];\nexport function ContainerStagger2Demo() {\n  return (\n    <div className=\"p-8\">\n      <div className=\"h-dvh place-content-center place-items-center\">\n        <h1 className=\"text-4xl\">Scroll to see the animation 👇🏻</h1>\n      </div>\n      <ContainerStagger\n        staggerChildren={0.4}\n        className=\"flex overflow-hidden gap-4 justify-center\"\n      >\n        <MotionConfig transition={{ duration: 0.3, ease: 'easeIn' }}>\n          <motion.div\n            variants={animationVariants}\n            className=\" size-16 bg-pink-500 rounded\"\n          />\n\n          <motion.div\n            variants={animationVariants}\n            className=\" size-16 bg-emerald-500 rounded\"\n          />\n\n          <motion.div\n            variants={animationVariants}\n            className=\" size-16 bg-indigo-500 rounded\"\n          />\n\n          <motion.div\n            variants={animationVariants}\n            className=\" size-16 bg-yellow-500 rounded\"\n          />\n          <motion.div\n            variants={animationVariants}\n            className=\" size-16 bg-cyan-500 rounded\"\n          />\n        </MotionConfig>\n      </ContainerStagger>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/blocks/container-stagger.tsx"
    }
  ],
  "type": "registry:block"
}