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