Home

Awesome

ngx-aurora

@omnedia/ngx-aurora is an Angular library that creates a mesmerizing aurora background effect. This component provides an animated, gradient-based light effect with customizable inversion and two different animation styles. It's a perfect addition for enhancing the visual aesthetics of your Angular application.

Features

Installation

Install the library using npm:

npm install @omnedia/ngx-aurora

Usage

Import the NgxAuroraComponent in your Angular module or component:

import { NgxAuroraComponent } from '@omnedia/ngx-aurora';

@Component({
  ...
  imports: [
    ...
    NgxAuroraComponent,
  ],
  ...
})

Use the component in your template:

<om-aurora [invert]="true" [versionTwo]="false" styleClass="custom-aurora">
  <h1>Your Content Here</h1>
</om-aurora>

How It Works

API

<om-aurora
  [invert]="invert"
  [versionTwo]="versionTwo"
  styleClass="your-custom-class"
>
  <ng-content></ng-content>
</om-aurora>

Example

<om-aurora [invert]="false" [versionTwo]="true" styleClass="custom-aurora-style">
  <div class="inner-content">
    <h2>Welcome to the Aurora Experience</h2>
  </div>
</om-aurora>

This will create an aurora background with the second version of the animation and no inversion.

Styling

.om-aurora

Example of Global and Custom Styling

In this example, the aurora container is customized with additional padding and background color:

<om-aurora styleClass="custom-aurora-background">
    <div class="inner-content">
        <h2>Aurora Background with Custom Styling</h2>
    </div>
</om-aurora>
.custom-aurora-background {
  background-color: #1e1e1e;
  padding: 2rem;
  border-radius: 10px;
}

.inner-content {
  text-align: center;
  color: white;
}

Contributing

Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas.

License

This project is licensed under the MIT License.