← Biblioteca de Componentes

Particle Morph

16.000 partículas que se transforman entre esfera, nudo toroidal, doble hélice de ADN y planeta con anillo. El cursor las aparta a su paso.

Three.jsMorphingGLSLInteractivo
Vista previa — interactivo
Innovación

Tecnología que
se transforma contigo

Soluciones que evolucionan con tu negocio: de la idea al prototipo y del prototipo a escala.

Pasa el cursor sobre las partículas

Características

  • 4 formas precalculadas como atributos y mezcladas en el shader
  • Transición con easing cúbico y turbulencia de ruido a mitad de camino
  • Repulsión por distancia al rayo del cursor (afecta toda la profundidad)
  • Gradiente rosa → índigo → cian según la altura
  • Parpadeo individual por partícula y blending aditivo
  • Rotación con parallax y adaptación automática a móvil

Uso

import ParticleMorph from "@/components/ParticleMorph";

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

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