From fa585b7331b9eb6afd1da536dd04785c6da2c666 Mon Sep 17 00:00:00 2001 From: Mastan Sayyad Date: Wed, 10 Jul 2024 01:04:25 +0530 Subject: [PATCH 1/4] Create CursorTrail.tsx --- components/CursorTrail.tsx | 82 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 components/CursorTrail.tsx diff --git a/components/CursorTrail.tsx b/components/CursorTrail.tsx new file mode 100644 index 0000000..27413c5 --- /dev/null +++ b/components/CursorTrail.tsx @@ -0,0 +1,82 @@ +"use client"; +import React, { useEffect } from 'react'; + +interface ExtendedHTMLElement extends HTMLElement { + x?: number; + y?: number; +} + +const CursorTrail: React.FC = () => { + useEffect(() => { + const circles: ExtendedHTMLElement[] = []; + const numCircles = 25; + + // Create initial circles with zero position and size + for (let i = 0; i < numCircles; i++) { + circles.push({ x: 0, y: 0, size: 25 }); // Initial size can be adjusted + } + + let mouseX = 0; + let mouseY = 0; + let isMouseMoving = false; + + const handleMouseMove = (e: MouseEvent) => { + mouseX = e.pageX; + mouseY = e.pageY - window.scrollY; + isMouseMoving = true; + }; + + const updateCircles = () => { + circles.forEach((circle, index) => { + const targetX = index === 0 ? mouseX : circles[index - 1].x; + const targetY = index === 0 ? mouseY : circles[index - 1].y; + + // Increase the damping factor for faster movement + circle.x += (targetX - circle.x) * 0.6; + circle.y += (targetY - circle.y) * 0.6; + + // Decrease size gradually based on index + circle.size = 25 - (index * 0.8); // Adjust the rate of size decrease + + const circleElement = document.querySelector(`#circle-${index}`) as ExtendedHTMLElement; + if (circleElement) { + circleElement.style.left = `${circle.x}px`; + circleElement.style.top = `${circle.y}px`; + circleElement.style.width = `${circle.size}px`; // Adjust width for circle effect + circleElement.style.height = `${circle.size}px`; // Adjust height for circle effect + } + }); + + if (!isMouseMoving) { + circles.forEach(circle => { + circle.x += (mouseX - circle.x) * 0.1; + circle.y += (mouseY - circle.y) * 0.1; + }); + } + + requestAnimationFrame(updateCircles); + }; + + window.addEventListener("mousemove", handleMouseMove); + updateCircles(); + + return () => { + window.removeEventListener("mousemove", handleMouseMove); + }; + }, []); + + return ( +
+ {Array.from({ length: 25 }).map((_, index) => ( +
+ ))} +
+ ); +}; + +export default CursorTrail; From 9db8b16c9a8a64f07d09e2c7d2c81f990e0f041d Mon Sep 17 00:00:00 2001 From: Mastan Sayyad Date: Wed, 10 Jul 2024 01:04:48 +0530 Subject: [PATCH 2/4] Update layout.tsx --- app/layout.tsx | 26 ++------------------------ 1 file changed, 2 insertions(+), 24 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index ac5c1ce..496d1b9 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -7,9 +7,9 @@ import ToastProvider from '@/providers/toast-provider' import Navbar from '@/components/navbar' // import HomePage from './(routes)/page' import Footer from '@/components/footer' -import AnimatedCursor from 'react-animated-cursor' import './globals.css' import BackToTop from '@/components/ui/BacktoTop' +import CursorTrail from '@/components/CursorTrail' const font = Urbanist({ subsets: ['latin'] }) @@ -29,30 +29,8 @@ export default function RootLayout({ - - + From c20f4b40dfafd7640791730e4e4405ed0c4a8344 Mon Sep 17 00:00:00 2001 From: Mastan Sayyad Date: Wed, 10 Jul 2024 01:04:59 +0530 Subject: [PATCH 3/4] Update globals.css --- app/globals.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/app/globals.css b/app/globals.css index cb102de..50d606f 100644 --- a/app/globals.css +++ b/app/globals.css @@ -50,4 +50,13 @@ body, body { @apply bg-background text-foreground; } +} + +.circle { + @apply absolute w-7 h-7 rounded-full pointer-events-none transition-transform duration-100; + background: radial-gradient(circle, rgba(0, 62, 208, 0.5), rgba(219, 251, 255, 0.5)); +} + +.circle-container { + @apply fixed top-0 left-0 w-full h-full pointer-events-none z-[9999]; } \ No newline at end of file From bc708f0d8a77cd792fd81eb6f847eb09ae63e60a Mon Sep 17 00:00:00 2001 From: Mastan Sayyad Date: Wed, 10 Jul 2024 01:52:18 +0530 Subject: [PATCH 4/4] Update --- components/CursorTrail.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/components/CursorTrail.tsx b/components/CursorTrail.tsx index 27413c5..c835586 100644 --- a/components/CursorTrail.tsx +++ b/components/CursorTrail.tsx @@ -11,9 +11,9 @@ const CursorTrail: React.FC = () => { const circles: ExtendedHTMLElement[] = []; const numCircles = 25; - // Create initial circles with zero position and size + for (let i = 0; i < numCircles; i++) { - circles.push({ x: 0, y: 0, size: 25 }); // Initial size can be adjusted + circles.push({ x: 0, y: 0, size: 25 }); } let mouseX = 0; @@ -31,19 +31,19 @@ const CursorTrail: React.FC = () => { const targetX = index === 0 ? mouseX : circles[index - 1].x; const targetY = index === 0 ? mouseY : circles[index - 1].y; - // Increase the damping factor for faster movement + // for faster movement circle.x += (targetX - circle.x) * 0.6; circle.y += (targetY - circle.y) * 0.6; - // Decrease size gradually based on index - circle.size = 25 - (index * 0.8); // Adjust the rate of size decrease + + circle.size = 25 - (index * 0.8); // the rate of size decrease const circleElement = document.querySelector(`#circle-${index}`) as ExtendedHTMLElement; if (circleElement) { circleElement.style.left = `${circle.x}px`; circleElement.style.top = `${circle.y}px`; - circleElement.style.width = `${circle.size}px`; // Adjust width for circle effect - circleElement.style.height = `${circle.size}px`; // Adjust height for circle effect + circleElement.style.width = `${circle.size}px`; // width for circle effect + circleElement.style.height = `${circle.size}px`; // height for circle effect } }); @@ -72,7 +72,7 @@ const CursorTrail: React.FC = () => { key={index} id={`circle-${index}`} className="circle" - style={{ width: '25px', height: '25px' }} // Initial size can be adjusted here too + style={{ width: '25px', height: '25px' }} // Initial size > ))}