Shader Reveal
Interactive liquid image reveal
shader-reveal-tw
Customize
50
250
0.5
0.75
1
0.55
2.2
30
Props
| Name | Type | Default | Description |
|---|---|---|---|
| frontImage | string | "" | URL of the front (covering) image texture |
| backImage | string | "" | URL of the back (revealed) image texture |
| mouseForce | number | 50 | Strength of fluid impulse from mouse/touch interactions |
| cursorSize | number | 250 | Effective radius of the cursor interaction area |
| resolution | number | 0.5 | Simulation resolution multiplier (0.25-1.0, lower = better performance) |
| isViscous | boolean | true | Enable viscosity in the fluid simulation |
| viscous | number | 30 | Viscosity strength (higher = thicker fluid) |
| iterationsViscous | number | 24 | Number of viscosity solver iterations (higher = more accurate) |
| iterationsPoisson | number | 28 | Number of pressure solver iterations (higher = more accurate) |
| dt | number | 0.014 | Time delta for simulation step (lower = more stable) |
| BFECC | boolean | true | Enable BFECC advection (higher quality, slightly slower) |
| isBounce | boolean | false | Enable boundary bounce behavior |
| autoDemo | boolean | true | Enable automatic motion when idle |
| autoSpeed | number | 0.55 | Speed of automatic cursor movement |
| autoIntensity | number | 2.2 | Intensity multiplier for automatic interactions |
| takeoverDuration | number | 0.25 | Transition time when user takes control (seconds) |
| autoResumeDelay | number | 1200 | Delay before auto-demo resumes after user interaction (ms) |
| autoRampDuration | number | 0.6 | Ramp-up time when auto-demo resumes (seconds) |
| revealStrength | number | 0.75 | How strongly the dye field controls the reveal effect |
| revealSoftness | number | 1 | Softness of the reveal edge transition |
| style | React.CSSProperties | undefined | Inline styles applied to the container |
| className | string | "" | Additional CSS classes for the container |
Demo image by Alex Suprun @ unsplash.com, not part of the React Bits Pro offer.