Gooey Background
Dashboard with gooey, organic background effects and fluid animations.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| gooColor | string | #3b82f6 | Color of gooey background elements. |
| viscosity | number | 1 | Viscosity of goo effect (0.5-2). |
| enableFluid | boolean | true | Enable fluid background animations. |
| animationSpeed | number | 1 | Speed of gooey animations. |
When to Use
Excellent for creative labs, experimental apps, and Next.js projects that want an organic 'Gooey' aesthetic. Use this dashboard template for an immersive experience with liquid background shapes, fluid motion, and organic UI containers.
Best Practices
Follow React best practices by pairing this with high-contrast foreground text. Maintain scalable component architecture by keeping the gooey shapes consistent. Optimize for performance by managed the SVG blob rendering.
Why This Component Matters
Gooey design (Metaballs) communicates creativity and structural freedom. This production-ready UI template helpsคุณ build an interface that feels alive and 'liquid', breaking the standard geometric rules of digital design.
FAQ
QHow does the 'Goo' work?
The component uses SVG filters to apply a 'blur and contrast' effect to multiple moving circles, creating the illusion of merging liquid drops.
QIs the viscosity adjustable?
Yes, the `viscosity` prop (0.5-2) controls how much the shapes 'stretch' and 'bond' when they pass near each other.
QCan I disable the fluid?
The `enableFluid` prop allows you to toggle the background motion off for a static, but still organic, gooey layout.
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.