Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/omnedia/ngx-aurora
A simple component library to create a container with an aurora background.
https://github.com/omnedia/ngx-aurora
Last synced: 15 days ago
JSON representation
A simple component library to create a container with an aurora background.
- Host: GitHub
- URL: https://github.com/omnedia/ngx-aurora
- Owner: omnedia
- License: mit
- Created: 2024-08-24T19:20:39.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-09-25T08:56:25.000Z (3 months ago)
- Last Synced: 2024-11-18T09:29:17.452Z (25 days ago)
- Language: SCSS
- Size: 5.86 KB
- Stars: 6
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - ngx-aurora (⭐6) - 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. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-angular - ngx-aurora - 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. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-aurora - 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. (Table of contents / Third Party Components)
README
# 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
- Animated aurora light effect with customizable inversion.
- Supports two distinct animation styles.
- Easy to integrate as a standalone component.
## Installation
Install the library using npm:
```bash
npm install @omnedia/ngx-aurora
```
## Usage
Import the `NgxAuroraComponent` in your Angular module or component:
```typescript
import { NgxAuroraComponent } from '@omnedia/ngx-aurora';
@Component({
...
imports: [
...
NgxAuroraComponent,
],
...
})
```
Use the component in your template:
```html
Your Content Here
```
## How It Works
- Inversion and Animation Versions: The aurora effect can be inverted by using the invert input, and a different animation style can be applied using the versionTwo input.
- Global and Custom Styling: The .om-aurora container can be styled globally or with a custom styleClass. The component automatically applies the aurora background effect to its container, while maintaining the flexibility to style the container as needed.
## API
```html
```
- `invert` (optional): A boolean to toggle the inversion of the aurora effect. When true, the aurora colors are inverted. Defaults to false.
- `versionTwo` (optional): A boolean to toggle the second version of the aurora animation. When true, a different set of gradients is applied. Defaults to false.
- `styleClass` (optional): A custom CSS class to apply to the .om-aurora container for additional styling.
## Example
```html
Welcome to the Aurora Experience
```
This will create an aurora background with the second version of the animation and no inversion.
## Styling
`.om-aurora`
- This is the main container for the aurora effect. You can apply global or custom styles using the styleClass input. The .om-aurora class manages the overall background, ensuring that the effect covers the entire container.
### Example of Global and Custom Styling
In this example, the aurora container is customized with additional padding and background color:
```html
Aurora Background with Custom Styling
```
```css
.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.