Cursor Clock Pointer
The ultimate 90s/00s web effect. A small digital clock that chases your mouse cursor around the screen.
Move your mouse inside this box.
12:00:00
Copy the Script
<div id="cursorClock" style="position:absolute; top:0; left:0; pointer-events:none; background:white; padding:2px; border:1px solid black;"></div>
<script>
// Update position on mouse move
document.onmousemove = function(e) {
var clock = document.getElementById("cursorClock");
clock.style.left = (e.pageX + 15) + "px"; // Offset by 15px
clock.style.top = (e.pageY + 15) + "px";
}
// Update time every second
setInterval(function() {
var d = new Date();
document.getElementById("cursorClock").innerHTML = d.toLocaleTimeString();
}, 1000);
</script>Frequently Asked Questions
It can be distracting if the clock obscures links or text. It's best used on portfolio sites or as a 'fun' feature that can be toggled off.
Mobile devices don't have a 'hovering' cursor state, so the clock will only jump to where the user taps. It is generally not recommended for mobile-first designs.
Yes. The clock is just a `div` or `span` positioned absolutely. You can use CSS to change its font, color, background, and opacity.