diff --git a/Components/Cursors/Difference-Dot-Cursor/index.html b/Components/Cursors/Difference-Dot-Cursor/index.html
new file mode 100644
index 00000000..e5ea6a5f
--- /dev/null
+++ b/Components/Cursors/Difference-Dot-Cursor/index.html
@@ -0,0 +1,93 @@
+
+
+
+
+
+
+ Custom Cursor and Menu Animation
+
+
+
+
+
+
+
+
+
+
+
+
MyLogo
+
+
+
+
+
Welcome
+ This is the hero section with some introductory content.
+
+
+
+ Section Two
+ This section contains a form you can interact with:
+
+
+
+ Section Three
+ Try clicking the elements below:
+ Click Me!
+
+
+
+ Section Four
+ Here is a simple image carousel:
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Components/Cursors/Difference-Dot-Cursor/script.js b/Components/Cursors/Difference-Dot-Cursor/script.js
new file mode 100644
index 00000000..da9f685f
--- /dev/null
+++ b/Components/Cursors/Difference-Dot-Cursor/script.js
@@ -0,0 +1,78 @@
+
+// Your JavaScript code here
+$("#nav-btn").on("click", function () {
+ $('#takeover-nav').toggleClass("shown");
+ $('.sticky-nav').toggleClass("difference");
+});
+
+// Cursor JavaScript (including TweenLite)
+document.addEventListener("DOMContentLoaded", function (event) {
+ var cursor = document.querySelector(".custom-cursor");
+ var links = document.querySelectorAll("a, button, #nav-btn, input.btn");
+ var initCursor = false;
+
+ for (var i = 0; i < links.length; i++) {
+ var selfLink = links[i];
+
+ selfLink.addEventListener("mouseover", function () {
+ cursor.classList.add("custom-cursor--link");
+ });
+ selfLink.addEventListener("mouseout", function () {
+ cursor.classList.remove("custom-cursor--link");
+ });
+ }
+
+ window.onmousemove = function (e) {
+ var mouseX = e.clientX;
+ var mouseY = e.clientY;
+
+ if (!initCursor) {
+ TweenLite.to(cursor, 0.5, {
+ opacity: 1
+ });
+ initCursor = true;
+ }
+
+ TweenLite.to(cursor, 0, {
+ top: mouseY + "px",
+ left: mouseX + "px"
+ });
+ };
+
+ window.ontouchmove = function (e) {
+ var mouseX = e.touches[0].clientX;
+ var mouseY = e.touches[0].clientY;
+ if (!initCursor) {
+ TweenLite.to(cursor, 0.3, {
+ opacity: 1
+ });
+ initCursor = true;
+ }
+
+ TweenLite.to(cursor, 0, {
+ top: mouseY + "px",
+ left: mouseX + "px"
+ });
+ };
+
+ window.onmouseout = function (e) {
+ TweenLite.to(cursor, 0.3, {
+ opacity: 0
+ });
+ initCursor = false;
+ };
+
+ window.ontouchstart = function (e) {
+ TweenLite.to(cursor, 0.3, {
+ opacity: 1
+ });
+ };
+
+ window.ontouchend = function (e) {
+ setTimeout(function () {
+ TweenLite.to(cursor, 0.3, {
+ opacity: 0
+ });
+ }, 200);
+ };
+});
\ No newline at end of file
diff --git a/Components/Cursors/Difference-Dot-Cursor/style.css b/Components/Cursors/Difference-Dot-Cursor/style.css
new file mode 100644
index 00000000..af2a5613
--- /dev/null
+++ b/Components/Cursors/Difference-Dot-Cursor/style.css
@@ -0,0 +1,212 @@
+body {
+ cursor: none;
+}
+
+/* Custom styles for the custom cursor */
+.custom-cursor {
+ position: fixed;
+ opacity: 0;
+ pointer-events: none;
+ mix-blend-mode: difference;
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ background-color: #00BCD4;
+ /* Example color */
+ transition: transform 350ms ease;
+ transform: translate(-50%, -50%) scale(.3);
+ z-index: 1000;
+ pointer-events: none;
+ cursor: none;
+}
+
+.custom-cursor--link {
+ transform: translate(-50%, -50%) scale(1.25);
+}
+
+a {
+ cursor: none;
+}
+
+/* General Styles */
+body {
+ margin: 0;
+ padding: 0;
+ font-family: Arial, sans-serif;
+ color: #333;
+ overflow-x: hidden;
+}
+
+/* Header and Navigation */
+header {
+ position: relative;
+ width: 100%;
+ background-color: #333;
+ /* Dark background for the header */
+ color: #fff;
+}
+
+.sticky-nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 15px;
+ position: relative;
+}
+
+#nav-btn {
+}
+
+#nav-btn-icon {
+ display: block;
+}
+
+#takeover-nav {
+ display: none;
+ /* Initially hidden */
+ position: fixed;
+ top: 0;
+ right: 0;
+ width: 300px;
+ height: 100%;
+ background-color: #444;
+ color: #fff;
+ padding: 20px;
+ box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
+ z-index: 1000;
+ overflow-y: auto;
+}
+
+.nav-col a,
+.nav-contact a {
+ display: block;
+ color: #fff;
+ text-decoration: none;
+ margin: 10px 0;
+ padding: 10px;
+ font-size: 16px;
+}
+
+.nav-col a:hover,
+.nav-contact a:hover {
+ background-color: #555;
+ border-radius: 4px;
+}
+
+/* Logo Style */
+.logo {
+ font-size: 24px;
+ font-weight: bold;
+}
+
+/* Sections */
+section {
+ padding: 60px 20px;
+ color: #fff;
+ text-align: center;
+ min-height: 100vh;
+}
+
+/* Different colors for each section */
+.hero {
+ background-color: #3498db;
+ /* Blue */
+}
+
+.two {
+ background-color: #e74c3c;
+ /* Red */
+}
+
+.three {
+ background-color: #2ecc71;
+ /* Green */
+}
+
+.four {
+ background-color: #f39c12;
+ /* Yellow */
+}
+
+/* Custom Cursor */
+.custom-cursor {
+ position: fixed;
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ background-color: #00BCD4;
+ /* Example color */
+ pointer-events: none;
+ transition: transform 350ms ease, opacity 0.3s ease;
+ mix-blend-mode: difference;
+ transform: translate(-50%, -50%) scale(0.3);
+ z-index: 1000;
+ opacity: 0;
+}
+
+.custom-cursor--link {
+ transform: translate(-50%, -50%) scale(1.25);
+}
+
+/* Hide default cursor over links */
+a,
+button,
+#nav-btn,
+input.btn {
+ cursor: none;
+}
+
+button,
+.btn {
+ background: #333;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ font-size: 16px;
+ border-radius: 5px;
+ transition: background-color 0.3s, transform 0.2s;
+ text-align: center;
+ display: inline-block;
+}
+
+button:hover,
+.btn:hover {
+ background-color: #000000;
+}
+
+button:active,
+.btn:active {
+ transform: scale(0.95);
+}
+
+input,
+textarea {
+ padding: 10px;
+ font-size: 16px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ outline: none;
+ transition: border-color 0.3s;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+input:focus,
+textarea:focus {
+ border-color: #3498db;
+ box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
+}
+
+form {
+ margin: 0 auto;
+ max-width: 500px;
+ padding: 20px;
+ background: #f9f9f9;
+ border-radius: 5px;
+}
+
+form label {
+ margin: 10px 0 5px;
+ font-size: 16px;
+ display: block;
+}
\ No newline at end of file
diff --git a/assets/html_files/cursors.html b/assets/html_files/cursors.html
index 7ea13339..c2cd3ad3 100644
--- a/assets/html_files/cursors.html
+++ b/assets/html_files/cursors.html
@@ -109,6 +109,19 @@ Cultural Cursor
+
+
Difference Dot Cursor
+
+
+
+
+
+
+
+ 
+ 
+