RAX7

onmouseover -> onmouseenter
onmouseout -> onmouseleave
https://learn.javascript.ru/mousemove-mouseover-mo...

Основная причина тормозов - это метод getPointAtLength, он съедает очень много времени при инициализации библиотеки. Можешь попробовать форкнуть либу и выпилить из нее метод _getPathPoints и поправить все зависящие от него методы. Это должно помочь.
Более простой способ использовать другую библиотеку, например animejs.

function animateMarquee(el, duration) {
  const innerEl = el.querySelector('.marquee__inner');
  const innerWidth = innerEl.offsetWidth;
  const cloneEl = innerEl.cloneNode(true);
  el.appendChild(cloneEl);

  let start = 0;
  let rafId = null;
  let progressElapsed = 0;
  let progress = 0;

  function step(now) {
    progress = progressElapsed + (now - start) % duration / duration;
    const translateX = innerWidth * progress;

    innerEl.style.transform = `translate3d(-${translateX}px, 0 , 0)`;
    cloneEl.style.transform = `translate3d(-${translateX}px, 0 , 0)`;
    rafId = requestAnimationFrame(step);
  }
  
  function play() {
    if (rafId) return;
    progressElapsed = progress;
    start = performance.now();
    rafId = requestAnimationFrame(step);
  }
  
  function pause() {
    cancelAnimationFrame(rafId);
    rafId = null;
  }

  play();
  return { play, pause };
}

const marquee1 = document.querySelector('#marquee1');
const playback = animateMarquee(marquee1, 15000);

marquee1.addEventListener('mouseenter', () => playback.pause());
marquee1.addEventListener('mouseleave', () => playback.play());

Это баг самой библиотеки, не получается у нее нормально распарсить значения filter: drop-shadow.
Исправить можно сделав анимацию в объект с последующим обновлением свойств самого элемента.

Библиотека RainyDay.js достаточно старая, поэтому придется делать вот таким костыльным способом.

https://vincentgarreau.com/particles.js/

Можно сделать простой эффект на css

Можно более сложный на WebGl

return this.getValue(objectValues[valueArray[0]], valueArray.slice(1).join('.'), defaultV);
//                                                                                ^^^^^^

расстояние от боков карточки до боков экрана может отличаться

Если карточка лежит в контейнере-центровщике, то расстояние до краев вьюпорта можно посчитать как 50vw - 50%. В этом случае нужно еще учесть ширину скроллбара, которую придется определять в js.

// табы
const tabsBtn = [...document.querySelectorAll(".widget-chat__tabs__btn")];

if (xDiff > 0) {
  /* left swipe */
  const currIdx = tabsBtn.findIndex((el) => el.classList.contains("active"));
  const prevIdx = currIdx - 1;
  if (prevIdx > -1) {
    tabsBtn[prevIdx].click();
  }
} else {
  /* right swipe */
  const currIdx = tabsBtn.findIndex((el) => el.classList.contains("active"));
  const nextIdx = currIdx + 1;
  if (nextIdx < tabsBtn.length) {
    tabsBtn[nextIdx].click();
  }
}

На рабочей демке размеры картинок берутся и src, а на не рабочей нужно дождаться загрузки картинки, перед тем как брать размеры из image.naturalHeight. Плюс ко всему document.querySelector выбирает первый попавшийся элемент, а не тот который бы создан последним