Skip to content

Commit 02c0d9b

Browse files
added cursor
1 parent 0156fe9 commit 02c0d9b

File tree

3 files changed

+60
-2
lines changed

3 files changed

+60
-2
lines changed

src/components/GlowingCursor.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React, { useEffect } from 'react';
2+
import '../css/custom.css';
3+
4+
const CursorComponent = () => {
5+
useEffect(() => {
6+
const cursor = document.querySelector('.cursor');
7+
8+
const moveCursor = (e) => {
9+
cursor.style.left = e.pageX + 'px';
10+
cursor.style.top = e.pageY + 'px';
11+
};
12+
13+
document.addEventListener('mousemove', moveCursor);
14+
15+
return () => {
16+
document.removeEventListener('mousemove', moveCursor);
17+
};
18+
}, []);
19+
20+
return (
21+
<div className="cursor-container">
22+
<div className="cursor"></div>
23+
</div>
24+
);
25+
};
26+
27+
export default CursorComponent;

src/css/custom.css

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -367,4 +367,34 @@ table, tr, td, th {
367367

368368
.row .col .card {
369369
margin-top: 10px;
370-
}
370+
}
371+
372+
373+
/* src/css/custom.css */
374+
375+
/* Define the glowing cursor */
376+
html {
377+
cursor: none;
378+
}
379+
380+
.cursor {
381+
position: absolute;
382+
width: 20px;
383+
height: 20px;
384+
border-radius: 50%;
385+
background-color: deepskyblue;
386+
mix-blend-mode: difference;
387+
pointer-events: none;
388+
transform: translate(-50%, -50%);
389+
transition: width 0.3s, height 0.3s, background-color 0.3s;
390+
animation: glow 1s infinite alternate;
391+
}
392+
393+
@keyframes glow {
394+
0% {
395+
box-shadow: 0 0 10px 5px rgba(0, 191, 255, 0.5);
396+
}
397+
100% {
398+
box-shadow: 0 0 20px 10px rgba(0, 191, 255, 0.9);
399+
}
400+
}

src/pages/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import 'swiper/css/navigation';
1717
import 'swiper/css/pagination';
1818
import { Swiper, SwiperSlide } from 'swiper/react';
1919
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
20+
import CursorComponent from '../components/GlowingCursor'
2021

2122
function TweetsSection() {
2223
const tweetColumns = [[], [], []];
@@ -107,7 +108,7 @@ export default function Home() {
107108
</div>
108109

109110
<TweetsSection />
110-
111+
<CursorComponent/>
111112
<ScrollTopToButton />
112113
<ScrollBottomToTop />
113114
</main>

0 commit comments

Comments
 (0)