https://github.com/luukdv/gooey-react

The gooey effect for React, used for shape blobbing / metaballs (0.5 KB) 🧽
https://github.com/luukdv/gooey-react

animation blobs effect goo gooey gooeyeffect graphics metaballs react reactjs shape svg svg-filter svg-filters

Last synced: 3 days ago
JSON representation

The gooey effect for React, used for shape blobbing / metaballs (0.5 KB) 🧽

• Host: GitHub
• URL: https://github.com/luukdv/gooey-react
• Owner: luukdv
• License: mit
• Created: 2020-03-28T08:13:38.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-02-03T08:19:38.000Z (almost 2 years ago)
• Last Synced: 2025-01-03T06:42:58.338Z (10 days ago)
• Topics: animation, blobs, effect, goo, gooey, gooeyeffect, graphics, metaballs, react, reactjs, shape, svg, svg-filter, svg-filters
• Language: TypeScript
• Homepage: https://gooey-react.netlify.app
• Size: 10.3 MB
• Stars: 657
• Watchers: 4
• Forks: 16
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license.md

Awesome Lists containing this project

• awesome-react-components - gooey-react - [demo/docs](https://gooey-react.netlify.app/) - The gooey effect for React, used for shape blobbing / metaballs. (UI Animation / Form Components)
• awesome-react - gooey-react - The gooey effect for React, used for shape blobbing / metaballs.  (UI Animation / GraphQL)
• awesome-list - gooey-react
• awesome-react-components - gooey-react - [demo/docs](https://gooey-react.netlify.app/) - The gooey effect for React, used for shape blobbing / metaballs. (UI Animation / Form Components)
• fucking-awesome-react-components - gooey-react - 🌎 [demo/docs](gooey-react.netlify.app/) - The gooey effect for React, used for shape blobbing / metaballs. (UI Animation / Form Components)
• awesome-react-components - gooey-react - [demo/docs](https://gooey-react.netlify.app/) - The gooey effect for React, used for shape blobbing / metaballs. (UI Animation / Form Components)
• awesome-react-components - gooey-react - [demo/docs](https://gooey-react.netlify.app/) - The gooey effect for React, used for shape blobbing / metaballs. (UI Animation / Form Components)

README

        


  





The gooey effect for React


The 'gooey effect' has been made popular by various (amazing) blogposts over the years. This tiny component makes it easy to use within React, 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 (~0.5 KB)

```sh

npm install gooey-react

```

## Usage

```jsx

import Goo from 'gooey-react'

 … 

```

You can put regular HTML elements inside `Goo`, but using an SVG is recommended for better browser support. Shape blobbing will be applied to everything within the component.

[Visit the website](https://gooey-react.netlify.app/) for full documentation, properties and examples.