Prop: composite

By default, the effect is applied to everything within the component. With this approach, the goo is at its most effective: both shapes and colors will merge together. However, certain things (like sharp edges) will end up being morphed or invisible.

There are two ways to solve this problem. The recommended way is to simply move those elements outside of the component and place them on top. In some cases, this isn't practical. The composite property can be used as an alternative. It will essentially duplicate everything inside the component, and place it on top without alterations.

<Goo></Goo>
<Goo composite></Goo>

As you can see, colors will not blend when you apply a composite.

<Goo></Goo>
<Goo composite></Goo>

On the other hand, a rectangle with still render as expected. As noted, this can also be achieved by moving the rectangle outside of the component and placing it on top manually.

gooey-react is a project by Luuk.