Home

Awesome

ngx-background-beams

@omnedia/ngx-background-beams is an Angular component that generates dynamic animated background beams with customizable gradients and motion paths. It creates visually captivating backgrounds, ideal for enhancing the aesthetics of your application with smooth, animated beams.

Features

Installation

Install the library using npm:

npm install @omnedia/ngx-background-beams

Usage

Import the NgxBackgroundBeamsComponent in your Angular module or component:

import {NgxBackgroundBeamsComponent} from '@omnedia/ngx-background-beams';

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

Use the component in your template:


<om-background-beams
  [gradientColorValues]="['#18CCFC', '#6344F5', '#AE48FF']"
  pathColor="rgba(255, 255, 255, 0.1)"
  [pathQuantity]="30"
>
  <div class="your-content">

  </div>
</om-background-beams>

This creates a dynamic background with animated beams using the specified gradient colors and path count. Example with Content


<om-background-beams
  [gradientColorValues]="['#18CCFC', '#6344F5', '#AE48FF']"
  pathColor="rgba(255, 255, 255, 0.08)"
  [pathQuantity]="50"
>
  <div class="content">
    <h1>Welcome to the Dynamic World of Beams!</h1>
    <p>Beautiful background animations for your Angular apps.</p>
  </div>
</om-background-beams>

How It Works

API


<om-background-beams
  [gradientColorValues]="['#18CCFC', '#6344F5', '#AE48FF']"
  [pathColor]="'rgba(255, 255, 255, 0.08)'"
  [pathQuantity]="50"
>
  <ng-content></ng-content>
</om-background-beams>

Example


<om-background-beams
  [gradientColorValues]="['#FF5733', '#C70039', '#900C3F']"
  pathColor="rgba(255, 255, 255, 0.1)"
  [pathQuantity]="30"
>
  <div class="example-content">
    <h1>Stunning Visual Effects</h1>
  </div>
</om-background-beams>

This example draws 30 animated beams with a red-to-purple gradient, creating an eye-catching background for your content.

Performance Considerations

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.