Scroll Reveal Content A

1"use client"
2 
3import React from "react"
4import { useRef } from "react"
5import { cn } from "@/lib/utils"
6import Image from "next/image"
7import { useMotionValueEvent, useScroll } from "motion/react"
8 
9export const centralColumnStyle = "w-[90%] max-w-[1340px] mx-auto"
10export const pageYPadding = "py-10 md:py-12 lg:py-20 xl:py-30 2xl:py-40"
11const defaultTitleClass = "text-2xl md:text-3xl font-semibold mb-2 text-foreground"
12const defaultDescriptionClass = "text-base md:text-lg font-medium mb-2 text-foreground max-w-[400px] leading-[130%]"
13const imageClass =
14  "absolute top-0 right-0 ml-auto w-auto h-full object-cover rounded-2xl transition-opacity duration-300"
15 
16export interface ItemContent {
17  title: string
18  description: string
19  image: {
20    url: string
21    width: number
22    height: number
23    alt: string
24  }
25}
26 
27interface Props extends React.ComponentProps<"div"> {
28  contentA: ItemContent
29  contentB: ItemContent
30  contentC: ItemContent
31  titleClass?: string
32  descriptionClass?: string
33}
34 
35const ScrollRevealContentA = ({
36  contentA,
37  contentB,
38  contentC,
39  titleClass = defaultTitleClass,
40  descriptionClass = defaultDescriptionClass,
41  className,
42  ...props
43}: Props) => {
44  const [scrollProgress, setScrollProgress] = React.useState(0)
45  const ref0 = useRef(null)
46 
47  const { scrollYProgress } = useScroll({
48    target: ref0,
49  })
50  useMotionValueEvent(scrollYProgress, "change", () => {
51    // @ts-ignore
52    setScrollProgress(scrollYProgress.current)
53  })
54 
55  return (
56    <div className={cn("bg-background", className)} ref={ref0} {...props}>
57      <div className="max-w-[90vw] mx-auto">
58        <div className="flex w-full mx-auto relative z-20">
59          <div
60            className={cn(centralColumnStyle, "sticky top-0 flex flex-col w-full items-start justify-center h-[100vh]")}
61          >
62            <div className="flex flex-row gap-16 md:gap-24 lg:gap-32 xl:gap-40 2xl:gap-48 w-full h-full">
63              <div className="lg:!w-[50vw] !w-full h-auto flex flex-col justify-center gap-10 md:gap-auto">
64                <PointItem
65                  active={true}
66                  number="01"
67                  title={contentA.title}
68                  description={contentA.description}
69                  thresholdStart={0}
70                  thresholdEnd={0.33}
71                  scrollProgress={scrollProgress}
72                />
73                <PointItem
74                  active={true}
75                  number="02"
76                  title={contentB.title}
77// … truncated