{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-reveal-content-a",
  "type": "registry:block",
  "title": "Scroll Reveal Content A",
  "description": "A block that shows 3 parts of content with a specific image for each part, and a fancy line grow expand during scroll.",
  "dependencies": ["motion@12", "motion"],
  "files": [
    {
      "path": "registry/abui/marketing/scroll-reveal-content-a.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\nimport { useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport Image from \"next/image\"\nimport { useMotionValueEvent, useScroll } from \"motion/react\"\n\nexport const centralColumnStyle = \"w-[90%] max-w-[1340px] mx-auto\"\nexport const pageYPadding = \"py-10 md:py-12 lg:py-20 xl:py-30 2xl:py-40\"\nconst defaultTitleClass = \"text-2xl md:text-3xl font-semibold mb-2 text-foreground\"\nconst defaultDescriptionClass = \"text-base md:text-lg font-medium mb-2 text-foreground max-w-[400px] leading-[130%]\"\nconst imageClass =\n  \"absolute top-0 right-0 ml-auto w-auto h-full object-cover rounded-2xl transition-opacity duration-300\"\n\nexport interface ItemContent {\n  title: string\n  description: string\n  image: {\n    url: string\n    width: number\n    height: number\n    alt: string\n  }\n}\n\ninterface Props extends React.ComponentProps<\"div\"> {\n  contentA: ItemContent\n  contentB: ItemContent\n  contentC: ItemContent\n  titleClass?: string\n  descriptionClass?: string\n}\n\nconst ScrollRevealContentA = ({\n  contentA,\n  contentB,\n  contentC,\n  titleClass = defaultTitleClass,\n  descriptionClass = defaultDescriptionClass,\n  className,\n  ...props\n}: Props) => {\n  const [scrollProgress, setScrollProgress] = React.useState(0)\n  const ref0 = useRef(null)\n\n  const { scrollYProgress } = useScroll({\n    target: ref0,\n  })\n  useMotionValueEvent(scrollYProgress, \"change\", () => {\n    // @ts-ignore\n    setScrollProgress(scrollYProgress.current)\n  })\n\n  return (\n    <div className={cn(\"bg-background\", className)} ref={ref0} {...props}>\n      <div className=\"max-w-[90vw] mx-auto\">\n        <div className=\"flex w-full mx-auto relative z-20\">\n          <div\n            className={cn(centralColumnStyle, \"sticky top-0 flex flex-col w-full items-start justify-center h-[100vh]\")}\n          >\n            <div className=\"flex flex-row gap-16 md:gap-24 lg:gap-32 xl:gap-40 2xl:gap-48 w-full h-full\">\n              <div className=\"lg:!w-[50vw] !w-full h-auto flex flex-col justify-center gap-10 md:gap-auto\">\n                <PointItem\n                  active={true}\n                  number=\"01\"\n                  title={contentA.title}\n                  description={contentA.description}\n                  thresholdStart={0}\n                  thresholdEnd={0.33}\n                  scrollProgress={scrollProgress}\n                />\n                <PointItem\n                  active={true}\n                  number=\"02\"\n                  title={contentB.title}\n                  description={contentB.description}\n                  thresholdStart={0.33}\n                  thresholdEnd={0.66}\n                  scrollProgress={scrollProgress}\n                />\n                <PointItem\n                  active={true}\n                  number=\"03\"\n                  title={contentC.title}\n                  description={contentC.description}\n                  thresholdStart={0.66}\n                  thresholdEnd={1}\n                  scrollProgress={scrollProgress}\n                />\n              </div>\n              <div className=\"hidden lg:flex flex-col justify-center items-center !w-[50vw] relative h-full\">\n                <Image\n                  width={contentA.image.width}\n                  height={contentA.image.height}\n                  src={contentA.image.url}\n                  alt={contentA.image.alt}\n                  className={cn(imageClass, scrollProgress > -1 ? \"opacity-100\" : \"opacity-0\")}\n                />\n                <Image\n                  width={contentB.image.width}\n                  height={contentB.image.height}\n                  src={contentB.image.url}\n                  alt={contentB.image.alt}\n                  className={cn(imageClass, scrollProgress > 0.33 ? \"opacity-100\" : \"opacity-0\")}\n                />\n                <Image\n                  width={contentC.image.width}\n                  height={contentC.image.height}\n                  src={contentC.image.url}\n                  alt={contentC.image.alt}\n                  className={cn(imageClass, scrollProgress > 0.66 ? \"opacity-100\" : \"opacity-0\")}\n                />\n              </div>\n            </div>\n          </div>\n          <div className=\"h-[300vh]\" />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default ScrollRevealContentA\n\nconst getBarPercentageHeight = (scrollProgress: number, thresholdStart: number, thresholdEnd: number) => {\n  if (scrollProgress < thresholdStart) {\n    return 0\n  }\n  if (scrollProgress > thresholdEnd) {\n    return 100\n  }\n  return ((scrollProgress - thresholdStart) / (thresholdEnd - thresholdStart)) * 100\n}\n\nconst PointItem = ({\n  active,\n  number,\n  title,\n  description,\n  thresholdStart,\n  thresholdEnd,\n  scrollProgress,\n}: {\n  active: boolean\n  number: string\n  title: string\n  description: string\n  thresholdStart: number\n  thresholdEnd: number\n  scrollProgress: number\n}) => {\n  const barHeightPercentage = getBarPercentageHeight(scrollProgress, thresholdStart, thresholdEnd)\n  const isActive = barHeightPercentage > 0\n  return (\n    <div className={cn(\"flex flex-col interactive w-full\", active ? \"opacity-100\" : \"opacity-50\")}>\n      <div className=\"w-full\">\n        <h3 className={cn(defaultTitleClass, \"mb-4 ml-5\", isActive ? \"opacity-100\" : \"opacity-50\")}>{number}</h3>\n      </div>\n      <div className=\"w-full flex relative left-[16px]\">\n        <div className=\"w-[70px] flex items-start justify-center relative\">\n          <div className=\"h-full w-[2px] bg-foreground/10 absolute top-0 left-[50%] -translate-x-1/2\" />\n          <div\n            className=\"h-full w-[2px] bg-foreground absolute top-0 left-[50%] -translate-x-1/2\"\n            style={{ height: `${barHeightPercentage}%` }}\n          />\n        </div>\n        <div className=\"w-[calc(100% - 40px)] pl-4\">\n          <div className=\"flex flex-col gap-1\">\n            <h3 className={cn(defaultTitleClass, isActive ? \"opacity-100\" : \"opacity-50\")}>{title}</h3>\n            <p className={cn(defaultDescriptionClass, isActive ? \"opacity-100\" : \"opacity-50\")}>{description}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}