Hiệu ứng rọi đèn theo chuột cho chữ bằng CSS Mask (Spotlight Text Effect)

Trong bài viết này, chúng ta sẽ xây dựng hiệu ứng rọi đèn cho chữ chỉ với CSS Mask + JavaScript thuần, hoạt động mượt, dễ tùy chỉnh và tương thích tốt với trình duyệt hiện đại.

Demo hiệu ứng

HTML

Phần HTML đóng vai trò tạo cấu trúc hiển thị cho hiệu ứng spotlight. Chúng ta sử dụng một thẻ bao ngoài được bọc trong UIkit card để giữ layout gọn gàng, dễ tái sử dụng trong bài viết hoặc landing page. Bên trong, phần tử chứa chữ được đặt thuộc tính data-text để phục vụ cho lớp chữ sáng được tạo bằng pseudo-element trong CSS.

<div class="spotlight-card uk-card uk-card-default uk-card-body uk-text-center">
  <div class="spotlight-wrap">
    <span class="spotlight-text" data-text="Init HTML">Init HTML</span>
  </div>
</div>

CSS: Tạo lớp chữ và vùng ánh sáng

Chúng ta sử dụng hai lớp chữ chồng lên nhau: một lớp chữ tối hiển thị mặc định, và một lớp chữ sáng được che bởi radial-gradient mask. Tâm của gradient sẽ được điều khiển bằng biến CSS.

.spotlight-card {
  background: radial-gradient(circle at top, #2a145f, #0b0620);
}

.spotlight-wrap {
  position: relative;
}

.spotlight-text {
  display: block;
  position: relative;
  font-size: 120px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.15);
  cursor: default;
}

.spotlight-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #e6e6ff;

  mask-image: radial-gradient(
    circle 120px at var(--x, 50%) var(--y, 50%),
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.9) 35%,
    rgba(255,255,255,0) 70%
  );

  -webkit-mask-image: radial-gradient(
    circle 120px at var(--x, 50%) var(--y, 50%),
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.9) 35%,
    rgba(255,255,255,0) 70%
  );

  pointer-events: none;
}

JavaScript: Theo dõi vị trí chuột

JavaScript có nhiệm vụ lấy tọa độ con trỏ chuột và chuyển đổi sang phần trăm để cập nhật biến CSS. Chúng ta cố tình đẩy tâm ánh sáng lên trên một chút để tạo cảm giác ánh đèn đang rọi từ phía trên xuống.

const text = document.querySelector('.spotlight-text');

document.addEventListener('mousemove', (e) => {
  const rect = text.getBoundingClientRect();

  const x = ((e.clientX - rect.left) / rect.width) * 100;
  const y = ((e.clientY - rect.top) / rect.height) * 100 - 10;

  text.style.setProperty('--x', `${x}%`);
  text.style.setProperty('--y', `${y}%`);
});

Tùy chỉnh và mở rộng

Bạn có thể dễ dàng tinh chỉnh hiệu ứng này theo nhu cầu mà không cần thay đổi cấu trúc chính.

• Tăng kích thước đèn bằng cách tăng bán kính circle
• Làm ánh sáng mềm hơn bằng cách mở rộng vùng chuyển mờ
• Thay đổi màu chữ sáng để phù hợp với thương hiệu
• Kết hợp requestAnimationFrame để tăng độ mượt

Kết luận

Hiệu ứng rọi đèn theo chuột là một giải pháp UI đẹp, nhẹ và dễ triển khai cho các trang web hiện đại. Chỉ với CSS Mask và JavaScript cơ bản, bạn đã có thể tạo ra một trải nghiệm tương tác cao mà không ảnh hưởng đến hiệu năng hay khả năng bảo trì.