Quatro motores de fundo prontos para o Hero das suas LPs — rede de conexões, malha neural, partículas e orbes de gradiente. Todos reagem ao mouse, respeitam prefers-reduced-motion e usam um único arquivo JS. Cole e funciona.
<!-- 1. Inclua o motor (uma vez, antes do </body>) --> <script src="hero-backgrounds.js"></script> <!-- 2. Coloque o canvas no seu hero. data-hero define o tipo. --> <canvas data-hero="network" data-purple="#7427D4" data-accent="#C75317"></canvas>
<section class="hero" style="position:relative;overflow:hidden"> <canvas data-hero="network" style="position:absolute;inset:0;width:100%;height:100%"></canvas> <div style="position:relative;z-index:2"> <!-- headline, CTA, etc --> </div> </section> <script src="hero-backgrounds.js"></script>
// Pontos flutuam, ligam-se entre si quando próximos. // Perto do cursor viram laranja e conectam-se a ele. // Arquivo completo: hero-backgrounds.js (motor 'network') // Parâmetros no <canvas>: // data-hero="network" · tipo // data-purple="#7427D4" · cor base dos nós/linhas // data-accent="#C75317" · cor perto do cursor
<canvas data-hero="neural" data-purple="#5C18B8" data-accent="#C75317"></canvas>
Malha mais densa que a rede (links mais longos). Ideal para heros de PRODUTO / tecnologia / IA. Funciona bem sobre fundo --e-bg-app (off-white). Evite sobre cream puro: pouca densidade visual.
<canvas data-hero="particles" data-purple="#7427D4" data-accent="#C75317"></canvas>
As partículas são AFASTADAS pelo cursor (repulsão). Cria sensação de presença física no espaço. Sem linhas — mais limpo e leve que a rede. Ótimo para manifestos e dobras emocionais.
<canvas data-hero="orbs" data-purple="#7427D4" data-accent="#C75317"></canvas>
Manchas de gradiente que flutuam e seguem o cursor de leve (composite 'lighter' — cores somam). O mais discreto: bom atrás de muito texto. Substitui gradientes estáticos sem custo de leitura.
