← Biblioteca de Componentes

Particle Galaxy

Galaxia espiral generativa de ~50.000 partículas. El giro y el vaivén de los brazos se calculan por completo en el vertex shader.

Three.jsPointsGLSLGenerativo
Vista previa — interactivo
Data & AI

Explora el
universo de tus datos

Visualizaciones que convierten millones de puntos en historias claras, rápidas y memorables.

Mueve el cursor para orbitar la cámara

Características

  • ~52.000 partículas en escritorio, ~22.000 en móvil
  • Giro en GPU con un vaivén diferencial acotado: los brazos nunca se enrollan
  • 4 brazos espirales con dispersión exponencial
  • Gradiente de color por radio: ámbar → violeta → cian
  • Blending aditivo + núcleo luminoso tipo sprite
  • Cámara con parallax suave que sigue al cursor

Uso

import ParticleGalaxy from "@/components/ParticleGalaxy";

// Copia también la carpeta components/three (escena + utilidades).
// Requiere: npm i three

<section style={{ position: "relative", height: "100vh" }}>
  <ParticleGalaxy />
  <div style={{ position: "relative", zIndex: 2 }}>
    <h1>Tu contenido</h1>
  </div>
</section>