← Biblioteca de Componentes

Warp Tunnel

Salto al hiperespacio: miles de estelas de luz instanciadas que vuelan hacia la cámara. Mantén pulsado el banner para activar la velocidad warp.

Three.jsInstancingGLSLInteractivo
Vista previa — interactivo
Next Level

Acelera tu
producto digital

Llevamos tu idea del concepto a producción a la velocidad de la luz, sin sacrificar calidad.

Mantén pulsado para la velocidad warp

Características

  • ~2.800 estelas en un único draw call (InstancedBufferGeometry)
  • Posición calculada en GPU: cero actualizaciones de buffers por frame
  • Longitud de la estela y FOV dependen de la velocidad
  • Pulsar el banner acelera de 10 a 55 unidades/s con easing
  • Punto de fuga con doble glow aditivo y giro lento del túnel
  • Paleta cian, índigo y rosa con desvanecido en profundidad

Uso

import WarpTunnel from "@/components/WarpTunnel";

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

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