← Biblioteca de Componentes

Liquid Orb

Esfera líquida iridiscente renderizada con Three.js. La superficie se deforma con ruido simplex 3D en el vertex shader y reacciona a la velocidad del cursor.

Three.jsWebGLGLSLShaders
Vista previa — interactivo
Creative Developer

Ideas que
toman forma

Experiencias web inmersivas con 3D en tiempo real, shaders y animación que convierten visitas en recuerdos.

Mueve el cursor rápido para agitar la esfera

Características

  • Icosaedro de alta resolución (≈100k triángulos) desplazado en GPU
  • Ruido simplex 3D en dos octavas, animado en el tiempo
  • Normales recalculadas por diferencias finitas para iluminación correcta
  • Color iridiscente con paleta coseno + fresnel en el borde
  • Halo aditivo y polvo flotante con parallax al cursor
  • Pausa automática fuera de pantalla y soporte de prefers-reduced-motion

Uso

import LiquidOrb from "@/components/LiquidOrb";

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

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