Fluid Disintegration
An interactive liquid image transition component. Fragments an image into an SVG grid mapped with a gooey color matrix. On hover, the droplets calculate their proximity to the cursor and melt outward, revealing the content underneath.
Last Modified:Aug 17, 2026
Install
CLI
fluid-disintegration
Or install a specific demo variant:
fluid-disintegration-demo
Manual
1. Install Dependencies
Dependencies
2. Add Source Code
Props
| Prop | Type | Default | Description |
|---|---|---|---|
imageUrl | string | Required | The URL of the image to disintegrate. |
children | React.ReactNode | Required | The content to reveal underneath the image. |
rows | number | 12 | Number of rows in the fluid grid. |
columns | number | 12 | Number of columns in the fluid grid. |
duration | number | 0.8 | Duration of the individual droplet animation. |
staggerAmount | number | 0.6 | Total time allocated for the stagger wave to traverse the grid. |
rotationRange | number | 45 | Maximum randomized rotation applied to each droplet (in degrees). |
translationRange | number | 25 | Maximum randomized translation applied to each droplet (in pixels). |
ease | string | "sine.inOut" | GSAP easing string. |