← Biblioteca de Componentes

Aurora Borealis

Aurora boreal animada con 6 bandas sinusoidales en blend mode screen. Estrellas de fondo y movimiento orgánico fluido.

Vista previa — animación continua
Fullstack Developer & AI

Juan Camilo
Salazar Restrepo

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

Características

  • 6 bandas de aurora con colores y velocidades únicas
  • globalCompositeOperation: screen para mezcla de luz
  • Doble onda sinusoidal por banda para movimiento orgánico
  • Gradiente vertical de transparencia en cada banda
  • Estrellas generadas con densidad adaptada al canvas
  • Colores: verde, cyan, violeta, rosa, azul celeste

Uso

import AuroraBackground from "@/components/AuroraBackground";

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