← Biblioteca de Componentes

Dot Wave Field

Campo de miles de puntos en perspectiva que ondula como un océano digital. El cursor levanta una colina y cada clic lanza una onda expansiva.

Three.jsPointsGLSLInteractivo
Vista previa — interactivo
Real-time Data

Datos que
fluyen solos

Dashboards y plataformas que reaccionan al instante a cada evento de tu negocio.

Haz clic para lanzar una onda

Características

  • 26.000 puntos (200×130) desplazados en el vertex shader
  • Olas sinusoidales + ruido simplex para un movimiento orgánico
  • Hasta 6 ondas expansivas simultáneas en un array de uniform vec4
  • Clic: onda en el punto exacto del cursor (raycast al plano)
  • Color y tamaño según la altura, desvanecido en profundidad
  • Ondas automáticas para que el banner nunca se quede quieto

Uso

import DotWaveField from "@/components/DotWaveField";

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

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