Merge pull request #2588 from stakwork/feature/custom-cursor

feat: add custom cursor
stakwork · Dec 27, 2024 · 6f6b336 · 6f6b336
2 parents 14d73b9 + f7c89a1
commit 6f6b336
Showing 1 changed file with 95 additions and 7 deletions.
diff --git a/src/components/Universe/CursorTooltip/index.tsx b/src/components/Universe/CursorTooltip/index.tsx
@@ -5,8 +5,11 @@ import { useHoveredNode } from '~/stores/useGraphStore'
 import { colors } from '~/utils'
 import { HoverCard } from './HoverCard/index'
 
+const CURSOR_SIZE = 100
+
 export const CursorTooltip = () => {
   const tooltipRef = useRef<HTMLDivElement | null>(null)
+  const cursorRef = useRef<HTMLDivElement | null>(null)
   const node = useHoveredNode()
 
   useEffect(() => {
@@ -16,22 +19,27 @@ export const CursorTooltip = () => {
   }, [node])
 
   useEffect(() => {
+    const canvasElement = document.getElementById('universe-canvas')
     let animationFrameId: number
+    const tooltip = tooltipRef.current
+    const cursor = cursorRef.current
 
     const handleMouseMove = (e: MouseEvent) => {
-      const tooltip = tooltipRef.current
-
-      if (!tooltip) {
+      if (!tooltip || !cursor) {
         return
       }
 
-      // Hide tooltip if not hovering over canvas
       const target = e.target as Element
 
       if (target.tagName !== 'CANVAS') {
         tooltip.style.display = 'none'
+        cursor.style.display = 'none'
+      } else {
+        if (canvasElement) {
+          canvasElement.style.cursor = 'none'
+        }
 
-        return
+        cursor.style.display = 'flex'
       }
 
       tooltip.style.display = 'block' // Ensure tooltip is visible if hovering canvas
@@ -46,6 +54,7 @@ export const CursorTooltip = () => {
 
       animationFrameId = requestAnimationFrame(() => {
         tooltip.style.transform = `translate(${x}px, ${y}px)`
+        cursor.style.transform = `translate(${e.clientX - CURSOR_SIZE / 2}px, ${e.clientY - CURSOR_SIZE / 2}px)`
       })
     }
 
@@ -57,7 +66,30 @@ export const CursorTooltip = () => {
     }
   }, [])
 
-  return <TooltipContainer ref={tooltipRef}>{node && <HoverCard node={node} />}</TooltipContainer>
+  return (
+    <>
+      <CustomCursorWrapper ref={cursorRef}>
+        <Flex className="inner-circle">
+          <Flex align="center" className="inner-circle__text" grow={1} justify="space-between">
+            {node ? (
+              <>
+                <span>Click to</span>
+                <span>Select</span>
+              </>
+            ) : (
+              <>
+                <span>Scroll to</span>
+                <span>Explore</span>
+              </>
+            )}
+          </Flex>
+
+          <span className="inner-circle__center">+</span>
+        </Flex>
+      </CustomCursorWrapper>
+      <TooltipContainer ref={tooltipRef}>{node && <HoverCard node={node} />}</TooltipContainer>
+    </>
+  )
 }
 
 const TooltipContainer = styled(Flex)`
@@ -68,7 +100,7 @@ const TooltipContainer = styled(Flex)`
   will-change: transform; /* Optimize for transform changes */
   background: ${colors.BG1};
   color: white;
-  padding: 5px;
+  padding: 0;
   border-radius: 3px;
   pointer-events: none; /* Tooltip won't block mouse events */
   z-index: 1000;
@@ -78,3 +110,59 @@ const TooltipContainer = styled(Flex)`
   display: none; /* Initially hidden */
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow for better visibility */
 `
+
+const CustomCursorWrapper = styled(Flex)`
+  pointer-events: none;
+  left: 0;
+  top: 0;
+  border: 1px solid ${colors.white};
+  border-radius: 50%;
+  border-color: rgba(255, 255, 255, 0.2);
+  position: fixed;
+  background: rgba(0, 0, 0, 0.2);
+  width: ${CURSOR_SIZE}px;
+  height: ${CURSOR_SIZE}px;
+  align-items: center;
+  justify-content: center;
+
+  .inner-circle {
+    width: ${CURSOR_SIZE - 30}px;
+    height: ${CURSOR_SIZE - 30}px;
+    border-radius: 50%;
+    border: 1px solid ${colors.white};
+    border-color: rgba(255, 255, 255, 0.2);
+    justify-content: center;
+    align-items: center;
+    color: rgba(255, 255, 255, 1);
+    font-size: 6px;
+    text-transform: uppercase;
+    font-weight: 300;
+    background: radial-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));
+
+    &__text {
+      animation: fadeOpacity 8s infinite;
+      padding: 12px;
+
+      /* Define keyframes */
+      @keyframes fadeOpacity {
+        0%,
+        100% {
+          opacity: 0.2;
+        }
+        50% {
+          opacity: 0.8;
+        }
+      }
+    }
+
+    &__center {
+      font-size: 20px;
+      font-weight: 200;
+      opacity: 0.5;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+  }
+`