WebGL градиент как у Stripe — без Three.js

Зачем вообще WebGL

Статичный CSS-градиент на лендинге быстро надоедает. У Stripe и у ряда продуктовых сайтов фон «дышит» — мягкое движение цвета создаёт ощущение глубины без перегруза интерфейса. Three.js — мощный инструмент, но для одного полноэкранного пятна света это часто избыточно: лишний вес бандла, сцена, камера, цикл рендера там, где достаточно одного fullscreen quad.

Мы пошли путём «голого» WebGL: один <canvas>, вершинный и фрагментный шейдеры, requestAnimationFrame. Никакой сцены — только прямоугольник на весь viewport и время u_time в uniform для анимации.

Минимальная архитектура

На вершинном шейдере мы выводим clip-space quad; на фрагментном — считаем цвет в UV-координатах. Типичный приём — смешивание нескольких слоёв шума или синусоид от нормализованных координат с низкой частотой, чтобы получить крупные пятна, а не «зерно». Параметры (скорость, насыщенность, контраст) выносим в константы или uniforms, чтобы дизайнер мог подкрутить настройки без переписывания логики.

Важно ограничить pixel ratio: на Retina devicePixelRatio может быть 2–3; если рендерить в полном разрешении без нужды, вы сожжёте батарею на ноутбуках. Мы используем Math.min(devicePixelRatio, 2) и ресайз при изменении окна.

Доступность и UX

Красивый фон не должен мешать читать текст. Мы держим фон ниже по контрасту, чем типографика, и проверяем читаемость в светлой/тёмной теме. Для пользователей с prefers-reduced-motion отключаем анимацию времени и показываем статичный кадр — это делается одной проверкой в JS перед инкрементом u_time.

Итог

Такой градиент — это не магия, а дисциплина: простой пайплайн, осознанный бюджет по пикселям и уважение к motion preferences. На маркетинговом лендинге это даёт «премиальный» вид без тяжёлого стека 3D.

Нужен такой же визуал на вашем сайте? Забронируйте стратегический разбор — обсудим, как вписать эффект в ваш бренд и метрики.