Goo
Gooey, organic landing page with fluid animations and slime-like effects.
Main Features of Goo
How to Use Goo in Next.js
Installation Guide for Goo
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
gooColor | string | #3b82f6 | Color of gooey elements. |
viscosity | number | 1 | Viscosity of goo effect (0.5-2). |
enableFluid | boolean | true | Enable fluid animations. |
animationSpeed | number | 1 | Speed of goo 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
Ideal for creative labs, experimental apps, and Next.js projects that want an organic 'Gooey' aesthetic. Use this full-page 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.