{"id":24919153,"url":"https://github.com/wadie/ngx-gooey","last_synced_at":"2025-04-09T16:42:38.982Z","repository":{"id":214327547,"uuid":"736261828","full_name":"wadie/ngx-gooey","owner":"wadie","description":"The gooey effect for Angular, used for shape blobbing / metaballs 🧽 ","archived":false,"fork":false,"pushed_at":"2025-02-11T17:45:21.000Z","size":5139,"stargazers_count":11,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-23T18:53:06.871Z","etag":null,"topics":["angular","angular-component","angular-library"],"latest_commit_sha":null,"homepage":"https://ngx-gooey.netlify.app","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/wadie.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}},"created_at":"2023-12-27T12:23:56.000Z","updated_at":"2025-02-04T07:40:40.000Z","dependencies_parsed_at":"2024-01-19T15:27:32.093Z","dependency_job_id":"b2396bea-b274-463d-8cb8-9148ff068aee","html_url":"https://github.com/wadie/ngx-gooey","commit_stats":null,"previous_names":["wadie/ngx-gooey"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wadie%2Fngx-gooey","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wadie%2Fngx-gooey/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wadie%2Fngx-gooey/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wadie%2Fngx-gooey/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wadie","download_url":"https://codeload.github.com/wadie/ngx-gooey/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248069187,"owners_count":21042635,"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","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":["angular","angular-component","angular-library"],"created_at":"2025-02-02T10:01:51.783Z","updated_at":"2025-04-09T16:42:38.952Z","avatar_url":"https://github.com/wadie.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Visual Effects"],"readme":"# [![npm version](http://img.shields.io/npm/v/ngx-gooey.svg)](https://npmjs.org/package/ngx-gooey) [![StackBlitz](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-gooey)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Preview\" src=\"docs/assets/preview.gif\" height=\"260\" width=\"260\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\u003ch1 align=\"center\"\u003eThe gooey effect for Angular\u003c/h1\u003e \n\u003c/p\u003e\nThe 'gooey effect' has been made popular by various (amazing) blogposts over the years. This tiny component makes it easy to use within Angular, and has improved the implementation. It's optimized to be as sharp/crisp as possible, since existing implementations can be a bit blurry. Safari support (which can be notorious, and is usually missing) has been added as well.\n\n## Installation\n\n```sh\nnpm install ngx-gooey\n```\n\n## Usage\n\nYou can either import into your NgModule:\n\n```js\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\n// Import the library\nimport { Gooey } from 'ngx-gooey';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    Gooey, // \u003c-- Add this line\n  ],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\nOr directly into a standalone component:\n\n```js\n  standalone: true,\n  imports: [Gooey],\n```\n\nThen use it in your template:\n\n```html\n\u003cngx-gooey\u003e … \u003c/ngx-gooey\u003e\n```\n\nYou can put regular HTML elements inside `ngx-gooey`, but using an SVG is recommended for better browser support. Shape blobbing will be applied to everything within the component.\n\n[Visit the website](https://ngx-gooey.netlify.app/) for full documentation, properties and examples.\n\n## Related\n\ninspired by [gooey-react](https://github.com/luukdv/gooey-react)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwadie%2Fngx-gooey","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwadie%2Fngx-gooey","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwadie%2Fngx-gooey/lists"}