Liquid Curtain
An interactive image transition component. Applies a heavily asymmetrical SVG Gooey filter to a grid of vertical strips. On hover, the strips calculate their proximity to the cursor and drip downward like thick paint or liquid, revealing the content underneath.
Last Modified:Aug 17, 2026
Install
CLI
liquid-curtain
Or install a specific demo variant:
liquid-curtain-demo
Manual
1. Install Dependencies
Dependencies
2. Add Source Code
Props
| Prop | Type | Default | Description |
|---|---|---|---|
imageUrl | string | Required | The URL of the image to display on top. |
children | React.ReactNode | Required | The content to reveal underneath the image. |
columns | number | 18 | Number of vertical strips/columns. Higher = stringier liquid. |
duration | number | 1.2 | Duration of the drip animation for each individual strip. |
staggerAmount | number | 0.6 | Total time allocated for the stagger wave to traverse the columns. |
ease | string | "power2.inOut" | GSAP easing string. |