← Biblioteca de Componentes

Particle Constellation

Partículas flotantes que se conectan con líneas de constelación. Reaccionan al cursor con repulsión suave y pulso de brillo individual.

Vista previa — mueve el cursor dentro
Fullstack Developer & AI

Juan Camilo
Salazar Restrepo

Desarrollo aplicaciones web y soluciones con inteligencia artificial que impulsan negocios al siguiente nivel.

Sobre el componente

  • Canvas 2D con requestAnimationFrame
  • 110 partículas con colores: cyan, violeta, verde, magenta, ámbar
  • Líneas de conexión con degradado entre colores vecinos
  • Repulsión suave al cursor dentro de radio de 130px
  • Pulso de brillo individual con Math.sin
  • Glow radial por partícula con createRadialGradient
  • Responsive via ResizeObserver

Uso

import ParticleConstellation from "@/components/ParticleConstellation";

// El padre debe tener position: relative
<div style={{ position: "relative", height: "100vh",
  background: "#050714" }}>

  <ParticleConstellation />

  {/* Contenido con z-index > 1 */}
  <div style={{ position: "relative", zIndex: 2 }}>
    <h1>Tu título</h1>
  </div>
</div>

Personalización

  • PARTICLE_COUNT — cantidad de partículas (default: 110)
  • CONNECTION_DIST — distancia máxima de conexión (140px)
  • MOUSE_RADIUS — radio de repulsión del cursor (130px)
  • COLORS — array de colores hex de las partículas