ArDacity Aurora

A beautiful WebGL-powered aurora effect component for React applications.

Installation

npm install @ar-dacity/ardacity-aurora

Usage

After installation, the component will be automatically added to your project's components directory.

import { Aurora } from './components/ArDacityUi/Aurora';

function App() {
  return (
    <div style={{ width: '100%', height: '300px' }}>
      <Aurora
        colorStops={["#3A29FF", "#FF94B4", "#FF3232"]}
        blend={0.5}
        amplitude={1.0}
        speed={0.5}
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | colorStops | string[] | ["#00d8ff", "#7cff67", "#00d8ff"] | Array of color stops for the gradient | | amplitude | number | 1.0 | Controls the amplitude of the aurora effect | | blend | number | 0.5 | Controls the blend factor of the aurora effect | | speed | number | 1.0 | Controls the animation speed |

Requirements

This component requires the OGL library. It's listed as a peer dependency, so you'll need to install it in your project:

npm install ogl

How It Works

The Aurora component creates a beautiful animated gradient effect similar to the aurora borealis. It uses WebGL for rendering and animation, providing an efficient and smooth experience.

The component:

• Uses WebGL shaders for the gradient and animation
• Responds to container size changes
• Has customizable colors, amplitude, and speed

License

MIT