refactored framer component, added animations to homepage menu and fixed issue related to rendering multiple framer components at once (don't do it, add a delay)

src/app/about/page.tsx

@@ -10,7 +10,15 @@ const page = () => {
     <main className="w-100 m-0 h-screen">
       <Stars />
       <div className="fixed w-3/4 top-1/4 flex justify-center items-center self-center text-white text-justify">
-        <FramerTextAnimate>{aboutMeText}</FramerTextAnimate>
+        <FramerTextAnimate
+          styles={
+            "w-1/2 flex justify-between whitespace-normal tracking-wide text-3xl leading-relaxed"
+          }
+          duration={15}
+          delay={0}
+        >
+          {aboutMeText}
+        </FramerTextAnimate>
       </div>
     </main>
   );

src/app/page.tsx

@@ -1,21 +1,50 @@
 import Stars from "@/components/stars";
 import Skeleton from "@/components/mesh/skeleton";
 import Link from "next/link";
-import { Suspense } from "react";
+import FramerTextAnimate from "@/components/framer/framerTextAnimate";
+
+const about = "ABOUT ME";
+const models = "MY MODELS";
+const contact = "CONTACT ME";
 
 export default function Home() {
   return (
     <main className="w-100 m-0 h-screen">
       <Stars />
-      <div className="fixed z-50 flex flex-col content-start text-left top-1/2 left-1/4 gap-5 text-white">
+
-        <Link className="text-5xl  hover:text-shadow" href={"/about"}>
+      <div className="fixed z-50 flex flex-col content-start text-left top-1/3 left-1/4 gap-5 mt-20 text-white">
-          ABOUT ME
+        <Link href={"/about"}>
+          <FramerTextAnimate
+            styles={
+              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-shadow"
+            }
+            duration={2}
+            delay={0.5}
+          >
+            {about}
+          </FramerTextAnimate>
         </Link>
         <Link className="text-5xl hover:text-shadow" href={"/models"}>
-          MY MODELS
+          <FramerTextAnimate
+            styles={
+              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-shadow"
+            }
+            duration={2}
+            delay={1}
+          >
+            {models}
+          </FramerTextAnimate>
         </Link>
         <Link className="text-5xl hover:text-shadow" href={"/contact"}>
-          CONTACT
+          <FramerTextAnimate
+            styles={
+              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-shadow"
+            }
+            duration={2}
+            delay={1.5}
+          >
+            {contact}
+          </FramerTextAnimate>
         </Link>
         <div className=" fixed h-screen w-1/2 right-0 top-0">
           <Skeleton />

src/components/framer/framerTextAnimate.tsx

@@ -1,15 +1,19 @@
 "use client";
 
-import { Center } from "@react-three/drei";
 import { animate, motion, useMotionValue, useTransform } from "framer-motion";
 import { Special_Elite } from "next/font/google";
 import React, { useEffect } from "react";
 
 const special_elite = Special_Elite({ weight: "400", subsets: ["latin"] });
 
-type props = { children: string };
+type props = {
+  children: string;
+  styles: string;
+  duration: number;
+  delay: number;
+};
 
-const FramerTextAnimate = ({ children }: props) => {
+const FramerTextAnimate = ({ children, styles, duration, delay }: props) => {
   const count = useMotionValue(0);
   const baseText = children as string;
 
@@ -19,19 +23,22 @@ const FramerTextAnimate = ({ children }: props) => {
   );
 
   useEffect(() => {
+    // Delay the animation start
+    const delayTimeout = setTimeout(() => {
       const controls = animate(count, baseText.length, {
-      //   type: "tween", // Not really needed because adding a duration will force "tween"
+        duration: duration,
-      duration: 15,
         ease: "easeInOut",
       });
-    return controls.stop;
+      return () => controls.stop();
+    }, delay * 1000);
+
+    // Clear the timeout on unmount to prevent memory leaks
+    return () => clearTimeout(delayTimeout);
   }, []);
 
   return (
     <>
-      <motion.span
+      <motion.span className={`${special_elite.className} ${styles}`}>
-        className={`${special_elite.className} w-1/2 flex justify-between whitespace-normal tracking-wide text-3xl leading-relaxed`}
-      >
         {displayText}
       </motion.span>
     </>