Merge pull request #81 from AswaniBolisetti/cursor-animation

added cursor animation

src/App.css

@@ -8,6 +8,27 @@
   margin: 0px;
   padding: 0px;
 }
+/* App.css */
+.fairy-dust-particle {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-color: pink;
+  border-radius: 50%;
+  pointer-events: none;
+  animation: fade-out 1s forwards;
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+}
 
 .App-logo {
   height: 40vmin;

src/App.js

@@ -1,28 +1,25 @@
 /** @format */
 
-import React from "react";
+import React, { useEffect } from "react";
 import { Route, BrowserRouter as Router, Routes } from "react-router-dom"; // Import Router from react-router-dom
 import "bootstrap/dist/css/bootstrap.min.css"; // Import Bootstrap CSS
 import Home from "./components/Home";
 import Template from "./components/Auth/Template";
-
+import { fairyDustCursor } from "./components/FairyDust"; // Import the fairy-dust effect
 
 function App() {
+	// Initialize the fairy-dust cursor effect globally
+	useEffect(() => {
+		fairyDustCursor();
+	}, []);
+
 	return (
 		<div>
 			<Router>
 				<Routes>
-					<Route
-						path="/"
-						element={<Home />}></Route>
-					<Route
-						path="/login"
-						element={<Template formType={"login"} />}
-					/>
-					<Route
-						path="/signup"
-						element={<Template formType={"signup"} />}
-					/>
+					<Route path="/" element={<Home />} />
+					<Route path="/login" element={<Template formType={"login"} />} />
+					<Route path="/signup" element={<Template formType={"signup"} />} />
 				</Routes>
 			</Router>
 		</div>

src/components/FairyDust.js

@@ -0,0 +1,39 @@
+export function fairyDustCursor() {
+	const possibleColors = ["#D61C59", "#E7D84B", "#1B8798"];
+
+	let width = window.innerWidth;
+	let height = window.innerHeight;
+
+	const cursor = { x: width / 2, y: width / 2 };
+	const particles = [];
+
+	// Helper function to create particle elements
+	function createParticle(x, y) {
+		const particle = document.createElement("div");
+		particle.classList.add("fairy-dust-particle");
+		particle.style.backgroundColor =
+			possibleColors[Math.floor(Math.random() * possibleColors.length)];
+		particle.style.left = `${x}px`;
+		particle.style.top = `${y + window.scrollY}px`; // Adjust the Y position based on scroll
+		document.body.appendChild(particle);
+
+		particles.push(particle);
+		// Remove particle after animation
+		setTimeout(() => {
+			particle.remove();
+		}, 1000);
+	}
+
+	// Event listener for mouse movement
+	document.addEventListener("mousemove", (e) => {
+		cursor.x = e.clientX;
+		cursor.y = e.clientY;
+		createParticle(cursor.x, cursor.y);
+	});
+
+	// Update width and height on window resize
+	window.addEventListener("resize", () => {
+		width = window.innerWidth;
+		height = window.innerHeight;
+	});
+}