The Gooey
Gooey blob stats section with liquid animations.
Main Features of The Gooey
How to Use The Gooey in Next.js
Installation Guide for The Gooey
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
stats | Array<{value: number, label: string}> | [] | Array of stat items with value and label. |
backgroundColor | string | #000000 | Background color (hex, rgb, or hsl). |
blobColor | string | #ffffff | Blob color. |
blobSize | number | 256 | Blob size in pixels. |
mainBlobSize | number | 256 | Main blob size in pixels. |
valueColor | string | #000000 | Value text color. |
labelColor | string | #000000 | Label text color. |
animationDuration | number | 4 | Animation duration in seconds. |
animationDelay | number | 0 | Animation delay in seconds. |
Related Components
When to Use
Ideal for creative labs, innovative agencies, and Next.js sites that want a playful, liquid aesthetic. Use this React component for a gooey-blob stats section where values reside inside shifting, organic liquid shapes.
Best Practices
Follow React best practices by using high-contrast colors for the blobs. Maintain consistent spacing within your design system by using it for focal point sections. Optimize for performance by managed the SVG gooey filters.
Why This Component Matters in Modern UI Development
Liquid animations create a sense of flow and organic growth. This production-ready UI component helpsคุณ build an interface that feels alive and experimental, improving user engagement through visual novelty.
Frequently Asked Questions
QHow is the 'gooey' effect made?
It uses a professional SVG contrast/blur filter to make standard circles appear as if they are merging like a liquid.
QCan I change the blob colors?
Yes, the `blobColor` prop allows you to set the primary liquid color, typically paired with a dark background for maximum contrast.
QDoes it support multiple stats?
The component is optimized for 3-5 key metrics to maintain the visual clarity of the liquid animations.