The Gooey
Gooey blob stats section with liquid animations.
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. |
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
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.
FAQ
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.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.