@ar-dacity/ardacity-aurora

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