Merge pull request #2146 from VaishnaviMankala19/glowing-cursor

added cursor

Author: ajay-dhangar

src/components/GlowingCursor.js

@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+import '../css/custom.css';
+
+const CursorComponent = () => {
+    useEffect(() => {
+        const cursor = document.querySelector('.cursor');
+
+        const moveCursor = (e) => {
+            cursor.style.left = e.pageX + 'px';
+            cursor.style.top = e.pageY + 'px';
+        };
+
+        document.addEventListener('mousemove', moveCursor);
+
+        return () => {
+            document.removeEventListener('mousemove', moveCursor);
+        };
+    }, []);
+
+    return (
+        <div className="cursor-container">
+            <div className="cursor"></div>
+        </div>
+    );
+};
+
+export default CursorComponent;

src/css/custom.css

@@ -368,3 +368,30 @@ th {
 .row .col .card {
   margin-top: 10px;
 }
+
+/* Define the glowing cursor */
+html {
+  cursor: none;
+}
+
+.cursor {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: deepskyblue;
+  mix-blend-mode: difference;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  transition: width 0.3s, height 0.3s, background-color 0.3s;
+  animation: glow 1s infinite alternate;
+}
+
+@keyframes glow {
+  0% {
+    box-shadow: 0 0 10px 5px rgba(0, 191, 255, 0.5);
+  }
+  100% {
+    box-shadow: 0 0 20px 10px rgba(0, 191, 255, 0.9);
+  }
+}

src/pages/index.tsx

@@ -17,6 +17,7 @@ import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Navigation, Pagination, Autoplay } from 'swiper/modules';
+import CursorComponent from '../components/GlowingCursor'
 
 function TweetsSection() {
   const tweetColumns = [[], [], []];
@@ -107,7 +108,7 @@ export default function Home() {
         </div>
 
         <TweetsSection />
-
+        <CursorComponent/>
         <ScrollTopToButton />
         <ScrollBottomToTop />
       </main>