style: clean up code formatting and remove trailing whitespace

refactor: reorganize imports and fix type imports

components/ui/morphing-text.tsx

@@ -1,103 +1,103 @@
-"use client"
+"use client";
 
-import { useCallback, useEffect, useRef } from "react"
+import { useCallback, useEffect, useRef } from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const morphTime = 1.5
-const cooldownTime = 0.5
+const morphTime = 1.5;
+const cooldownTime = 0.5;
 
 const useMorphingText = (texts: string[]) => {
-  const textIndexRef = useRef(0)
-  const morphRef = useRef(0)
-  const cooldownRef = useRef(0)
-  const timeRef = useRef(new Date())
+  const textIndexRef = useRef(0);
+  const morphRef = useRef(0);
+  const cooldownRef = useRef(0);
+  const timeRef = useRef(new Date());
 
-  const text1Ref = useRef<HTMLSpanElement>(null)
-  const text2Ref = useRef<HTMLSpanElement>(null)
+  const text1Ref = useRef<HTMLSpanElement>(null);
+  const text2Ref = useRef<HTMLSpanElement>(null);
 
   const setStyles = useCallback(
     (fraction: number) => {
-      const [current1, current2] = [text1Ref.current, text2Ref.current]
-      if (!current1 || !current2) return
+      const [current1, current2] = [text1Ref.current, text2Ref.current];
+      if (!current1 || !current2) return;
 
-      current2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`
-      current2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`
+      current2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
+      current2.style.opacity = `${fraction ** 0.4 * 100}%`;
 
-      const invertedFraction = 1 - fraction
+      const invertedFraction = 1 - fraction;
       current1.style.filter = `blur(${Math.min(
         8 / invertedFraction - 8,
-        100
-      )}px)`
-      current1.style.opacity = `${Math.pow(invertedFraction, 0.4) * 100}%`
+        100,
+      )}px)`;
+      current1.style.opacity = `${invertedFraction ** 0.4 * 100}%`;
 
-      current1.textContent = texts[textIndexRef.current % texts.length]
-      current2.textContent = texts[(textIndexRef.current + 1) % texts.length]
+      current1.textContent = texts[textIndexRef.current % texts.length];
+      current2.textContent = texts[(textIndexRef.current + 1) % texts.length];
     },
-    [texts]
-  )
+    [texts],
+  );
 
   const doMorph = useCallback(() => {
-    morphRef.current -= cooldownRef.current
-    cooldownRef.current = 0
+    morphRef.current -= cooldownRef.current;
+    cooldownRef.current = 0;
 
-    let fraction = morphRef.current / morphTime
+    let fraction = morphRef.current / morphTime;
 
     if (fraction > 1) {
-      cooldownRef.current = cooldownTime
-      fraction = 1
+      cooldownRef.current = cooldownTime;
+      fraction = 1;
     }
 
-    setStyles(fraction)
+    setStyles(fraction);
 
     if (fraction === 1) {
-      textIndexRef.current++
+      textIndexRef.current++;
     }
-  }, [setStyles])
+  }, [setStyles]);
 
   const doCooldown = useCallback(() => {
-    morphRef.current = 0
-    const [current1, current2] = [text1Ref.current, text2Ref.current]
+    morphRef.current = 0;
+    const [current1, current2] = [text1Ref.current, text2Ref.current];
     if (current1 && current2) {
-      current2.style.filter = "none"
-      current2.style.opacity = "100%"
-      current1.style.filter = "none"
-      current1.style.opacity = "0%"
+      current2.style.filter = "none";
+      current2.style.opacity = "100%";
+      current1.style.filter = "none";
+      current1.style.opacity = "0%";
     }
-  }, [])
+  }, []);
 
   useEffect(() => {
-    let animationFrameId: number
+    let animationFrameId: number;
 
     const animate = () => {
-      animationFrameId = requestAnimationFrame(animate)
+      animationFrameId = requestAnimationFrame(animate);
 
-      const newTime = new Date()
-      const dt = (newTime.getTime() - timeRef.current.getTime()) / 1000
-      timeRef.current = newTime
+      const newTime = new Date();
+      const dt = (newTime.getTime() - timeRef.current.getTime()) / 1000;
+      timeRef.current = newTime;
 
-      cooldownRef.current -= dt
+      cooldownRef.current -= dt;
 
-      if (cooldownRef.current <= 0) doMorph()
-      else doCooldown()
-    }
+      if (cooldownRef.current <= 0) doMorph();
+      else doCooldown();
+    };
 
-    animate()
+    animate();
     return () => {
-      cancelAnimationFrame(animationFrameId)
-    }
-  }, [doMorph, doCooldown])
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, [doMorph, doCooldown]);
 
-  return { text1Ref, text2Ref }
-}
+  return { text1Ref, text2Ref };
+};
 
 interface MorphingTextProps {
-  className?: string
-  texts: string[]
+  className?: string;
+  texts: string[];
 }
 
 const Texts: React.FC<Pick<MorphingTextProps, "texts">> = ({ texts }) => {
-  const { text1Ref, text2Ref } = useMorphingText(texts)
+  const { text1Ref, text2Ref } = useMorphingText(texts);
   return (
     <>
       <span
@@ -109,8 +109,8 @@ const Texts: React.FC<Pick<MorphingTextProps, "texts">> = ({ texts }) => {
         ref={text2Ref}
       />
     </>
-  )
-}
+  );
+};
 
 const SvgFilters: React.FC = () => (
   <svg
@@ -131,7 +131,7 @@ const SvgFilters: React.FC = () => (
       </filter>
     </defs>
   </svg>
-)
+);
 
 export const MorphingText: React.FC<MorphingTextProps> = ({
   texts,
@@ -140,10 +140,10 @@ export const MorphingText: React.FC<MorphingTextProps> = ({
   <div
     className={cn(
       "relative mx-auto h-16 w-full max-w-screen-md text-center font-sans text-[40pt] leading-none font-bold [filter:url(#threshold)_blur(0.6px)] md:h-24 lg:text-[6rem]",
-      className
+      className,
     )}
   >
     <Texts texts={texts} />
     <SvgFilters />
   </div>
-)
+);