small fixes, changed font

src/components/framer/framerTextAnimate.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { animate, motion, useMotionValue, useTransform } from "framer-motion";
-import { Special_Elite } from "next/font/google";
-import React, { useEffect } from "react";
+import { Courier_Prime } from "next/font/google";
+import React, { useEffect, useState } from "react";
 
-const special_elite = Special_Elite({ weight: "400", subsets: ["latin"] });
+const special_elite = Courier_Prime({ weight: "400", subsets: ["latin"] });
 
 type props = {
   children: string;
@@ -17,16 +17,29 @@ const FramerTextAnimate = ({ children, styles, duration, delay }: props) => {
   const count = useMotionValue(0);
   const baseText = children as string;
 
+  const [durationInternal, setDurationInternal] = useState<number>(duration);
+
   const rounded = useTransform(count, (latest) => Math.round(latest));
   const displayText = useTransform(rounded, (latest) =>
     baseText.slice(0, latest)
   );
 
+  //   Skip the animation on mouse press
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      setDurationInternal(0.5);
+    };
+    document.addEventListener("click", handleClick);
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  }, []);
+
   useEffect(() => {
     // Delay the animation start
     const delayTimeout = setTimeout(() => {
       const controls = animate(count, baseText.length, {
-        duration: duration,
+        duration: durationInternal,
         ease: "easeInOut",
       });
       return () => controls.stop();
@@ -34,11 +47,19 @@ const FramerTextAnimate = ({ children, styles, duration, delay }: props) => {
 
     // Clear the timeout on unmount to prevent memory leaks
     return () => clearTimeout(delayTimeout);
-  }, []);
+  }, [durationInternal]);
+
+  const handleUserInput = () => {
+    setDurationInternal(0);
+    console.log("test");
+  };
 
   return (
     <>
-      <motion.span className={`${special_elite.className} ${styles}`}>
+      <motion.span
+        onClick={handleUserInput}
+        className={`${special_elite.className} ${styles}`}
+      >
         {displayText}
       </motion.span>
     </>