Как сделать Particles курсор для всей страницы?

Этот скрипт позволит тебе сделать эффект распадающегося на точки следа от курсора на всей странице или на отдельных блоках. Пример работы модификации внизу cтраницы

1 мин.

Курсор

Обновление от 31.12.23 - В слайдер были добавлены новые поля, а также recid теперь нужно писать без приставки "#rec", поэтому если вдруг что-то не работает, то см. видео, а также текстовую инструкцию ниже↓

!

three.js

1. Убери фон у блоков, где должен быть виден Particles курсор

2. Задай количество частиц в хвосте

3. Укажи цвета частиц в хвосте

4. Укажи цвет ответвлений в хвосте

5. Задай размер хвоста

6. Задай силу изгиба хвоста

7. Укажи размер частиц в хвосте

7. Скопируй код и вставь в блок т123

Инструкция

Важно!

Не ставь чрезмерно большое значение количества частиц в хвосте, т.к. в некоторых случаях это может нагрузить видеокарту и быстродействие модификации может быть снижено

(Развернуть)

Скопировать код

<!--Библиотека VORON--><!--Курсор https://voron-dev.ru/particles_cursor-->
    <script type="module">
    import { particlesCursor } from 'https://cdn.jsdelivr.net/npm/threejs-toys@0.0.8/+esm'
const pc = particlesCursor({
  el: document.getElementsByTagName('body')[0],
  gpgpuSize: 512, // Общее количество частиц в хвосте !Внимание! Большое число частиц к отрисовке влияет на производительность!
  colors: ['#00ff00', '#0000ff', '#0000ff'], // цвета в хвосте курсора
  color: '#FF10CA', // Цвет ответвлений хвоста курсора
  coordScale: 1.5, // Масштаб хвоста
  noiseIntensity: 0.0006, // Интенсивность изгибания хвоста
  noiseTimeCoef: 0.0001, // Коэфициент времени на изгибание хвоста
  pointSize: 1.5, // Размер частиц в хвосте
  pointDecay: 0.0025,
  sleepRadiusX: 250,
  sleepRadiusY: 250,
  sleepTimeCoefX: 0.001,
  sleepTimeCoefY: 0.002
})
const resizeObserver = new ResizeObserver(entries => 
  document.querySelector('canvas').style.height = document.body.scrollHeight + 'px'
)
resizeObserver.observe(document.body)
</script>
<style>
    canvas[data-engine="three.js r140"] {
        position: absolute;
        z-index: -1;
        top: 0px;
        left: 0px;
    }
</style>

Пример работы модификации

Наведи курсор на этот блок, чтобы увидеть эффект неонового следа.
Кликни, чтобы сгенерировать курор по случайным значениям