Merge pull request #4 from bkanishka004/fix/ui-enhancement-dashboard

Fix/UI enhancement dashboard

Author: Uaghazade1

app/page.tsx

@@ -35,7 +35,7 @@ import {
   GithubIcon
 } from 'lucide-react';
 import { ShineBorder } from '@/src/components/magicui/shine-border';
-import { TextReveal } from '@/src/components/magicui/text-reveal';
+import  TextReveal  from '@/src/components/magicui/text-reveal';
 import LovedBy from '@/components/customized/avatar/avatar-12';
 
 export default function Home() {

package-lock.json

@@ -78,4 +78,4 @@
   "overrides": {
     "@types/react": "18.2.22"
   }
-}
+}

package.json

@@ -1,19 +1,15 @@
 "use client";
-
-import { motion, MotionValue, useScroll, useTransform } from "motion/react";
+import { motion, useInView } from "motion/react";
 import { ComponentPropsWithoutRef, FC, ReactNode, useRef } from "react";
-
 import { cn } from "@/lib/utils";
 
 export interface TextRevealProps extends ComponentPropsWithoutRef<"div"> {
   children: string;
 }
 
-export const TextReveal: FC<TextRevealProps> = ({ children, className }) => {
-  const targetRef = useRef<HTMLDivElement | null>(null);
-  const { scrollYProgress } = useScroll({
-    target: targetRef,
-  });
+const TextReveal: FC<TextRevealProps> = ({ children, className }) => {
+  const targetRef = useRef<HTMLDivElement >(null);
+  const isInView = useInView(targetRef, { once: false, amount: 0.3 });
 
   if (typeof children !== "string") {
     throw new Error("TextReveal: children must be a string");
@@ -22,23 +18,25 @@ export const TextReveal: FC<TextRevealProps> = ({ children, className }) => {
   const words = children.split(" ");
 
   return (
-    <div ref={targetRef} className={cn("relative z-0 h-[200vh]", className)}>
+    <div ref={targetRef} className={cn("relative z-0", className)}>
       <div
         className={
-          "sticky top-0 mx-auto flex h-[50%] max-w-4xl items-center bg-transparent px-[1rem] py-[5rem]"
+          "mx-auto flex max-w-4xl items-center bg-transparent px-[1rem] py-[5rem]"
         }
       >
         <span
-          ref={targetRef}
           className={
             "flex flex-wrap p-5 text-2xl text-black/20 dark:text-white/20 md:p-8 md:text-3xl lg:p-10 lg:text-4xl xl:text-5xl"
           }
         >
           {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
+                key={i}
+                index={i}
+                totalWords={words.length}
+                isInView={isInView}
+              >
                 {word}
               </Word>
             );
@@ -51,21 +49,31 @@ export const TextReveal: FC<TextRevealProps> = ({ children, className }) => {
 
 interface WordProps {
   children: ReactNode;
-  progress: MotionValue<number>;
-  range: [number, number];
+  index: number;
+  totalWords: number;
+  isInView: boolean;
 }
 
-const Word: FC<WordProps> = ({ children, progress, range }) => {
-  const opacity = useTransform(progress, range, [0, 1]);
+const Word: FC<WordProps> = ({ children, index, totalWords, isInView }) => {
   return (
     <span className="xl:lg-3 relative mx-1 lg:mx-1.5">
       <span className="absolute opacity-30">{children}</span>
       <motion.span
-        style={{ opacity: opacity }}
+        initial={{ opacity: 0 }}
+        animate={{
+        opacity: isInView ? 1 : 0.2,
+      }}
+        transition={{
+        duration: 0.4,
+        delay: isInView ? index * 0.08 : 0,
+      }}
+      
         className={"text-black dark:text-white"}
       >
         {children}
       </motion.span>
     </span>
   );
 };
+
+export default TextReveal;