{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "container-stagger",
  "title": "Stagger Animations",
  "description": "Animated Block with orchestrated stagger animations, for your motion components, the animations are triggered by view.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/blocks/container-stagger/index.tsx",
      "content": "'use client';\nimport { HTMLMotionProps, motion } from 'motion/react';\nimport * as React from 'react';\n\ninterface ContainerStaggerProps extends HTMLMotionProps<'div'> {\n  staggerChildren?: number;\n  delayChildren?: number;\n  staggerDirection?: 1 | -1;\n}\n\nexport const ContainerStagger = React.forwardRef<\n  HTMLDivElement,\n  ContainerStaggerProps\n>(\n  (\n    {\n      staggerChildren = 0.2,\n      delayChildren = 0.2,\n      staggerDirection = 1,\n      className,\n      transition,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <motion.div\n        ref={ref}\n        className={className}\n        initial=\"hidden\"\n        whileInView=\"visible\"\n        viewport={{ once: true }}\n        transition={{\n          staggerChildren,\n          delayChildren,\n          staggerDirection,\n          ...transition,\n        }}\n        {...props}\n      />\n    );\n  },\n);\nContainerStagger.displayName = 'ContainerStagger';\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/container-stagger.tsx"
    }
  ],
  "type": "registry:block"
}