{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-reveal",
  "type": "registry:block",
  "title": "Scroll reveal",
  "description": "Scroll reveal",
  "files": [
    {
      "path": "components/usages/scrollrevealusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport ScrollReveal from \"@/registry/open-source/scroll-reveal\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<ScrollReveal\n\t\t\t\tbaseOpacity={0}\n\t\t\t\tenableBlur={true}\n\t\t\t\tbaseRotation={5}\n\t\t\t\tblurStrength={10}\n\t\t\t>\n\t\t\t\tWhen does a man die? When he is hit by a bullet? No! When he suffers\n\t\t\t\ta disease? No! When he ate a soup made out of a poisonous mushroom?\n\t\t\t\tNo! A man dies when he is forgotten!\n\t\t\t</ScrollReveal>{\" \"}\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/scrollrevealusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport ScrollReveal from \"@/registry/open-source/scroll-reveal\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<ScrollReveal\n\t\t\t\tbaseOpacity={0}\n\t\t\t\tenableBlur={true}\n\t\t\t\tbaseRotation={5}\n\t\t\t\tblurStrength={10}\n\t\t\t>\n\t\t\t\tWhen does a man die? When he is hit by a bullet? No! When he suffers\n\t\t\t\ta disease? No! When he ate a soup made out of a poisonous mushroom?\n\t\t\t\tNo! A man dies when he is forgotten!\n\t\t\t</ScrollReveal>{\" \"}\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/scroll-reveal.tsx",
      "content": "import React, { ReactNode, RefObject, useEffect, useMemo, useRef } from \"react\";\n\nimport { gsap } from \"gsap\";\nimport { ScrollTrigger } from \"gsap/dist/ScrollTrigger\";\n\ngsap.registerPlugin(ScrollTrigger);\n\ninterface ScrollRevealProps {\n\tchildren: ReactNode;\n\tscrollContainerRef?: RefObject<HTMLElement>;\n\tenableBlur?: boolean;\n\tbaseOpacity?: number;\n\tbaseRotation?: number;\n\tblurStrength?: number;\n\tcontainerClassName?: string;\n\ttextClassName?: string;\n\trotationEnd?: string;\n\twordAnimationEnd?: string;\n}\n\nconst ScrollReveal: React.FC<ScrollRevealProps> = ({\n\tchildren,\n\tscrollContainerRef,\n\tenableBlur = true,\n\tbaseOpacity = 0.1,\n\tbaseRotation = 3,\n\tblurStrength = 4,\n\tcontainerClassName = \"\",\n\ttextClassName = \"\",\n\trotationEnd = \"bottom bottom\",\n\twordAnimationEnd = \"bottom bottom\",\n}) => {\n\tconst containerRef = useRef<HTMLHeadingElement>(null);\n\n\tconst splitText = useMemo(() => {\n\t\tconst text = typeof children === \"string\" ? children : \"\";\n\t\treturn text.split(/(\\s+)/).map((word, index) => {\n\t\t\tif (word.match(/^\\s+$/)) return word;\n\t\t\treturn (\n\t\t\t\t<span className=\"inline-block\" key={index + \"scroll-reveal\"}>\n\t\t\t\t\t{word}\n\t\t\t\t</span>\n\t\t\t);\n\t\t});\n\t}, [children]);\n\n\tuseEffect(() => {\n\t\tconst el = containerRef.current;\n\t\tif (!el) return;\n\n\t\tconst scroller =\n\t\t\tscrollContainerRef && scrollContainerRef.current\n\t\t\t\t? scrollContainerRef.current\n\t\t\t\t: window;\n\n\t\tgsap.fromTo(\n\t\t\tel,\n\t\t\t{ transformOrigin: \"0% 50%\", rotate: baseRotation },\n\t\t\t{\n\t\t\t\tease: \"none\",\n\t\t\t\trotate: 0,\n\t\t\t\tscrollTrigger: {\n\t\t\t\t\ttrigger: el,\n\t\t\t\t\tscroller,\n\t\t\t\t\tstart: \"top bottom\",\n\t\t\t\t\tend: rotationEnd,\n\t\t\t\t\tscrub: true,\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\n\t\tconst wordElements = el.querySelectorAll<HTMLElement>(\".word\");\n\n\t\tgsap.fromTo(\n\t\t\twordElements,\n\t\t\t{ opacity: baseOpacity, willChange: \"opacity\" },\n\t\t\t{\n\t\t\t\tease: \"none\",\n\t\t\t\topacity: 1,\n\t\t\t\tstagger: 0.05,\n\t\t\t\tscrollTrigger: {\n\t\t\t\t\ttrigger: el,\n\t\t\t\t\tscroller,\n\t\t\t\t\tstart: \"top bottom-=20%\",\n\t\t\t\t\tend: wordAnimationEnd,\n\t\t\t\t\tscrub: true,\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\n\t\tif (enableBlur) {\n\t\t\tgsap.fromTo(\n\t\t\t\twordElements,\n\t\t\t\t{ filter: `blur(${blurStrength}px)` },\n\t\t\t\t{\n\t\t\t\t\tease: \"none\",\n\t\t\t\t\tfilter: \"blur(0px)\",\n\t\t\t\t\tstagger: 0.05,\n\t\t\t\t\tscrollTrigger: {\n\t\t\t\t\t\ttrigger: el,\n\t\t\t\t\t\tscroller,\n\t\t\t\t\t\tstart: \"top bottom-=20%\",\n\t\t\t\t\t\tend: wordAnimationEnd,\n\t\t\t\t\t\tscrub: true,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\n\t\treturn () => {\n\t\t\tScrollTrigger.getAll().forEach((trigger) => trigger.kill());\n\t\t};\n\t}, [\n\t\tscrollContainerRef,\n\t\tenableBlur,\n\t\tbaseRotation,\n\t\tbaseOpacity,\n\t\trotationEnd,\n\t\twordAnimationEnd,\n\t\tblurStrength,\n\t]);\n\n\treturn (\n\t\t<h2 ref={containerRef} className={`my-5 ${containerClassName}`}>\n\t\t\t<p\n\t\t\t\tclassName={`text-[clamp(1.6rem,4vw,3rem)] leading-normal font-semibold ${textClassName}`}\n\t\t\t>\n\t\t\t\t{splitText}\n\t\t\t</p>\n\t\t</h2>\n\t);\n};\n\nexport default ScrollReveal;\n",
      "type": "registry:ui"
    }
  ]
}