Liquid Displacement
SVG turbulence filter creates liquid morphing effect on scroll.
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 |
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
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.
FAQ
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.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.