Живой градиент на фон блока через Granim.js: инициализация один раз после DOM

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

Granim управляет переходами цвета на элементе Canvas. После генерации узла задают размер контейнером родителя, подключают скрипт единым entry для страницы, чтобы не блокировать главный контент.

(function () {
  const holder = document.getElementById('hero-band');
  if (!holder || typeof Granim === 'undefined') return;

  /* eslint-disable no-new */
  new Granim({
    element: holder,
    direction: 'left-right',
    isPausedWhenNotInView: true,
    states: {
      'default-state': {
        gradients: [
          ['#0ea5e9', '#6366f1', '#9333ea'],
          ['#22c55e', '#14b8a6', '#0ea5e9'],
        ],
      },
    },
  });
})();

Держите блок за пределами критического первого экрана, если файл плагина тянется отдельной порцией, либо отложите создание после window.load там, где TTFB уже высокая.

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

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