added animated about me description

src/components/framer/framerTextAnimate.tsx

@@ -0,0 +1,41 @@
+"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 };
+
+const FramerTextAnimate = ({ children }: props) => {
+  const count = useMotionValue(0);
+  const baseText = children as string;
+
+  const rounded = useTransform(count, (latest) => Math.round(latest));
+  const displayText = useTransform(rounded, (latest) =>
+    baseText.slice(0, latest)
+  );
+
+  useEffect(() => {
+    const controls = animate(count, baseText.length, {
+      //   type: "tween", // Not really needed because adding a duration will force "tween"
+      duration: 15,
+      ease: "easeInOut",
+    });
+    return controls.stop;
+  }, []);
+
+  return (
+    <>
+      <motion.span
+        className={`${special_elite.className} w-1/2 flex justify-between whitespace-normal tracking-wide text-3xl leading-relaxed`}
+      >
+        {displayText}
+      </motion.span>
+    </>
+  );
+};
+
+export default FramerTextAnimate;