<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pointing App Tool</title> <style> body { margin: 0; padding: 0; overflow: hidden; /* Prevent scrolling */ background-color: #f0f0f0; /* Light background for visibility */ cursor: none; /* Hide default cursor */ } #pointer { position: absolute; width: 20px; height: 20px; background-color: red; border-radius: 50%; pointer-events: none; /* So it doesn't interfere with clicks */ transition: opacity 0.5s; /* Smooth fade */ } </style> </head> <body> <div id="pointer"></div> <script> const pointer = document.getElementById('pointer'); // Track mouse movement document.addEventListener('mousemove', (e) => { pointer.style.left = `${e.clientX - 10}px`; // Center the dot on cursor pointer.style.top = `${e.clientY - 10}px`; pointer.style.opacity = '1'; // Make it visible }); // On click, briefly highlight (fade out after 1 second) document.addEventListener('click', () => { setTimeout(() => { pointer.style.opacity = '0.5'; // Fade to semi-transparent }, 1000); }); // Optional: Hide pointer when mouse leaves the window document.addEventListener('mouseleave', () => { pointer.style.opacity = '0'; }); </script> </body> </html>