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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.