Animations & Motion
Liquid Displacement
SVG turbulence filter creates liquid morphing effect on scroll.
scrollrevealliquidsvgdisplacement
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 |