Welcome to the Dynamic World of Beams!
Beautiful background animations for your Angular apps.
Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/omnedia/ngx-background-beams
A simple component library to add multiple animated background beams.
https://github.com/omnedia/ngx-background-beams
Last synced: about 1 month ago
JSON representation
A simple component library to add multiple animated background beams.
- Host: GitHub
- URL: https://github.com/omnedia/ngx-background-beams
- Owner: omnedia
- License: mit
- Created: 2024-09-04T12:26:24.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-09-17T11:07:45.000Z (4 months ago)
- Last Synced: 2024-11-12T19:43:48.357Z (about 2 months ago)
- Language: TypeScript
- Size: 14.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - ngx-background-beams (⭐0) - An Angular component that generates dynamic animated background beams with customizable gradients and motion paths. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-angular - ngx-background-beams - An Angular component that generates dynamic animated background beams with customizable gradients and motion paths. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-background-beams - An Angular component that generates dynamic animated background beams with customizable gradients and motion paths. (Table of contents / Third Party Components)
README
# 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
- Dynamic Paths: Generates smooth, animated SVG path beams that are customizable in quantity and motion.
- Customizable Gradients: Define up to 3 gradient colors to create unique color transitions for the beams.
- Responsive & Interactive: Animations are tied to the viewport using an intersection observer, so they trigger only when visible.
## Installation
Install the library using npm:
```bash
npm install @omnedia/ngx-background-beams
```
## Usage
Import the `NgxBackgroundBeamsComponent` in your Angular module or component:
```typescript
import {NgxBackgroundBeamsComponent} from '@omnedia/ngx-background-beams';
@Component({
...
imports:
[
...
NgxBackgroundBeamsComponent,
],
...
})
```
Use the component in your template:
```html
```
This creates a dynamic background with animated beams using the specified gradient colors and path count.
Example with Content
```html
```
## How It Works
- Path Generation: The component calculates multiple dynamic SVG paths, animating them over time. Each path has randomized motion, start and end points, giving a lively, fluid feel to the background.
- Viewport Awareness: With an intersection observer, animations start when the component enters the viewport, ensuring performance is optimized.
- Gradient Motion: The beams use a linear gradient that dynamically shifts over time, providing a mesmerizing, continuous motion effect.
## API
```html
```
- `gradientColorValues` (optional): Array of exactly 3 colors for the gradient. Must provide exactly 3 colors. Defaults to `['#18CCFC', '#6344F5', '#AE48FF']`.
- `pathColor` (optional): Defines the color of the path lines. Defaults to `rgba(255, 255, 255, 0.08)`.
- `pathQuantity` (optional): Number of animated paths to generate. Defaults to `50`.
Example
```html
Stunning Visual Effects
```
This example draws 30 animated beams with a red-to-purple gradient, creating an eye-catching background for your content.
## Performance Considerations
- Path Quantity: Higher numbers of paths can add complexity and visual density, but may affect performance on low-end devices or with large screen resolutions.
- Viewport Optimization: The component uses an intersection observer to ensure animations are only running when the component is visible on the screen, which helps save resources.
## 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.