Tubos de Neon Ultra

Sobre este efeito

Seção escura com um feixe de tubos de neon coloridos, torcidos como um cabo, que segue o mouse (ou o dedo) desenhando curvas. A cabeça do feixe persegue o ponteiro com um atraso curto e cada tubo deixa o próprio rastro, que encolhe quando o cursor para. Os tubos têm volume: borda na cor, miolo claro e um fio de luz no meio; os que ficam atrás no cabo afinam e apagam, os da frente engrossam, e o feixe joga luz no fundo em volta dele. Sem ninguém mexendo, ele passeia sozinho num laço em volta do conteúdo, e o texto continua legível. Clique no fundo passa as cores de um tubo pro vizinho numa troca suave. No celular, arrastar de lado puxa o feixe e arrastar pra cima ou pra baixo rola a página. O movimento é igual em telas de 60 e de 120 Hz; fora da tela, com a aba escondida ou pausado, não desenha nada. Tem botão de pausa. Com a preferência de menos movimento, o feixe fica parado numa pose. Quatro cores, quantidade de tubos, grossura, abertura do feixe, comprimento do rastro, torção, brilho, passeio ligado ou não, velocidade, tempo pra voltar a passear e troca de cores no clique ajustáveis. Sem biblioteca.

Ficha

Categoria

Cursor

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

9,1 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-tubos-de-neon.

Assuntos

• cursor
• mouse
• neon
• tubos
• luz
• rastro
• colorido
• fundo
• hero
• toque
• canvas