Liquid Motion
Gooey filter creates liquid blob animation around text.
Main Features of Liquid Motion
How to Use Liquid Motion in Next.js
Installation Guide for Liquid Motion
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | FLUIDITY | Text to display |
backgroundColor | string | bg-zinc-950 | Background color of the component |
textColor | string | text-white | Color of the text |
textSize | string | text-8xl | Size of the text |
blob1Color | string | bg-indigo-500 | Color of the first blob |
blob1Size | string | w-32 h-32 | Size of the first blob |
blob2Color | string | bg-purple-500 | Color of the second blob |
blob2Size | string | w-24 h-24 | Size of the second blob |
blob1Duration | number | 5 | Animation duration for first blob |
blob2Duration | number | 7 | Animation duration for second blob |
blurAmount | number | 10 | Blur amount for the gooey filter |
filterId | string | goo | ID of the SVG filter |
className | string | Additional CSS classes |
Related Components
When to Use
Perfect for artistic web experiences, high-end portfolios, and Next.js applications that want a fluid, organic feel. Use this React component to create text that appears to be trapped in or interacting with a liquid 'lava lamp' background.
Best Practices
Optimize for performance in large-scale applications by keeping the `blurAmount` at a reasonable level (e.g., 10-15px). Follow React best practices by using high-contrast colors for the `textColor` against the moving blobs. Maintain scalable component architecture by scoping the SVG gooey filter correctly to avoid affecting other elements.
Why This Component Matters in Modern UI Development
Gooey filters and organic blob motion are at the cutting edge of modern UI design. This reusable React component provides a sophisticated implementation of complex SVG filters, adding visual depth and semantic authority to your real-world application architecture.
Frequently Asked Questions
QCan I change the blob colors?
Absolutely! The `blob1Color` and `blob2Color` props allow you to match the liquid motion to your brand's palette.
QIs the movement random?
The blobs follow a defined path with varying durations, creating an organic, non-repeating feel.
QDoes it work on Safari?
Yes, this implementation uses standards-compliant SVG filters that are widely supported across all modern browsers.