Cursor Follower Effect bằng CSS và JavaScript

Vấn đề là nhiều bản ngoài kia làm sai: follower bám sát chuột như hình dán, chạy giật, hoặc lag FPS khi di chuyển nhanh. Nguyên nhân thường nằm ở cách cập nhật vị trí và easing không đúng.

Bài này làm lại Cursor Follower theo hướng chuẩn production: chạy mượt toàn trang, có độ trễ tự nhiên, không phá UX và không gây nặng trang.

Không thư viện. Không canvas. Không hack.

Tư duy đúng khi làm Cursor Follower toàn trang

Cursor follower không phải là con trỏ thay thế, mà là lớp phản hồi thị giác.

Cách làm đúng:

• Chuột thật vẫn giữ nguyên
• Follower đuổi theo có quán tính
• Luôn nhẹ hơn, chậm hơn chuột

Nếu follower đi trùng chuột 100%, hiệu ứng sẽ trông giả ngay.

HTML: Không cần viết gì

Cursor follower toàn trang không cần HTML thủ công.
JavaScript sẽ tự tạo phần tử follower và gắn vào body.

CSS: Định nghĩa follower toàn trang

.cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(59,130,246,0.45);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  mix-blend-mode: difference;
  transition: opacity 0.3s ease;
}

• pointer-events: none để không chặn click
• mix-blend-mode giúp follower tự hòa màu với nền

JavaScript: Theo chuột bằng easing

const follower = document.createElement('div');
follower.className = 'cursor-follower';
document.body.appendChild(follower);

let mouseX = 0;
let mouseY = 0;
let currentX = 0;
let currentY = 0;

document.addEventListener('mousemove', e => {
  mouseX = e.clientX;
  mouseY = e.clientY;
});

function animate() {
  currentX += (mouseX - currentX) * 0.15;
  currentY += (mouseY - currentY) * 0.15;

  follower.style.transform =
    `translate(${currentX}px, ${currentY}px)`;

  requestAnimationFrame(animate);
}

animate();

Đây là lerp animation – bí quyết để follower luôn mượt.

Ẩn follower khi rời khỏi trình duyệt

document.addEventListener('mouseleave', () => {
  follower.style.opacity = '0';
});

document.addEventListener('mouseenter', () => {
  follower.style.opacity = '1';
});

Chi tiết nhỏ nhưng giúp trải nghiệm sạch và chuyên nghiệp hơn.

Nâng cấp: Phản ứng khi hover link / button

const hoverTargets = document.querySelectorAll('a, button');

hoverTargets.forEach(el => {
  el.addEventListener('mouseenter', () => {
    follower.style.transform += ' scale(1.8)';
  });

  el.addEventListener('mouseleave', () => {
    follower.style.transform =
      `translate(${currentX}px, ${currentY}px) scale(1)`;
  });
});

Follower phóng to nhẹ khi hover CTA → cảm giác “đã tay” hơn rất nhiều.

Vì sao cursor follower này chạy mượt

• Dùng requestAnimationFrame
• Không tạo object mới mỗi frame
• Chỉ animate transform
• Easing tự nhiên, không jump

Toàn bộ hiệu ứng chạy trên GPU, không ăn layout.

Điều chỉnh cho dự án thật

• Web agency: follower to, delay cao
• Landing page: follower nhỏ, subtle
• Mobile: tắt hoàn toàn bằng media query

Cursor follower chỉ dành cho desktop.

Lưu ý quan trọng

• Không che text nhỏ
• Không dùng trên form phức tạp
• Nên cho phép tắt nếu người dùng cần

Kết luận

Cursor Follower Effect đẹp không nằm ở hình dạng, mà nằm ở nhịp chuyển động. Khi follower đuổi theo chuột với độ trễ vừa đủ, giao diện sẽ trông sống động, cao cấp mà không gây khó chịu.

Ít nhưng đúng — đó là cursor follower dùng được trong sản phẩm thật.