{"id":15618000,"url":"https://github.com/omnedia/ngx-background-beams","last_synced_at":"2025-10-13T12:09:51.136Z","repository":{"id":257551863,"uuid":"852212785","full_name":"omnedia/ngx-background-beams","owner":"omnedia","description":"A simple component library to add multiple animated background beams.","archived":false,"fork":false,"pushed_at":"2025-06-10T12:19:02.000Z","size":22,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-13T12:04:31.188Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/omnedia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-09-04T12:26:24.000Z","updated_at":"2025-06-17T21:40:57.000Z","dependencies_parsed_at":"2025-04-15T02:44:17.885Z","dependency_job_id":"cc3e9570-179f-4ad2-b23c-b89314591311","html_url":"https://github.com/omnedia/ngx-background-beams","commit_stats":null,"previous_names":["omnedia/ngx-background-beams"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/omnedia/ngx-background-beams","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omnedia%2Fngx-background-beams","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omnedia%2Fngx-background-beams/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omnedia%2Fngx-background-beams/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omnedia%2Fngx-background-beams/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/omnedia","download_url":"https://codeload.github.com/omnedia/ngx-background-beams/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omnedia%2Fngx-background-beams/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279015053,"owners_count":26085643,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-03T08:00:53.991Z","updated_at":"2025-10-13T12:09:51.121Z","avatar_url":"https://github.com/omnedia.png","language":"TypeScript","funding_links":[],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[Oct 01, 2024](/content/2024/10/01/README.md)","Animations"],"readme":"# ngx-background-beams\n\n\u003ca href=\"https://ngxui.com\" target=\"_blank\" style=\"display: flex;gap: .5rem;align-items: center;cursor: pointer; padding: 0 0 0 0; height: fit-content;\"\u003e\n  \u003cimg src=\"https://ngxui.com/assets/img/ngxui-logo.png\" style=\"width: 64px;height: 64px;\"\u003e\n\u003c/a\u003e\n\nThis Library is part of the NGXUI ecosystem. \u003cbr\u003e\nView all available components at https://ngxui.com\n\n`@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.\n\n## Features\n\n- Dynamic Paths: Generates smooth, animated SVG path beams that are customizable in quantity and motion.\n- Customizable Gradients: Define up to 3 gradient colors to create unique color transitions for the beams.\n- Responsive \u0026 Interactive: Animations are tied to the viewport using an intersection observer, so they trigger only when visible.\n\n## Installation\n\nInstall the library using npm:\n\n```bash\nnpm install @omnedia/ngx-background-beams\n```\n\n## Usage\n\nImport the `NgxBackgroundBeamsComponent` in your Angular module or component:\n\n```typescript\nimport {NgxBackgroundBeamsComponent} from '@omnedia/ngx-background-beams';\n\n@Component({\n  ...\n    imports:\n[\n  ...\n    NgxBackgroundBeamsComponent,\n],\n...\n})\n```\n\nUse the component in your template:\n\n```html\n\n\u003com-background-beams\n  [gradientColorValues]=\"['#18CCFC', '#6344F5', '#AE48FF']\"\n  pathColor=\"rgba(255, 255, 255, 0.1)\"\n  [pathQuantity]=\"30\"\n\u003e\n  \u003cdiv class=\"your-content\"\u003e\n\n  \u003c/div\u003e\n\u003c/om-background-beams\u003e\n```\n\nThis creates a dynamic background with animated beams using the specified gradient colors and path count.\nExample with Content\n\n```html\n\n\u003com-background-beams\n  [gradientColorValues]=\"['#18CCFC', '#6344F5', '#AE48FF']\"\n  pathColor=\"rgba(255, 255, 255, 0.08)\"\n  [pathQuantity]=\"50\"\n\u003e\n  \u003cdiv class=\"content\"\u003e\n    \u003ch1\u003eWelcome to the Dynamic World of Beams!\u003c/h1\u003e\n    \u003cp\u003eBeautiful background animations for your Angular apps.\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/om-background-beams\u003e\n```\n\n## How It Works\n\n- 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.\n- Viewport Awareness: With an intersection observer, animations start when the component enters the viewport, ensuring performance is optimized.\n- Gradient Motion: The beams use a linear gradient that dynamically shifts over time, providing a mesmerizing, continuous motion effect.\n\n## API\n\n```html\n\n\u003com-background-beams\n  [gradientColorValues]=\"['#18CCFC', '#6344F5', '#AE48FF']\"\n  [pathColor]=\"'rgba(255, 255, 255, 0.08)'\"\n  [pathQuantity]=\"50\"\n\u003e\n  \u003cng-content\u003e\u003c/ng-content\u003e\n\u003c/om-background-beams\u003e\n```\n\n- `gradientColorValues` (optional):  Array of exactly 3 colors for the gradient. Must provide exactly 3 colors. Defaults to `['#18CCFC', '#6344F5', '#AE48FF']`.\n- `pathColor` (optional):  Defines the color of the path lines. Defaults to `rgba(255, 255, 255, 0.08)`.\n- `pathQuantity` (optional): Number of animated paths to generate. Defaults to `50`.\n\nExample\n\n```html\n\n\u003com-background-beams\n  [gradientColorValues]=\"['#FF5733', '#C70039', '#900C3F']\"\n  pathColor=\"rgba(255, 255, 255, 0.1)\"\n  [pathQuantity]=\"30\"\n\u003e\n  \u003cdiv class=\"example-content\"\u003e\n    \u003ch1\u003eStunning Visual Effects\u003c/h1\u003e\n  \u003c/div\u003e\n\u003c/om-background-beams\u003e\n```\n\nThis example draws 30 animated beams with a red-to-purple gradient, creating an eye-catching background for your content.\n\n## Performance Considerations\n\n- 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.\n- 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.\n\n## Contributing\n\nContributions are welcome. Please submit a pull request or open an issue to discuss your ideas.\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomnedia%2Fngx-background-beams","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fomnedia%2Fngx-background-beams","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomnedia%2Fngx-background-beams/lists"}