Canvas
Fluid Image Reveal
OGL fluid simulation used as a mask to reveal a second image beneath as you move the cursor.
Preview
Move your cursor to paint fluid that reveals a second image underneath.
Attributes
Installation
pnpm dlx motion-blocks add fluid-image-revealUsage
---import "@/components/motion-blocks/fluid-image-reveal-element.ts";--- <motion-fluid-image-reveal base-image="/images/before.jpg" reveal-image="/images/after.jpg" dissipation={0.96} pointer-size={0.005} blend-softness={0.22} class="w-full h-[500px]"/>API Reference
| Attribute | Type | Default |
|---|---|---|
base-image URL of the base image that is initially visible. | string | "" |
reveal-image URL of the image to reveal through the fluid mask. | string | "" |
dissipation How quickly the fluid density dissipates over time (lower = faster fade). | number | 0.96 |
pointer-size Size of the cursor's influence on the fluid simulation. | number | 0.005 |
velocity-dissipation How quickly fluid velocity dissipates (affects swirl duration). | number | 0.96 |
pressure-iterations Number of pressure solver iterations (higher = more accurate but slower). | number | 10 |
blend-softness Softness of the edge between the two images in the blend zone. | number | 0.22 |