Pulsos nas Trilhas Plus

Faixas de luz em degradê correndo por trilhas SVG de ponta a ponta, cada trilha no seu tempo.

Sobre este efeito

Trilhas finas desenhadas em SVG com uma faixa de luz em degradê (frente clara, meio laranja, cauda que some) correndo cada trilha de ponta a ponta; ela some, espera e passa de novo, cada trilha no seu tempo, e bolinhas marcam as pontas. Serve pra mostrar coisas chegando num ponto: canais, integrações, dados. Faixa de 2 px com ponta arredondada sobre trilha de 1 px, 2 s de ponta a ponta em ritmo reto e 2 s escondida; o desenho das trilhas é seu. Funciona com qualquer caminho, reto ou curvo, no sentido em que foi desenhado; atraso e bolinhas por trilha. Tempo, pausa, comprimento e espessura da faixa, três cores, cor da trilha e das bolinhas ajustáveis. Para fora da tela, com a preferência de menos movimento as faixas ficam paradas. Sem biblioteca.

Ficha

Categoria: Luzes
Onde combina: recursos, 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: 4,4 KB de código comprimido. Sem biblioteca externa.
No celular: Leve: usa 14% do processador de um celular intermediário enquanto anima.
Na loja desde: 14/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-pulsos-nas-trilhas.

Assuntos

luz
pulso
trilha
svg
degradê
conexão
integração
circuito
loop
js