Metaball Goo
Liquid blob simulation with SVG goo filter creating metaball effect.
Main Features of Metaball Goo
How to Use Metaball Goo in Next.js
Installation Guide for Metaball Goo
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | bg-zinc-950 | Background color of the component |
title | string | Metaball Goo | Title text displayed |
buttonText | string | Hover Me | Text on the hover button |
mainDamping | number | 30 | Main blob spring damping |
mainStiffness | number | 500 | Main blob spring stiffness |
lagDamping | number | 15 | Lag blob spring damping |
lagStiffness | number | 150 | Lag blob spring stiffness |
inactiveSize | number | 30 | Size of blobs when inactive |
activeSize | number | 100 | Size of blobs when active |
blob1Color | string | bg-indigo-500 | Color of the first blob |
blob2Color | string | bg-indigo-400 | Color of the second blob |
className | string | Additional CSS classes |
Related Components
When to Use
Excellent for creative agencies, liquid-themed branding, and experimental modern web applications. This production-ready React UI component is perfect for creating a 'gooey' interaction where the cursor appears to split or merge with other elements.
Best Practices
Maintain consistent spacing within your design system by ensuring the `inactiveSize` is small enough to not distract from the content. Follow React best practices by using the `lagStiffness` to create a beautiful, organic following motion. Optimize for performance by ensuring the SVG filter is only applied to the cursor container.
Why This Component Matters in Modern UI Development
Metaballs and gooey filters are a hallmark of organic modern UI design. This customizable UI component gives you a production-level implementation of complex SVG filters, helping you build a real-world application architecture that feels fluid and cohesive.
Frequently Asked Questions
QHow does the gooey effect work?
It uses a combination of blur and high-contrast color matrix filters in SVG to 'melt' separate circles into a single fluid shape.
QCan I add more blobs for a trail?
The current implementation uses two blobs for a clean 'meta-drag' effect, but the system can be extended to support a full trail of liquid segments.
QDoes it work on mobile?
Yes, it supports standard touch events, though the gooey effect is most striking when paired with precise mouse movement.