Skip to main content

​
Aurora

The Aurora component creates a stunning, animated aurora borealis effect using WebGL and the OGL library. It renders a fluid, gradient-based animation with customizable colors, amplitude, and blending effects.

​
Overview

Aurora uses shader-based rendering to create smooth, organic wave patterns that simulate the northern lights. The component is highly performant and responsive, automatically adjusting to container size changes.

​
Props

​
colorStops
string[]
default:"['#5227FF', '#7cff67', '#5227FF']"
An array of hex color codes that define the gradient color palette. Three colors are recommended for optimal visual effect.
​
amplitude
number
default:"1.0"
Controls the wave height intensity. Higher values create more dramatic wave patterns. Typical range: 0.5 to 2.0.
​
blend
number
default:"0.5"
Controls the smoothness of the aurora alpha blending. Higher values create softer edges.
​
time
number
Custom time value for animation. If not provided, uses automatic time progression.
​
speed
number
default:"1.0"
Animation speed multiplier. Values below 1.0 slow down the animation, values above 1.0 speed it up.

​
Usage

import Aurora from './components/Aurora/Aurora';

function App() {
  return (
    <div className="w-full h-screen">
      <Aurora />
    </div>
  );
}

​
Technical Details

​
WebGL Shaders

The component uses custom GLSL shaders:
  • Vertex Shader: Simple position-based rendering
  • Fragment Shader: Implements Simplex noise for organic wave patterns with color ramping

​
Performance Considerations

The Aurora component uses hardware-accelerated WebGL rendering for optimal performance. It automatically cleans up resources on unmount to prevent memory leaks.
  • Automatically resizes on window resize events
  • Uses requestAnimationFrame for smooth 60fps animation
  • Properly disposes of WebGL context on component unmount
  • Transparent background with proper alpha blending

​
Customization Examples

​
Blue-Green Ocean Theme

<Aurora 
  colorStops={['#0066CC', '#00E5FF', '#0066CC']}
  amplitude={1.2}
  blend={0.6}
  speed={0.7}
/>

​
Fire Theme

<Aurora 
  colorStops={['#FF4500', '#FFD700', '#FF4500']}
  amplitude={2.0}
  blend={0.4}
  speed={1.5}
/>

​
Subtle Background

<Aurora 
  colorStops={['#1a1a2e', '#16213e', '#1a1a2e']}
  amplitude={0.5}
  blend={0.8}
  speed={0.3}
/>

​
Browser Compatibility

This component requires WebGL support. Ensure your target browsers support WebGL or provide a fallback for older browsers.
Supported browsers:
  • Chrome 56+
  • Firefox 51+
  • Safari 11+
  • Edge 79+

​
Dependencies

The Aurora component requires the OGL library: 
npm install ogl