Mouse Follow Generator

Preview

Move your mouse here

Generated HTML

1<div class="mouse-follower"></div>

Generated CSS

1
2    .mouse-follower {
3      width: 20px;
4      height: 20px;
5      background-color: #3b82f6;
6      opacity: 0.5;
7      position: fixed;
8      pointer-events: none;
9      z-index: 9999;
10      border-radius: 50%;
11    }
12    

Generated JavaScript

1
2const follower = document.querySelector('.mouse-follower');
3let mouseX = 0, mouseY = 0;
4let followerX = 0, followerY = 0;
5
6document.addEventListener('mousemove', (e) => {
7  mouseX = e.clientX;
8  mouseY = e.clientY;
9});
10
11function updatePosition() {
12  followerX += (mouseX - followerX) * 0.1;
13  followerY += (mouseY - followerY) * 0.1;
14  follower.style.transform = `translate(${followerX - 10}px, ${followerY - 10}px)`;
15  requestAnimationFrame(updatePosition);
16}
17
18updatePosition();
19