feat: add randomized rotations and hover pointer cursor

ucsddesignco · Apr 5, 2024 · e2a7a03 · e2a7a03
1 parent 37681dc
commit e2a7a03
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 10 deletions.
diff --git a/public/images/cursor-pointer.svg b/public/images/cursor-pointer.svg
diff --git a/public/images/cursor.svg b/public/images/cursor.svg
diff --git a/src/components/Asteroid/Asteroid.scss b/src/components/Asteroid/Asteroid.scss
@@ -1,15 +1,21 @@
 .asteroid-container {
-  position: absolute;
+  position: fixed;
   height: 100%;
   width: 100%;
   display: grid;
   align-items: start;
+  pointer-events: none;
 
   .asteroid {
-    z-index: 100;
+    z-index: 2;
     position: absolute;
     top: 0;
     left: 0;
+    pointer-events: auto;
+
+    &:hover {
+      cursor: $cursor-pointer;
+    }
   }
 
   .fragment {

diff --git a/src/components/Asteroid/Asteroid.tsx b/src/components/Asteroid/Asteroid.tsx
@@ -22,6 +22,7 @@ export default function Asteroid({ homeRef }: AsteroidProps) {
   const [asteroidVisibility, setAsteroidVisibility] = useState<boolean[]>([]);
   const [asteroidExploded, setAsteroidExploded] = useState<boolean[]>([]);
   const [fragmentEdPts, setFragmentEndPts] = useState<Point[]>([]);
+  const [asteroidRotations, setAsteroidRotations] = useState<number[]>([]);
 
   type animationProps = {
     initial: Point;
@@ -145,6 +146,15 @@ export default function Asteroid({ homeRef }: AsteroidProps) {
     }
   }, [homeRef, contentInfo.paddingLeft, contentInfo.width]);
 
+  // Initialize asteroid rotation values
+  useEffect(() => {
+    const rotations = Array.from(
+      { length: numAsteroids },
+      () => Math.random() * 360
+    );
+    setAsteroidRotations(rotations);
+  }, [numAsteroids]);
+
   return (
     <section className="asteroid-container">
       {Array.from({ length: numAsteroids }, (_, index) =>
@@ -195,6 +205,7 @@ export default function Asteroid({ homeRef }: AsteroidProps) {
               initial={asteroidAnimations[index]?.initial}
               animate={asteroidAnimations[index]?.animate}
               transition={asteroidAnimations[index]?.transition}
+              style={{ rotate: `${asteroidRotations[index]}deg` }}
             >
               <LargeAsteroid2 />
             </motion.div>