Aurora-mesh: тонкий фон, который не превращает сайт в SaaS-лендинг

Когда я смотрю на сайты вроде Vercel, Linear или Resend, в фоне у них почти всегда живёт какой-то лёгкий gradient mesh — мягкие цветовые пятна, которые «дышат». На фоне типографики это создаёт ощущение глубины и «дороговизны». Захотелось сделать так же на gmasich.ru.

Первая мысль — взять любой готовый WebGL-сниппет с CodePen, прикрутить за hero. Стоп.

Почему это плохая идея

Мой сайт сделан в editorial-стиле «CTO Document» — крупный serif (Source Serif 4), монохромная палитра, секционные §01–§05-маркеры, asymmetric grids, hairline-рулеры. Главная ценность этой эстетики — что она не похожа на SaaS-лендинг. Любой яркий blob по центру моментально превратит сайт в один из тысячи Vercel-клонов.

И есть второе соображение — от Эмиля Ковальски (Sonner, Vaul):

Hero видят при каждом заходе на сайт. Любая яркая фоновая анимация = шум при каждом visit'е.

Решение: aurora-mesh с feathered fade-out

Что я выбрал в итоге:

• Три radial-градиента с blur(90px) — три цветовых blob'а
• В светлой теме: тёплая палитра (peach/sky/rose), opacity 0.45
• В тёмной теме: холодная палитра (blue/violet/cyan), opacity 0.4
• Очень медленный 38s transform: translate3d — ≤2% сдвиг, почти подпороговый
• position: fixed + mask-image: linear-gradient(to bottom, black 55%, transparent 95%) — растворяется ниже фолда, не обрывается на границе секций

Ключевая деталь — маска. Без неё градиент обрывался горизонтальной линией на границе Hero/About:

.bg-aurora {
  position: fixed;
  inset: -10% -10% 0 -10%;
  height: 130vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
  filter: blur(90px) saturate(1.1);
  background:
    radial-gradient(40% 50% at 22% 30%, hsla(28, 90%, 70%, 0.35), transparent 70%),
    radial-gradient(35% 45% at 78% 65%, hsla(200, 70%, 70%, 0.25), transparent 70%),
    radial-gradient(30% 40% at 55% 85%, hsla(340, 60%, 75%, 0.2), transparent 70%);
  mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 95%);
  animation: aurora-drift 38s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

И обязательно — prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  .bg-aurora { animation: none; }
}

Что я понял

1. Не размещай в Hero — aurora должна жить за всем <main>, иначе обрывается на границе секции (даже при overflow: hidden, потому что blur создаёт оптическое гало за пределами bounding box).
2. Не кради чужие палитры — Vercel-blue работает у Vercel, потому что у них вся айдентика синяя. На монохромном editorial-сайте холодные пастели лучше тёплых.
3. Маска важнее цвета — без mask-image обрыв виден всегда, какие бы цвета и blur ты ни поставил.

Это не WebGL, не Three.js, не shader. Это три CSS-градиента и transform: translate3d. Работает на любом устройстве, не тратит CPU после первой анимации, не требует JS.

Иногда «дорого» — это четыре строчки CSS, поставленные на правильное место.