@ar-dacity/ardacity-aurora NPM

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

react ui components animation webgl aurora effect gradient ogl

1.0.2

7 months ago

1.0.1

7 months ago

1.0.0

7 months ago