{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-reveal",
  "title": "Scroll Reveal",
  "description": "Intersection Observer reveal with direction and reduced-motion behavior.",
  "registryDependencies": [
    "https://components.exe.xyz/r/use-reduced-motion.json"
  ],
  "files": [
    {
      "path": "src/components/effects/scroll-reveal.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\"\n\n/*\n * SPDX-License-Identifier: MIT\n * Inspired by Amicro's Scroll Reveal by Syed Subhan Uddin.\n * Upstream: https://github.com/Subhan-code/Amicro--Micro-transitions-\n * Source: registry/ui/scroll/scroll-reveal.tsx\n * Audited revision: 07adc1640084940f045875e2bb1b682c90f30c3c\n * This implementation is an original accessible React/CSS adaptation.\n */\n\nexport type ScrollRevealProps = React.HTMLAttributes<HTMLDivElement> & {\n  direction?: \"up\" | \"down\" | \"left\" | \"right\" | \"none\"\n  distance?: number\n  duration?: number\n  delay?: number\n  once?: boolean\n  threshold?: number\n  rootMargin?: string\n}\n\nexport function ScrollReveal({\n  direction = \"up\",\n  distance = 20,\n  duration = 420,\n  delay = 0,\n  once = true,\n  threshold = 0.18,\n  rootMargin = \"0px 0px -8%\",\n  className = \"\",\n  style,\n  children,\n  ...props\n}: ScrollRevealProps) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const reduced = useReducedMotion()\n  const [visible, setVisible] = React.useState(true)\n\n  React.useLayoutEffect(() => {\n    const element = ref.current\n    if (!element || reduced) {\n      setVisible(true)\n      return\n    }\n\n    setVisible(false)\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        setVisible(entry.isIntersecting)\n        if (entry.isIntersecting && once) observer.disconnect()\n      },\n      { threshold, rootMargin }\n    )\n    observer.observe(element)\n    return () => observer.disconnect()\n  }, [once, reduced, rootMargin, threshold])\n\n  const offset = {\n    up: `translate3d(0, ${distance}px, 0)`,\n    down: `translate3d(0, -${distance}px, 0)`,\n    left: `translate3d(${distance}px, 0, 0)`,\n    right: `translate3d(-${distance}px, 0, 0)`,\n    none: \"none\",\n  }[direction]\n\n  return (\n    <div\n      ref={ref}\n      data-scroll-reveal=\"\"\n      data-visible={visible ? \"true\" : \"false\"}\n      className={className}\n      style={{\n        opacity: visible ? 1 : 0,\n        transform: visible ? \"none\" : offset,\n        transition: reduced\n          ? \"none\"\n          : `opacity ${duration}ms cubic-bezier(.16,1,.3,1) ${delay}ms, transform ${duration}ms cubic-bezier(.16,1,.3,1) ${delay}ms`,\n        ...style,\n      }}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "src/components/effects/scroll-reveal.tsx"
    }
  ],
  "meta": {
    "collection": "motion-effects",
    "license": "MIT",
    "usage": "<ScrollReveal>\n  <section>Your content</section>\n</ScrollReveal>",
    "source": "https://github.com/Subhan-code/Amicro--Micro-transitions-",
    "sourcePath": "registry/ui/scroll/scroll-reveal.tsx",
    "sourceRevision": "07adc1640084940f045875e2bb1b682c90f30c3c"
  },
  "type": "registry:ui"
}