diff --git a/mousetest.html b/mousetest.html
index c48dead..5387e2e 100644
--- a/mousetest.html
+++ b/mousetest.html
@@ -3,16 +3,52 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>test</title>
-<script type="module">
-  import { fairyDustCursor } from "https://unpkg.com/cursor-effects@latest/dist/esm.js";
+  <title>Trailing</title>
+  <script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>
+  <style>
+    /* Trailing effect customization */
+    .cursor-trailing {
+      position: absolute;
+      pointer-events: none;
+      background-color: rgba(0, 0, 0, 0.2); /* Customize the background color */
+      width: 20px; /* Adjust size */
+      height: 20px; /* Adjust size */
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+      animation: cursor-trailing-animation 0.3s ease-out;
+    }
+
+    @keyframes cursor-trailing-animation {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+  </style>
+</head>
+<body>
+
+  <h1>site</h1>
+  <p>trailing effect</p>
 
-  new fairyDustCursor();
-</script>
   <script>
-    window.addEventListener("load", (event) => {
-  new cursoreffects.ghostCursor();
-      </script>
-});
+    document.addEventListener('DOMContentLoaded', function () {
+      new CursorEffect({
+        type: 'trailing', // Set the effect type to "trailing"
+        cursor: {
+          size: 12, // Set the size of the main cursor
+          color: 'rgba(255, 0, 0, 0.5)', // Customize the cursor color
+        },
+        trailing: {
+          size: 15, // Set the size of the trailing effect
+          distance: 50, // Set the distance the trail lags behind the main cursor
+          color: 'rgba(0, 255, 0, 0.5)', // Customize the trailing color
+        }
+      });
+    });
+  </script>
+
 </body>
 </html>
