feat: add randomized portfolio hero variants

app/components/cinematic/CustomCursor.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState, useCallback } from "react";
-import { motion, useMotionValue, useSpring } from "framer-motion";
+import { motion, useMotionValue } from "framer-motion";
 
 export default function CustomCursor() {
   const [isHovering, setIsHovering] = useState(false);
@@ -10,13 +10,6 @@ export default function CustomCursor() {
   const [isVisible, setIsVisible] = useState(false);
   const cursorX = useMotionValue(0);
   const cursorY = useMotionValue(0);
-  const springConfig = { damping: 25, stiffness: 250, mass: 0.5 };
-  const x = useSpring(cursorX, springConfig);
-  const y = useSpring(cursorY, springConfig);
-
-  const ringSpringConfig = { damping: 20, stiffness: 150, mass: 0.8 };
-  const ringX = useSpring(cursorX, ringSpringConfig);
-  const ringY = useSpring(cursorY, ringSpringConfig);
 
   const rafRef = useRef<number>(0);
 
@@ -29,7 +22,7 @@ export default function CustomCursor() {
         if (!isVisible) setIsVisible(true);
       });
     },
-    [cursorX, cursorY, isVisible]
+    [cursorX, cursorY, isVisible],
   );
 
   useEffect(() => {
@@ -57,7 +50,7 @@ export default function CustomCursor() {
 
     function attachHoverListeners() {
       const hoverables = document.querySelectorAll(
-        'a, button, [role="button"], input, textarea, select, [data-cursor]'
+        'a, button, [role="button"], input, textarea, select, [data-cursor]',
       );
       for (const el of hoverables) {
         el.addEventListener("mouseenter", handleElementEnter as EventListener);
@@ -89,7 +82,10 @@ export default function CustomCursor() {
   }, [handleMouseMove]);
 
   // Don't render on touch devices
-  if (typeof window !== "undefined" && !window.matchMedia("(pointer: fine)").matches) {
+  if (
+    typeof window !== "undefined" &&
+    !window.matchMedia("(pointer: fine)").matches
+  ) {
     return null;
   }
 
@@ -105,8 +101,8 @@ export default function CustomCursor() {
       <motion.div
         className="pointer-events-none fixed top-0 left-0 z-[9999] mix-blend-difference"
         style={{
-          x,
-          y,
+          x: cursorX,
+          y: cursorY,
           translateX: "-50%",
           translateY: "-50%",
         }}
@@ -126,8 +122,8 @@ export default function CustomCursor() {
       <motion.div
         className="pointer-events-none fixed top-0 left-0 z-[9998] mix-blend-difference"
         style={{
-          x: ringX,
-          y: ringY,
+          x: cursorX,
+          y: cursorY,
           translateX: "-50%",
           translateY: "-50%",
         }}
@@ -141,7 +137,11 @@ export default function CustomCursor() {
       >
         <div
           className="flex h-full w-full items-center justify-center rounded-full border-[#ccff00]"
-          style={{ borderStyle: "solid", borderColor: "#ccff00", borderWidth: "inherit" }}
+          style={{
+            borderStyle: "solid",
+            borderColor: "#ccff00",
+            borderWidth: "inherit",
+          }}
         >
           {hoverText && (
             <motion.span