Как сделать такой ефект следащего кружочка

Question

Увидел на одном сайте такой эффект. Суть в том, что внутри как бы два кружочка двигаются в зависимости от позиции курсора и словно летают по тексту. Очень хотел бы узнать, как сделать такой же эффект в React и что используется для создания такого эффекта.

В идеале яб хотел повторить такой же ефект но не знаю каким образом

Answer 1

Я думаю вы ищете css свойство mix-blend-mode. Из документации:

Определяет режим наложения исходного цвета на фоновый цвет или фоновое изображение.

Т.е. добавить такой эффект можно следующим способом:

Создать блок
Привязать перемещение блока к перемещению мыши
Добавить блоку стиль mix-blend-mode: hue;

Пример: https://codesandbox.io/p/sandbox/circle-in-words-qc57xg

У свойства много значений, выберите которое вам подходит

Answer 2

Более приближённый вариант.

Тут используется background-clip: text.

let bgCircleHalf = (window.innerWidth / 100 * 25) / 2;

window.addEventListener('mousemove', (event) => {
  document.body.style.setProperty('--cursor-x', `${event.pageX - bgCircleHalf}px`);
  document.body.style.setProperty('--cursor-y', `${event.pageY - bgCircleHalf}px`);
})

document.body.addEventListener('mouseleave', () => {
  document.body.style.removeProperty('--cursor-x');
  document.body.style.removeProperty('--cursor-y');
});

window.addEventListener('resize', () => {
  bgCircleHalf = (window.innerWidth / 100 * 25) / 2
});

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #000;
  font-family: -apple-system, system-ui, BlinkMacSystemFont;
  margin: 0;
}

.text {
  background-color: #8970ef;
  background-image: radial-gradient(circle at center center, #f3eba0 calc(70% - 1px), transparent 70%);
  background-repeat: no-repeat;
  background-position: var(--cursor-x, 50%) var(--cursor-y, 50%);
  background-size: 25vw 25vw;
  background-attachment: fixed;
  background-clip: text;
  font-weight: 600;
  font-size: 60px;
  text-align: center;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

<div class="text">Mobile Development <br>& Design Agency</div>

БЛОГ НА HUSL

Как сделать такой ефект следащего кружочка

Ответы (2 шт):