From 9f78616730bec48eddcf7eef7a2ab1ac03c1c05f Mon Sep 17 00:00:00 2001
From: pranavvraja <pranavvraja@gmail.com>
Date: Thu, 3 Oct 2024 11:52:29 +0530
Subject: [PATCH] add: about section

---
 src/app/page.tsx                  |  4 ++
 src/components/ui/text-reveal.tsx | 92 +++++++++++++++++++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 src/components/ui/text-reveal.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3d46dfb..1b432d1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,11 +3,15 @@
 import { useState } from "react";
 import React from "react";
 import HorizontalScroll from "@/components/HorizontalScrollCarousel";
+import TextReveal from "@/components/ui/text-reveal";
 
 export default function Home() {
   return (
     <>
       <div className="flex flex-col items-center justify-center h-screen p-4"></div>
+      <div className="z-10 flex min-h-64 items-center justify-center rounded-lg ">
+        <TextReveal text="TEDxSJEC is a platform that brings together curious, creative, and progressive thinkers from St. Joseph Engineering College." />
+      </div>
       <div>
         <HorizontalScroll />
       </div>
diff --git a/src/components/ui/text-reveal.tsx b/src/components/ui/text-reveal.tsx
new file mode 100644
index 0000000..782f2cf
--- /dev/null
+++ b/src/components/ui/text-reveal.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { FC, ReactNode, useRef } from "react";
+import { motion, useScroll, useTransform, useInView } from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+interface TextRevealByWordProps {
+  text: string;
+  className?: string;
+}
+
+export const TextRevealByWord: FC<TextRevealByWordProps> = ({
+  text,
+  className,
+}) => {
+  const targetRef = useRef<HTMLDivElement | null>(null);
+
+  const { scrollYProgress } = useScroll({
+    target: targetRef,
+  });
+  const words = text.split(" ");
+
+  // const ref = useRef(null); // Create a reference for the element
+  // const isInView = useInView(ref, { once: true }); // Trigger animation once when in view
+
+  // Adjust the transform to make it exit only as it reaches the top of the viewport
+  const y = useTransform(scrollYProgress, [0, 0.25], [0, -350]); // Exit moves the heading further up (150px)
+  const opacity = useTransform(scrollYProgress, [0.1, 0.25], [2, 0]); // Fade out starts later and ends as it scrolls up
+
+  return (
+    <div ref={targetRef} className={cn("relative z-0 h-[200vh]", className)}>
+      <div
+        className={
+          "sticky top-0 mx-auto flex h-[50%]  max-w-8xl justify-center items-start flex-col  bg-transparent px-[7rem] py-[1rem]"
+        }
+      >
+        <motion.h1
+          className="text-8xl text-start px-12 font-extrabold uppercase text-[#ff0000]"
+          // ref={ref}
+          initial={{ opacity: 1, y: -30 }}
+          // animate={isInView ? { opacity: 1, y: 0 } : {}}
+          style={{ y, opacity }} // Bind scroll progress to y and opacity
+          // exit={{ opacity: 0, y: 20 }}
+          transition={{ duration: 1 }}
+        >
+          About
+        </motion.h1>
+
+        <p
+          ref={targetRef}
+          className={
+            "flex flex-wrap p-5 w-full text-2xl my-32 font-bold text-black/20 dark:text-white/20 md:p-8 md:text- xl lg:p-10 lg:text-4xl xl:text-6xl "
+          }
+        >
+          {words.map((word, i) => {
+            const start = i / words.length;
+            const end = start + 1 / words.length;
+            return (
+              <Word key={i} progress={scrollYProgress} range={[start, end]}>
+                {word}
+              </Word>
+            );
+          })}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+interface WordProps {
+  children: ReactNode;
+  progress: any;
+  range: [number, number];
+}
+
+const Word: FC<WordProps> = ({ children, progress, range }) => {
+  const opacity = useTransform(progress, range, [0, 1]);
+  return (
+    <span className="xl:lg-3 relative mx-1 lg:mx-2.5">
+      <span className={"absolute opacity-30"}>{children}</span>
+      <motion.span
+        style={{ opacity: opacity }}
+        className={"text-black dark:text-white"}
+      >
+        {children}
+      </motion.span>
+    </span>
+  );
+};
+
+export default TextRevealByWord;