AURORA GRADIENT BACKGROUND
by Rehmat (Animated Creativity) - MIT License

1. HTML:   <section class="hero"><canvas data-aurora></canvas> ... </section>
2. CSS:    .hero { position: relative; min-height: 100vh; overflow: hidden; }
           .hero canvas { position: absolute; inset: 0; }
3. Script: <script src="aurora.js"></script>

Options on the canvas:
  data-aurora-colors="#0b0f2e,#7c5cff,#22d3ee,#ff5c8a"   four colours, first = base
  data-aurora-speed="1"      0 = still picture
  data-aurora-scale="1"      bigger = smaller clouds
  data-aurora-grain="0.05"   0 = no grain

From JavaScript:  var bg = AuroraBackground(canvas); bg.set('colors', [...]);

Open index.html to try the presets and sliders.

More free kits and custom work: https://animatedcreativity.com/
