Liquid Displacement
SVG turbulence filter creates liquid morphing effect on scroll.
Main Features of Liquid Displacement
How to Use Liquid Displacement in Next.js
Installation Guide for Liquid Displacement
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
image | string | https://images.unsplash.com/photo-1634152962476-4b8a00e1915c?q=80&w=1000&auto=format&fit=crop | Image URL |
backgroundColor | string | bg-neutral-950 | Background color of the component |
containerHeight | string | h-[150vh] | Height of the container |
imageWidth | string | w-[800px] | Width of the image |
imageHeight | string | h-[500px] | Height of the image |
text | string | LIQUEFY | Text displayed over the image |
textColor | string | text-white | Color of the text |
textSize | string | text-8xl | Size of the text |
filterId | string | liquidFilter | ID of the SVG filter |
frequencyRange | [number, number] | [0.05, 0] | Frequency range for turbulence |
scaleRange | [number, number] | [500, 0] | Scale range for displacement |
opacityRange | [number, number] | [0, 1] | Opacity range |
opacityProgressRange | [number, number] | [0, 0.5] | Opacity progress range |
scrollOffset | [string, string] | ["start end", "center center"] | Scroll offset configuration |
className | string | Additional CSS classes |
Related Components
When to Use
This production-ready React UI component is ideal for landing page hero sections, luxury brands, and artistic portfolios. Use this React component when building high-impact reveals for images that require a fluid, liquid-like interaction with user scrolling.
Best Practices
Maintain scalable component architecture by keeping the `containerHeight` large enough (e.g., 150vh) to allow for a smooth transition. Follow React best practices by using high-contrast text colors over the image. Optimize for performance in large-scale applications by being mindful of the SVG filter's complexity on low-end devices.
Why This Component Matters in Modern UI Development
Displacement effects are a signature of premium modern frontend development. This animated UI component helps you build immersive real-world application architecture that feels alive and responsive to every pixel of the user's scroll.
Frequently Asked Questions
QCan I use multiple images?
The current implementation is optimized for a single high-impact image reveal, but it can be adapted for a sequence of images with minor code changes.
QIs the liquid effect adjustable?
Yes, you can define the 'turbulence' via the `frequencyRange` and `scaleRange` props to make the effect subtle or extreme.
QDoes it work with SSR?
Yes, it is designed for Next.js and handles server-side rendering while ensuring smooth client-side animation.