COMP-BACKGROUND-008 / backgrounds

Aurora Background

Fundo Aurora oficial com gradientes atmosféricos animados, blur e máscara radial configurável.

PIVUS / ATMOSPHERE SYSTEM

Make room
for the signal.

Ambient light gives a first impression enough space to land.

Explore the system ↗

Compatibilidade

Astro: react-island
React: yes
Next: yes

Fonte

Aceternity UI — Aurora Background
Documentação oficial ↗

Styles compatíveis

tech-modern, minimal-warm, editorial, corporate-clean

Patterns compatíveis

heroes, cta, about

Metadados

Implementação: react-island
Motion: ambient expressive — 60s linear infinite aurora animation with blur
Performance: light — CSS gradients, blur and compositing
Tags: aurora, background, gradient, animated, blur, hero, atmosphere
Dependências: react, Tailwind CSS v4

Quando usar

Hero, landing page ou CTA que precisa atmosfera, profundidade e movimento contínuo sem canvas ou asset externo.

Quando evitar

Contextos que exigem fundo estático, zero CSS filter ou legibilidade máxima sobre contraste completamente previsível.

Notas

Código oficial preservado em components/ui/aurora-background.tsx. Preview adiciona somente composição contextual via children e moldura externa; props, gradientes, máscara radial, blur, blend mode, timing de 60s e animação permanecem oficiais. Astro: react-island com client:load ou client:visible; não Astro Native.