← Biblioteca de Componentes

Lava Lamp Banner

Banner hero con fondo animado de lámpara de lava azul, blobs orgánicos y blob interactivo que sigue el cursor.

Vista previa
Fullstack Developer & AI

Juan Camilo
Salazar Restrepo

Desarrollo aplicaciones web y soluciones con inteligencia artificial que impulsan negocios al siguiente nivel.

Sobre el componente

  • Blobs orgánicos animados con CSS keyframes
  • Filtro SVG feGaussianBlur + feColorMatrix para efecto goo
  • Blob interactivo que sigue el cursor con interpolación suave
  • 9 blobs con gradientes azul marino / azul eléctrico
  • 100% CSS — sin librerías de canvas

Uso

import LavaBackground from "@/components/LavaBackground";

// El componente padre debe tener position: relative
<div style={{ position: "relative", height: "100vh" }}>
  <LavaBackground />
  {/* Tu contenido aquí con z-index > 1 */}
  <div style={{ position: "relative", zIndex: 3 }}>
    <h1>Tu título</h1>
  </div>
</div>