Северное сияние

Дышащие эллипсы света с бесконечным hue-rotate — весь спектр по кругу за 14 секунд.

Просто смотрите.

северное сияние

Код

<section class="aurora">
  <div class="lights"><i class="g"></i><i class="b"></i><i class="v"></i></div>
  <h1>Контент</h1>
</section>

<style>
.aurora { position: relative; background: #060913; overflow: hidden; }
.aurora h1 { position: relative; mix-blend-mode: screen; }
.lights { position: absolute; inset: -20%;
  filter: blur(70px) saturate(1.4);
  animation: hue 14s linear infinite; }     /* весь спектр по кругу */
.lights i { position: absolute; border-radius: 50%;
  animation: drift 12s ease-in-out infinite; }
.g { width: 60vw; height: 34vw; background: #0aff9d; opacity: .5; }
.b { width: 52vw; height: 30vw; background: #4d6bff; opacity: .45;
  animation-delay: -4s; animation-direction: reverse; }
@keyframes drift {
  0%,100% { transform: translate(0,0) rotate(-12deg) scaleY(1); }
  50% { transform: translate(4vw,-3vh) rotate(6deg) scaleY(1.25); } }
@keyframes hue {
  to { filter: blur(70px) saturate(1.4) hue-rotate(360deg); } }
</style>

Промпт для ИИ

Сделай фон «северное сияние»: очень тёмная секция, внутри контейнер (inset -20%) с filter: blur(70px) saturate(1.4) и бесконечным hue-rotate(360deg) за 14s — весь спектр по кругу; в нём 3 вытянутых эллипса (зелёный/синий/фиолетовый, opacity .4-.5), каждый дрейфует своей анимацией translate + rotate + scaleY (сияние «дышит» по вертикали) с разными фазами. Заголовку поверх — mix-blend-mode: screen. ВАЖНО: hue-rotate на родителе пятен, а не на каждом — дешевле.