Gooey SVG Filter

npx shadcn@latest add "https://fancycomponents.dev/r/gooey-svg-filter.json"

Add the GooeySvgFilter component to your project, pass an id prop to the component (optional), then use the same id prop in the filter CSS property of the container you want to apply the filter to. High-level example:

<GooeySvgFilter id="gooey-filter" />
<div style={{ filter: "url(#gooey-filter)" }}>
 filter will be applied here
</div>

The filter is surprisingly simple. First, we apply a blur, which makes closer element to 'bleed' or blur into each other. Then, we just increase the contrast of our alpha channel with a color matrix. Lastly, we composite these two layers together with an atop operator, which will mask out anything outside the filter.

Please refer to this article by Lucas Bebber for more details. The entire component is derived from this work, and Lucas does a much better job explaining the filter than I do:).

Fluid interface

Rounded corners

The following example combines the PixelTrail component with this svg filter to create a rounded-at-all-corners effect. Unfortunately, the component doesn't support Safari, so you'll need to create a fallback for that.

DemoCode

Speaking things into existence

• Safari support for SVG filters is still very limited, so make sure to check compatibility, and create fallbacks (in the demos above, you can also see that the motion is disabled for Safari). For a fully supported solution, your best bet is to create a shader instead. Let us know if you would like to see a component for that!
• Keep a large enough space for the filter to avoid clipping.

The component is derived from this article by Lucas Bebber.