Gooey Background
Dashboard with gooey, organic background effects and fluid animations.
Main Features of Gooey Background
How to Use Gooey Background in Next.js
Installation Guide for Gooey Background
Props
Customize the component with these 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. |
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
View Component
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
View Component
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.
View Component
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 in Modern UI Development
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.
Frequently Asked Questions
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.