Add cursor-following light ball widget with smooth trailing effect

Service Portal Widgets/Mouse Effect/README.md

@@ -0,0 +1,20 @@
+# Cursor Light Ball Widget
+
+This ServiceNow Service Portal widget creates a light blue, glowing "light ball" that follows the cursor with a smooth trailing effect. The light ball is offset slightly from the cursor and has a soft glow, giving a visually appealing effect on the page.
+
+## Widget Components
+
+### HTML
+The widget contains a single `div` element representing the light ball.
+
+### CSS
+This contains the style for the `div` element in HTML
+
+### Script
+This function tracks the cursor's position and updates the light ball's position accordingly with a 10px offset. The mousemove event listener enables smooth, real-time cursor tracking.
+
+## Installation
+1. Add a new widget in ServiceNow and name it, for example, "Cursor Light Ball".
+2. Copy the HTML, CSS, and JavaScript code provided into the respective sections of the widget.
+3. Make sure you copy the JavaScript code in the Client Script section of the widget.
+4. Save the widget, and add it to your Service Portal page to see the light ball effect.

Service Portal Widgets/Mouse Effect/index.html

@@ -0,0 +1 @@
+<div class="light-ball"></div>

Service Portal Widgets/Mouse Effect/script.js

@@ -0,0 +1,14 @@
+api.controller=function($scope, $element) {
+    var lightBall = $element.find('.light-ball');
+
+    // Update the position of the light ball on mouse move
+    document.addEventListener('mousemove', function(event) {
+        var mouseX = event.pageX + 10; // Offset by 10px to the right
+        var mouseY = event.pageY + 10; // Offset by 10px to the bottom
+
+        // Apply the position to the light ball
+        lightBall.css({
+            transform: 'translate(' + (mouseX - 30) + 'px, ' + (mouseY - 30) + 'px)'
+        });
+    });
+}

Service Portal Widgets/Mouse Effect/style.css

@@ -0,0 +1,13 @@
+/* Light Ball Styling */
+.light-ball {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 60px;
+    height: 60px;
+    background-color: rgba(173, 216, 230, 0.8); /* Light blue with slight transparency */
+    border-radius: 50%;
+    filter: blur(25px); /* Creates a fuzzy glow effect */
+    pointer-events: none; /* Ensures it doesn't interfere with clicking */
+    transition: transform 0.5s ease; /* 500ms latency effect */
+}