{"id":15617992,"url":"https://github.com/omnedia/ngx-ripple","last_synced_at":"2026-03-07T00:33:11.751Z","repository":{"id":253593604,"uuid":"843928334","full_name":"omnedia/ngx-ripple","owner":"omnedia","description":"A simple component library to create a container with an animated background.","archived":false,"fork":false,"pushed_at":"2025-11-29T17:11:36.000Z","size":10,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-12-01T20:53:28.245Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"SCSS","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-08-17T21:00:46.000Z","updated_at":"2025-11-29T17:10:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"51a52d65-fb42-4c2e-aed7-c0e85e1a850a","html_url":"https://github.com/omnedia/ngx-ripple","commit_stats":null,"previous_names":["omnedia/ngx-ripple"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/omnedia/ngx-ripple","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omnedia%2Fngx-ripple","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omnedia%2Fngx-ripple/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omnedia%2Fngx-ripple/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omnedia%2Fngx-ripple/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/omnedia","download_url":"https://codeload.github.com/omnedia/ngx-ripple/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omnedia%2Fngx-ripple/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30204154,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T19:07:06.838Z","status":"ssl_error","status_checked_at":"2026-03-06T18:57:34.882Z","response_time":250,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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.829Z","updated_at":"2026-03-07T00:33:11.695Z","avatar_url":"https://github.com/omnedia.png","language":"SCSS","funding_links":[],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[Oct 01, 2024](/content/2024/10/01/README.md)","Animations"],"readme":"# ngx-ripple\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-ripple` is an Angular library that provides a ripple animation effect for your Angular components. This component creates an expanding ripple effect with customizable color, border, and animation duration. Perfect for adding an interactive and engaging effect to backgrounds or containers in your application.\n\n## Features\n\n- Ripple animation with customizable colors and animation duration.\n- Easy to integrate as a standalone component.\n- Adds a dynamic ripple effect that can enhance the design of your application.\n\n## Installation\n\nInstall the library using npm:\n\n```bash\nnpm install @omnedia/ngx-ripple\n```\n\n## Usage\n\nImport the `NgxRippleComponent` in your Angular module or component:\n\n```typescript\nimport {NgxRippleComponent} from '@omnedia/ngx-ripple';\n\n@Component({\n  ...\n    imports:\n[\n  ...\n    NgxRippleComponent,\n],\n...\n})\n```\n\nUse the component in your template:\n\n```html\n\n\u003com-ripple\n  [rippleColor]=\"'rgba(0, 255, 255, 0.5)'\"\n  [rippleBorderColor]=\"'#00ffff'\"\n  [animationDuration]=\"'3s'\"\n  styleClass=\"custom-ripple-class\"\n\u003e\n  \u003cdiv\u003eYour content here\u003c/div\u003e\n\u003c/om-ripple\u003e\n```\n\n## API\n\n```html\n\n\u003com-ripple\n  [rippleColor]=\"rippleColor\"\n  [rippleBorderColor]=\"rippleBorderColor\"\n  [animationDuration]=\"animationDuration\"\n  styleClass=\"your-custom-class\"\n\u003e\n  \u003cng-content\u003e\u003c/ng-content\u003e\n\u003c/om-ripple\u003e\n```\n\n- rippleColor (optional): The color of the ripple effect. Accepts any valid CSS color value (e.g., 'rgba(0, 255, 255, 0.5)', '#00ffff').\n- rippleBorderColor (optional): The color of the ripple's border. Accepts any valid CSS color value.\n- animationDuration (optional): The duration of the ripple animation. Accepts any valid CSS time value (e.g., '3s', '5s').\n- styleClass (optional): A custom CSS class to apply to the component's wrapper element.\n\n## Example\n\n```html\n\n\u003com-ripple\n  [rippleColor]=\"'rgba(255, 105, 180, 0.6)'\"\n  [rippleBorderColor]=\"'#ff69b4'\"\n  [animationDuration]=\"'2s'\"\n  styleClass=\"ripple-background\"\n\u003e\n  \u003cdiv class=\"content\"\u003eThis is a ripple background effect\u003c/div\u003e\n\u003c/om-ripple\u003e\n```\n\nThis will create a ripple effect with pink-colored ripples and a custom border color that animates over a 2-second duration.\n\n## Styling\n\nTo customize the appearance of the ripple or the container, use the styleClass input to apply your own CSS classes.\n\n```css\n.ripple-background {\n  background-color: #000;\n  height: 100vh;\n  position: relative;\n}\n\n.content {\n  position: relative;\n  z-index: 1;\n  color: white;\n  text-align: center;\n  padding-top: 50px;\n}\n```\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-ripple","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fomnedia%2Fngx-ripple","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomnedia%2Fngx-ripple/lists"}