← Biblioteca de Componentes

Silk Waves

Tela satinada en tonos pastel que ondula con olas sinusoidales y ruido. Iluminación con brillo especular tipo seda. El cursor levanta la tela.

Three.jsGLSLLight themeInteractivo
Vista previa — interactivo
Diseño premium

Elegancia en
cada detalle

Marcas que se sienten suaves, modernas y cuidadas desde el primer scroll.

Pasa el cursor sobre la tela

Características

  • Plano de 260×220 segmentos desplazado en el vertex shader
  • Normales por diferencias finitas para un brillo satinado realista
  • Degradado de 4 colores pastel que fluye con la altura
  • Ondulación y ondas concéntricas bajo el cursor
  • Versión clara: ideal para landings luminosas y e-commerce
  • Menos segmentos en móvil para mantener 60 fps

Uso

import SilkWaves from "@/components/SilkWaves";

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

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