Raio que Rasga Ultra

Sobre este efeito

Seção de abertura com céu escuro onde, de tempos em tempos, um raio cai atrás do conteúdo: um fio fraco desce abrindo caminho e, quando toca o chão, vem o clarão, com uma ou duas re-descargas curtas logo em seguida, como num raio real. O raio tem galhos, que se apagam antes do tronco, e o brilho que sobra some devagar. No clarão, o céu clareia a partir do ponto de onde o raio nasce e o horizonte acende junto, sem tirar a leitura do texto. Clicar ou tocar no céu chama um raio naquele ponto; com o mouse em cima, os raios automáticos caem mais perto dele. Nunca passa de 3 clarões em qualquer segundo, nem com cliques em rajada: o raio seguinte espera a vez ou vem com menos re-descargas. Entre um raio e outro não desenha nada, e fora da tela o relógio para. Tem botão de pausa. Com a preferência de menos movimento, aparece um raio parado, sem clarão. Cores do raio e do céu, intervalo, galhos, grossura, força do clarão, re-descargas, puxada do mouse, faixa, altura do toque e desenho da sequência ajustáveis. Sem biblioteca.

Ficha

Categoria

Fundo

Onde combina

topo (hero), fundo, chamada pra ação

Alcance

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

Plano

Exclusivo de quem assina o Ultra (R$ 39,90/mês).

Peso

10 KB de código comprimido. Sem biblioteca externa.

No celular

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

Na loja desde

25/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-raio-que-rasga.

Assuntos

• luz
• luzes
• raio
• tempestade
• relâmpago
• clarão
• elétrico
• hero
• fundo
• clique
• canvas