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-стеку.
Потрібен такий самий візуал на вашому сайті? Забронюйте стратегічний розбір — обговоримо, як вписати ефект у ваш бренд і метрики.
