Espectro em Degraus Ultra

Rolando, uma luz em degraus sobe do pé da tela até quase o topo, num degradê do violeta ao dourado, e o texto aparece no meio dela.

Ver na loja e baixar

Sobre este efeito

Seção com título de abertura. Rolando, uma faixa de luz aparece no pé da tela e cresce até quase o topo em degraus, como uma pirâmide de blocos com um degradê só por trás, borrado; no meio dela o texto sai do desfoque. A luz segue a rolagem com um atraso macio e freia ao chegar no alto. Ela fica presa ao pé da tela só enquanto a seção passa: quando a seção acaba, o conteúdo seguinte sobe por cima, sem nada cobrindo a página. A luz passa da borda da tela, então o borrado não clareia as beiradas. Sem biblioteca: CSS e um JS pequeno, que para quando a página está parada. No celular a pirâmide cabe inteira. Com a preferência de menos movimento, a luz aparece inteira e parada. Percurso, altura, número de degraus, altura das pontas, curva, desfoque, atraso e seis cores ajustáveis.

Ficha

Categoria: Luzes
Onde combina: topo (hero), transições, fundo
Alcance: Página inteira: depende da rolagem ou do cursor da página toda.
Plano: Exclusivo de quem assina o Ultra (R$ 39,90/mês).
Peso: 4,8 KB de código comprimido. Sem biblioteca externa.
No celular: Leve: usa 8% do processador de um celular intermediário enquanto anima.
Na loja desde: 24/09/2026

Como colocar no seu site

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.
Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-espectro-em-degraus.

Assuntos

luz
luzes
espectro
degradê
degraus
scroll
rolagem
amanhecer
fundo
hero
css