Onda Prismática Plus

Sobre este efeito

Seção com uma linha de luz que ondula devagar, sempre na mesma altura. No meio ela é branca; nas pontas as três cores que formam o branco se separam, vermelho em cima, verde no meio e azul embaixo, como luz passando por um prisma. Chegando com o mouse (ou o dedo) perto dela, a linha se curva até o cursor e ali as cores se abrem e a luz acende um pouco; quando o cursor sai, ela volta ao lugar devagar. O brilho fica perto da linha: o resto do fundo continua escuro e o texto por cima continua legível. Só a faixa em volta da linha é desenhada, não a tela inteira; sem ninguém mexendo desenha a 30 quadros por segundo, e fora da tela, com a aba escondida ou com o botão de pausa, não desenha. A onda volta à mesma forma a cada volta, e a velocidade é a mesma em telas de 60 e de 120 Hz. Com a preferência de menos movimento, a linha aparece parada. Altura da linha, tamanho da onda, quantas ondas cabem, tempo de uma volta, grossura, brilho, abertura das cores, apagado nas pontas, reação e alcance do cursor, tempo de volta e as três cores ajustáveis. WebGL, sem biblioteca; sem WebGL fica uma linha parada feita em CSS.

Ficha

Categoria

Fundo

Onde combina

topo (hero), chamada pra ação, 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

8,4 KB de código comprimido. Sem biblioteca externa.

No celular

Leve: usa 9% 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

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-onda-prismatica.

Assuntos

• luz
• luzes
• linha
• onda
• prisma
• arco-íris
• neon
• hero
• fundo
• cursor
• webgl