typewriter effecte udpated

Author: sinanptm

app/layout.tsx

@@ -10,6 +10,7 @@ import { cn } from "@/lib/utils";
 import metadata from "./metadata";
 import "../style/globals.css";
 import Footer from "@/components/layout/Footer";
+import { memo } from "react";
 
 const layout = ({ children }: Readonly<RootLayoutProps>) => {
   return (
@@ -30,7 +31,7 @@ const layout = ({ children }: Readonly<RootLayoutProps>) => {
                 personSchema,
                 websiteSchema
               ]
-            }, null, 2)
+            })
           }}
         />
         <ThemeProvider
@@ -51,4 +52,4 @@ const layout = ({ children }: Readonly<RootLayoutProps>) => {
 };
 export { metadata };
 
-export default layout;
+export default memo(layout);

app/page.tsx

@@ -1,9 +1,9 @@
+import TypewriterEffect from '@/components/ui/typewriter-effect';
 import { TYPEWRITER_WORDS } from '@/constants';
 import About from '@/components/home/About';
 import Name from '@/components/home/Name';
-import { memo } from 'react';
 import Image from 'next/image';
-import TypewriterEffect from '@/components/ui/typewriter-effect';
+import { memo } from 'react';
 
 
 const HomePage = () => {
@@ -16,7 +16,7 @@ const HomePage = () => {
           alt="Muhammed sinan - Mern stack developer"
           width={1}
           height={1}
-          priority={false}
+          loading='lazy'
           className="opacity-0"
         />
       </div>

components/ui/typewriter-effect.tsx

@@ -2,7 +2,7 @@
 
 import { cn } from "@/lib/utils";
 import { motion, stagger, useAnimate, useInView } from "framer-motion";
-import { memo, useEffect } from "react";
+import { memo, useEffect, useMemo, useCallback } from "react";
 
 const TypewriterEffect = ({
   words,
@@ -16,16 +16,14 @@ const TypewriterEffect = ({
   className?: string;
   cursorClassName?: string;
 }) => {
- 
-  const wordsArray = words.map((word) => {
-    return {
-      ...word,
-      text: word.text.split(""),
-    };
-  });
+  const wordsArray = useMemo(() => words.map((word) => ({
+    ...word,
+    text: word.text.split(""),
+  })), [words]);
 
   const [scope, animate] = useAnimate();
-  const isInView = useInView(scope);
+  const isInView = useInView(scope, { once: true });
+  
   useEffect(() => {
     if (isInView) {
       animate(
@@ -36,53 +34,44 @@ const TypewriterEffect = ({
           width: "fit-content",
         },
         {
-          delay: stagger(0.1),
-          ease: "easeInOut",
+          duration: 0.2,
+          delay: stagger(0.1, { startDelay: 0.3 }),
+          ease: "linear",
         }
       );
     }
   }, [isInView, animate]);
 
-  const renderWords = () => {
-    return (
-      <motion.div ref={scope} className="inline">
-        {wordsArray.map((word, idx) => {
-          return (
-            <div key={`word-${idx}`} className="inline-block">
-              {word.text.map((char, index) => (
-                <motion.span
-                  initial={{}}
-                  key={`char-${index}`}
-                  className={cn(
-                    `dark:text-white text-black opacity-0 hidden`,
-                    word.className
-                  )}
-                >
-                  {char}
-                </motion.span>
-              ))}
-              &nbsp;
-            </div>
-          );
-        })}
-      </motion.div>
-    );
-  };
+  const renderWords = useCallback(() => (
+    <motion.div ref={scope} className="inline">
+      {wordsArray.map((word, idx) => (
+        <div key={`word-${idx}`} className="inline-block">
+          {word.text.map((char, index) => (
+            <motion.span
+              key={`char-${index}`}
+              className={cn(
+                `dark:text-white text-black opacity-0 hidden`,
+                word.className
+              )}
+            >
+              {char}
+            </motion.span>
+          ))}
+          &nbsp;
+        </div>
+      ))}
+    </motion.div>
+  ), [wordsArray, scope]);
+
   return (
-    <div
-      className={cn(
-        "text-base sm:text-xl md:text-1xl lg:text-4xl font-bold text-center",
-        className
-      )}
-    >
+    <div className={cn(
+      "text-base sm:text-xl md:text-1xl lg:text-4xl font-bold text-center",
+      className
+    )}>
       {renderWords()}
       <motion.span
-        initial={{
-          opacity: 0,
-        }}
-        animate={{
-          opacity: 1,
-        }}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
         transition={{
           duration: 0.8,
           repeat: Infinity,
@@ -92,12 +81,12 @@ const TypewriterEffect = ({
           "inline-block rounded-sm w-[4px] h-4 md:h-6 lg:h-10 bg-blue-500",
           cursorClassName
         )}
-      ></motion.span>
+      />
     </div>
   );
 };
 
-export const TypewriterEffectSmooth = ({
+export const TypewriterEffectSmooth = memo(({
   words,
   className,
   cursorClassName,
@@ -109,45 +98,36 @@ export const TypewriterEffectSmooth = ({
   className?: string;
   cursorClassName?: string;
 }) => {
-  // split text inside of words into array of characters
-  const wordsArray = words.map((word) => {
-    return {
-      ...word,
-      text: word.text.split(""),
-    };
-  });
-  const renderWords = () => {
-    return (
-      <div>
-        {wordsArray.map((word, idx) => {
-          return (
-            <div key={`word-${idx}`} className="inline-block">
-              {word.text.map((char, index) => (
-                <span
-                  key={`char-${index}`}
-                  className={cn(`text-white  `, word.className)}
-                >
-                  {char}
-                </span>
-              ))}
-              &nbsp;
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
+  const wordsArray = useMemo(() => words.map((word) => ({
+    ...word,
+    text: word.text.split(""),
+  })), [words]);
+
+  const renderWords = useCallback(() => (
+    <div>
+      {wordsArray.map((word, idx) => (
+        <div key={`word-${idx}`} className="inline-block">
+          {word.text.map((char, index) => (
+            <span
+              key={`char-${index}`}
+              className={cn(`text-white`, word.className)}
+            >
+              {char}
+            </span>
+          ))}
+          &nbsp;
+        </div>
+      ))}
+    </div>
+  ), [wordsArray]);
 
   return (
     <div className={cn("flex space-x-1 my-6", className)}>
       <motion.div
         className="overflow-hidden pb-2"
-        initial={{
-          width: "0%",
-        }}
-        whileInView={{
-          width: "fit-content",
-        }}
+        initial={{ width: "0%" }}
+        whileInView={{ width: "fit-content" }}
+        viewport={{ once: true }}
         transition={{
           duration: 2,
           ease: "linear",
@@ -156,33 +136,26 @@ export const TypewriterEffectSmooth = ({
       >
         <div
           className="text-xs sm:text-base md:text-xl lg:text:3xl xl:text-5xl font-bold"
-          style={{
-            whiteSpace: "nowrap",
-          }}
+          style={{ whiteSpace: "nowrap" }}
         >
-          {renderWords()}{" "}
-        </div>{" "}
+          {renderWords()}
+        </div>
       </motion.div>
       <motion.span
-        initial={{
-          opacity: 0,
-        }}
-        animate={{
-          opacity: 1,
-        }}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
         transition={{
           duration: 0.8,
-
           repeat: Infinity,
           repeatType: "reverse",
         }}
         className={cn(
           "block rounded-sm w-[4px] h-5 sm:h-6 xl:h-12 bg-blue-500",
           cursorClassName
         )}
-      ></motion.span>
+      />
     </div>
   );
-};
+});
 
-export default memo(TypewriterEffect)
+export default memo(TypewriterEffect);