From 02c0d9bf778f8d796a825ac555ac3f27df714356 Mon Sep 17 00:00:00 2001
From: mankalavaishnavi <mankalavaishnavi2004@gmail.com>
Date: Thu, 27 Jun 2024 13:29:05 +0530
Subject: [PATCH] added cursor

---
 src/components/GlowingCursor.js | 27 +++++++++++++++++++++++++++
 src/css/custom.css              | 32 +++++++++++++++++++++++++++++++-
 src/pages/index.tsx             |  3 ++-
 3 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 src/components/GlowingCursor.js

diff --git a/src/components/GlowingCursor.js b/src/components/GlowingCursor.js
new file mode 100644
index 000000000..34521e667
--- /dev/null
+++ b/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;
diff --git a/src/css/custom.css b/src/css/custom.css
index 57e725100..fd40e1286 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -367,4 +367,34 @@ table, tr, td, th {
 
 .row .col .card {
   margin-top: 10px;
-}
\ No newline at end of file
+}
+
+
+/* src/css/custom.css */
+
+/* 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);
+  }
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d1df86c60..f08f35e9b 100644
--- a/src/pages/index.tsx
+++ b/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>