Ferrofluid Drag
An interactive image transition component. Applies a mathematical SVG Gooey filter to a grid of beads. On hover, the beads calculate their proximity to the cursor and violently tear outward like magnetic fluid, revealing the content underneath.
Last Modified:Aug 17, 2026
Install
CLI
ferrofluid-drag
Or install a specific demo variant:
ferrofluid-drag-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 | 12 | Number of columns in the fluid grid. |
rows | number | 12 | Number of rows in the fluid grid. |
duration | number | 1.2 | Duration of the tear explosion for each bead. |
staggerAmount | number | 0.4 | Total time allocated for the stagger wave to traverse the grid. |
ease | string | "power2.out" | GSAP easing string. |