{
  "name": "reveal",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "reveal.tsx",
      "content": "\"use client\";\r\n\r\nimport { css, themeVars as theme } from \"@yugnex/core\";\r\nimport { useEffect, useRef, useState, type CSSProperties, type ReactNode } from \"react\";\r\n\r\nconst wrapperClass = css({ perspective: \"1000px\" });\r\n\r\nconst innerClass = css({\r\n  opacity: 0,\r\n  transform: \"translateY(28px) rotateX(-10deg)\",\r\n  transformOrigin: \"top center\",\r\n  transitionProperty: \"opacity, transform\",\r\n  transitionDuration: \"700ms\",\r\n  transitionTimingFunction: theme.easing.decelerate,\r\n  '&[data-visible=\"true\"]': {\r\n    opacity: 1,\r\n    transform: \"translateY(0) rotateX(0deg)\",\r\n  },\r\n});\r\n\r\nexport interface RevealProps {\r\n  children: ReactNode;\r\n  className?: string;\r\n  style?: CSSProperties;\r\n  /** Stagger delay in ms, for sequencing a group of Reveals. */\r\n  delay?: number;\r\n}\r\n\r\n/** Fades + 3D-rotates children in the first time they scroll into view. */\r\nexport function Reveal({ children, className, style, delay = 0 }: RevealProps) {\r\n  const ref = useRef<HTMLDivElement>(null);\r\n  const [visible, setVisible] = useState(false);\r\n\r\n  useEffect(() => {\r\n    const el = ref.current;\r\n    if (!el) return;\r\n    const observer = new IntersectionObserver(\r\n      (entries) => {\r\n        if (entries[0]?.isIntersecting) {\r\n          setVisible(true);\r\n          observer.disconnect();\r\n        }\r\n      },\r\n      { threshold: 0.15 },\r\n    );\r\n    observer.observe(el);\r\n    return () => observer.disconnect();\r\n  }, []);\r\n\r\n  return (\r\n    <div className={wrapperClass}>\r\n      <div\r\n        ref={ref}\r\n        data-visible={visible}\r\n        className={className ? `${innerClass} ${className}` : innerClass}\r\n        style={{ transitionDelay: `${delay}ms`, ...style }}\r\n      >\r\n        {children}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}