{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "box-reveal",
  "title": "Box Reveal",
  "description": "A smooth reveal animation that slides a colored overlay away to introduce content as it enters the viewport.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/react/atlasui/box-reveal.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\nimport { motion, useAnimation, useInView } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface BoxRevealProps {\n  children: React.ReactNode;\n  side?: \"left\" | \"right\";\n  width?: \"fit-content\" | \"full\";\n  color?: string;\n  className?: string;\n}\n\nexport const BoxReveal = ({\n  children,\n  side = \"left\",\n  width = \"fit-content\",\n  color = \"#FACC15\",\n  className,\n}: BoxRevealProps) => {\n  const ref = useRef(null);\n  const isInView = useInView(ref, { once: true });\n\n  const contentAnimation = useAnimation();\n  const overlayAnimation = useAnimation();\n\n  useEffect(() => {\n    if (isInView) {\n      contentAnimation.start(\"visible\");\n      overlayAnimation.start(\"visible\");\n    }\n  }, [isInView, contentAnimation, overlayAnimation]);\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative overflow-hidden\",\n        width === \"full\" ? \"w-full\" : \"w-fit\",\n        className\n      )}\n    >\n      <motion.div\n        variants={{\n          hidden: { opacity: 0, y: 75 },\n          visible: { opacity: 1, y: 0 },\n        }}\n        initial=\"hidden\"\n        animate={contentAnimation}\n        transition={{ duration: 0.5, delay: 0.35 }}\n        viewport={{ once: true }}\n      >\n        {children}\n      </motion.div>\n\n      <motion.div\n        variants={{\n          hidden: side === \"right\" ? { right: 0 } : { left: 0 },\n          visible: side === \"right\" ? { right: \"100%\" } : { left: \"100%\" },\n        }}\n        initial=\"hidden\"\n        animate={overlayAnimation}\n        transition={{ duration: 0.5, ease: \"easeIn\" }}\n        viewport={{ once: true }}\n        className=\"pointer-events-none absolute inset-0 top-1 bottom-1 z-20\"\n        style={{\n          background: color,\n        }}\n      />\n    </div>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}