Cortina de Aurora Plus

Sobre este efeito

Um fundo de hero com uma aurora boreal de verdade, em WebGL. Cortinas de luz penduradas no céu, com a base ondulando como um tecido; raios verticais finos cintilam e correm ao longo da cortina, e um pulso de brilho passa por ela. A cor sobe do verde, na base, pro magenta, no alto. Atrás, um céu com estrelas que piscam; embaixo, a silhueta de uma serra que dá a escala. O cursor ou o dedo acende a cortina e puxa a base dela, e atrás do texto um véu segura o brilho pra ele continuar legível. Botão de pausa, parado com a preferência de menos movimento e nada desenhado fora da tela. Cores, altura da cortina, ondulação, raios, estrelas, serra, reação ao cursor e resolução ajustáveis. Sem biblioteca.

Ficha

Categoria

Fundo

Onde combina

topo (hero), fundo

Alcance

Área: vive dentro de um bloco da página.

Plano

Incluso no Plus (R$ 19,90/mês) e no Ultra (R$ 39,90/mês).

Peso

7,6 KB de código comprimido. Sem biblioteca externa.

No celular

Leve: usa 8% do processador de um celular intermediário enquanto anima.

Placa de vídeo

Desenha com a placa de vídeo; em celular muito simples a fluidez depende dela.

Na loja desde

30/09/2026

Como colocar no seu site

1. Criando o site com IA (Claude Code, Codex e parecidas): baixe o kit, extraia na pasta do projeto e cole o pedido pronto que a loja entrega. Não precisa saber programar.
2. Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
3. Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-cortina-de-aurora.

Assuntos

• aurora
• aurora boreal
• webgl
• shader
• fundo
• background
• hero
• céu
• estrelas
• luz
• noite
• gradiente