← Biblioteca de Componentes

Bubble Field

Burbujas semitransparentes que ascienden con trayectoria sinusoidal. Al pasar el cursor sobre ellas explotan con un pop animado.

Vista previa — pasa el cursor sobre las burbujas
Fullstack Developer & AI

Juan Camilo
Salazar Restrepo

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

Características

  • 55 burbujas con tamaño aleatorio (12–50px radio)
  • Gradiente radial interno con highlight de esfera
  • Trayectoria sinusoidal ascendente
  • Detección de colisión cursor → pop animado
  • Fade-in al aparecer, reaparecen al morir
  • 7 colores: cyan, violeta, verde, rosa, ámbar, índigo, teal

Uso

import BubbleField from "@/components/BubbleField";

<div style={{ position: "relative", height: "100vh",
  background: "#06061a" }}>
  <BubbleField />
  <div style={{ position: "relative", zIndex: 2 }}>
    <h1>Tu contenido</h1>
  </div>
</div>