Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gooey-react with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var gooeyReact = require("gooey-react")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gooey-react v1.0.1

The gooey effect for React

Preview

The gooey effect for React

The 'gooey effect' has been made popular by various (amazing) blogposts over the years. This tiny package makes it easy to use within React, and has improved the implementation as much as possible. 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)

npm install gooey-react

Usage

import Goo from 'gooey-react'

<Goo> … </Goo>

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 for full documentation, properties and examples.


Super Mario Sunshine

“What's this icky, paint-like goo?”

- Toad, 2002

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free