https://github.com/wadie/ngx-gooey
The gooey effect for Angular, used for shape blobbing / metaballs 🧽
https://github.com/wadie/ngx-gooey
angular angular-component angular-library
Last synced: 20 days ago
JSON representation
The gooey effect for Angular, used for shape blobbing / metaballs 🧽
- Host: GitHub
- URL: https://github.com/wadie/ngx-gooey
- Owner: wadie
- License: mit
- Created: 2023-12-27T12:23:56.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-11T17:45:21.000Z (3 months ago)
- Last Synced: 2025-03-23T18:53:06.871Z (about 1 month ago)
- Topics: angular, angular-component, angular-library
- Language: TypeScript
- Homepage: https://ngx-gooey.netlify.app
- Size: 4.9 MB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ngx-gooey - The gooey effect for Angular, used for shape blobbing / metaballs. (Table of contents / Third Party Components)
- awesome-angular - ngx-gooey - The gooey effect for Angular, used for shape blobbing / metaballs. (Table of contents / Third Party Components)
README
# [](https://npmjs.org/package/ngx-gooey) [](https://stackblitz.com/edit/ngx-gooey)
The gooey effect for Angular
The '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.
## Installation
```sh
npm install ngx-gooey
```
## Usage
You can either import into your NgModule:
```js
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import the library
import { Gooey } from 'ngx-gooey';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
Gooey, // <-- Add this line
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
Or directly into a standalone component:
```js
standalone: true,
imports: [Gooey],
```
Then use it in your template:
```html
…
```
You 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.
[Visit the website](https://ngx-gooey.netlify.app/) for full documentation, properties and examples.
## Related
inspired by [gooey-react](https://github.com/luukdv/gooey-react)