Shader Reveal

Interactive liquid image reveal

shader-reveal-tw

Customize

Tweak the props live

Interaction

Mouse Force50

Cursor Size250

Resolution0.5

Reveal Strength0.75

Reveal Softness1

Auto Demo

Auto Speed0.55

Auto Intensity2.2

Fluid Simulation

Viscous

Viscous Strength30

BFECC Advection

Boundary Bounce

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

frontImagestring

URL of the front (covering) image texture

Default:""

backImagestring

URL of the back (revealed) image texture

Default:""

mouseForcenumber

Strength of fluid impulse from mouse/touch interactions

Default:50

cursorSizenumber

Effective radius of the cursor interaction area

Default:250

resolutionnumber

Simulation resolution multiplier (0.25-1.0, lower = better performance)

Default:0.5

isViscousboolean

Enable viscosity in the fluid simulation

Default:true

viscousnumber

Viscosity strength (higher = thicker fluid)

Default:30

iterationsViscousnumber

Number of viscosity solver iterations (higher = more accurate)

Default:24

iterationsPoissonnumber

Number of pressure solver iterations (higher = more accurate)

Default:28

dtnumber

Time delta for simulation step (lower = more stable)

Default:0.014

BFECCboolean

Enable BFECC advection (higher quality, slightly slower)

Default:true

isBounceboolean

Enable boundary bounce behavior

Default:false

autoDemoboolean

Enable automatic motion when idle

Default:true

autoSpeednumber

Speed of automatic cursor movement

Default:0.55

autoIntensitynumber

Intensity multiplier for automatic interactions

Default:2.2

takeoverDurationnumber

Transition time when user takes control (seconds)

Default:0.25

autoResumeDelaynumber

Delay before auto-demo resumes after user interaction (ms)

Default:1200

autoRampDurationnumber

Ramp-up time when auto-demo resumes (seconds)

Default:0.6

revealStrengthnumber

How strongly the dye field controls the reveal effect

Default:0.75

revealSoftnessnumber

Softness of the reveal edge transition

Default:1

styleReact.CSSProperties

Inline styles applied to the container

Default:undefined

classNamestring

Additional CSS classes for the container

Default:""

Demo image by Alex Suprun @ unsplash.com, not part of the React Bits Pro offer.