← Biblioteca de Componentes

Fireflies

90 luciérnagas con movimiento orgánico, trail luminoso y pulso individual. El cursor las dispersa al acercarse a menos de 90px.

Vista previa — acerca el cursor para dispersarlas
Fullstack Developer & AI

Juan Camilo
Salazar Restrepo

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

Características

  • 90 luciérnagas con velocidad y tamaño únicos
  • Movimiento orgánico por ángulo con deriva angular suave
  • Trail de hasta 12 puntos con fade-in progresivo
  • Glow radial con createRadialGradient
  • Pulso de opacidad individual con fase aleatoria
  • Dispersión al cursor dentro de 90px de radio
  • Trail + desvanecimiento de pantalla (fillRect alpha 0.18)

Uso

import Fireflies from "@/components/Fireflies";

// Fondo oscuro recomendado (verde noche o negro)
<div style={{ position: "relative", height: "100vh",
  background: "#010a05" }}>
  <Fireflies />
  <div style={{ position: "relative", zIndex: 2 }}>
    <h1 style={{ color: "#f0fdf4" }}>Tu contenido</h1>
  </div>
</div>