Декоративный пузырящийся фон с bubbly-bg: отделяем канвас от интерактивного содержания

Разбор задачи

Скрипт рисуется на canvas ниже текстового блока или на обёртке hero. Вертикально прокрываемый слой задают position:absolute с inset:0, а интерактивные элементы оставляют с большим z-index.

document.addEventListener('DOMContentLoaded', () => {
  const pane = document.getElementById('promo-shell');
  if (!pane || typeof bubbly === 'undefined') return;

  bubbly({
    blur: 2,
    colorStart: '#0ea5e9',
    colorStop: '#1d4ed8',
    bubbleFunc: () => `hsla(${Math.random() * 40 + 210}, 70%, 60%, .14)`,
    bubbles: 38,
    compose: pane,
    animate: true,
    shadowColor: '#0f172a',
    shadowBlur: 2,
  });
});

На маломощных устройствах отключайте bubbly через matchMedia или сразу ставьте prefers-reduced-motion, чтобы экономить аккумулятор.

Замечания перед выкладкой

Вносите правки только через среду с бэкапом и понятным diff. Если сниппет идёт в шаблон на Битрикс, проверьте конфликт с уже подключённым jQuery/UI и включите «отложенный» запуск там, где длинный главный файл может обрезать DOMContentLoaded.