From aaf59d9dd00bb82cb227ce860904c0c9200a3070 Mon Sep 17 00:00:00 2001
From: No0ne003 <hi.yassir.op@gmail.com>
Date: Thu, 16 May 2024 09:23:34 +0100
Subject: [PATCH] some improvment on animation such add delay and more
 functionality on typeWritter-effect for dealing with cursor variant smart way

---
 src/components/typewriter-effect.jsx | 19 ++++++-------------
 src/pages/Home.jsx                   |  7 ++++++-
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/components/typewriter-effect.jsx b/src/components/typewriter-effect.jsx
index 44cf2f3..fe8fb83 100644
--- a/src/components/typewriter-effect.jsx
+++ b/src/components/typewriter-effect.jsx
@@ -1,15 +1,8 @@
 import { cn } from "@/lib/utils";
 import { motion, stagger, useAnimate, useInView } from "framer-motion";
 import { useEffect } from "react";
-import { FaStar } from "react-icons/fa";
 
-export const TypewriterEffect = ({
-  words,
-  className,
-  cursorClassName,
-  setCursorVariant,
-}) => {
-  // split text inside of words into array of characters
+export const TypewriterEffect = ({ words, className, setCursorVariant }) => {
   const wordsArray = words.map((word) => {
     return {
       ...word,
@@ -45,14 +38,14 @@ export const TypewriterEffect = ({
             `text-foreground opacity-0 hidden`,
             word.className,
           );
-          const isPrimary =
-            word.className && word.className.includes("primary");
+          const hasCursorVariant =
+            word.cursorVariant && word.cursorVariant !== "";
           const spanProps = {
             initial: {},
             className: wordClassName,
           };
-          if (isPrimary) {
-            spanProps.onMouseEnter = handleMouseEnter;
+          if (hasCursorVariant) {
+            spanProps.onMouseEnter = () => handleMouseEnter(word.cursorVariant);
             spanProps.onMouseLeave = handleMouseLeave;
           }
           return (
@@ -70,7 +63,7 @@ export const TypewriterEffect = ({
     );
   };
 
-  const handleMouseEnter = () => setCursorVariant("bigText");
+  const handleMouseEnter = (cursorVariant) => setCursorVariant(cursorVariant);
   const handleMouseLeave = () => setCursorVariant("default");
 
   return (
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 05bd4d3..ec776f9 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -21,6 +21,7 @@ function Home({ setCursorVariant }) {
     {
       text: "Projects",
       className: "primary text-primary dark:text-primary font-bold",
+      cursorVariant: 'bigText'
     },
   ];
 
@@ -56,7 +57,11 @@ function Home({ setCursorVariant }) {
                     key={item}
                     initial={{ width: 0 }}
                     animate={{ width: 150 }}
-                    transition={{ duration: 2, ease: [0.22, 1, 0.36, 1] }}
+                    transition={{
+                      duration: 2,
+                      ease: [0.22, 1, 0.36, 1],
+                      delay: 0.3,
+                    }}
                     className="h-[1px] bg-primary"
                   />
                 ))}