← Biblioteca de Componentes

Liquid Metal

Gotas de cromo líquido que se fusionan entre sí, renderizadas con raymarching en un solo quad. Reflejos de estudio y película iridiscente. Una gota sigue al cursor.

Three.jsRaymarchingSDFGLSL
Vista previa — interactivo
Future Ready

Ideas fluidas,
resultados sólidos

Producto digital premium: ingeniería sólida con una estética que se siente del futuro.

Mueve el cursor: una gota te sigue

Características

  • Raymarching de funciones de distancia (SDF) en el fragment shader
  • 7 esferas unidas con smooth min para el efecto de fusión
  • Entorno de estudio procedural con softboxes para reflejos de cromo
  • Película iridiscente según el ángulo de visión
  • Pixel ratio limitado a 1.25 para mantener 60 fps
  • Fondo transparente: se combina con cualquier degradado CSS

Uso

import LiquidMetal from "@/components/LiquidMetal";

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

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