Shader Reveal

Interactive liquid image reveal

shader-reveal-tw

Customize

Mouse Force

Cursor Size

250

Resolution

0.50

Reveal Strength

0.8

Reveal Softness

1.00

Auto Demo

Auto Speed

0.55

Auto Intensity

2.2

Viscous

Viscous Strength

BFECC AdvectionBoundary 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

Default50

cursorSizenumber

Effective radius of the cursor interaction area

Default250

resolutionnumber

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

Default0.5

isViscousboolean

Enable viscosity in the fluid simulation

Defaulttrue

viscousnumber

Viscosity strength (higher = thicker fluid)

Default30

iterationsViscousnumber

Number of viscosity solver iterations (higher = more accurate)

Default24

iterationsPoissonnumber

Number of pressure solver iterations (higher = more accurate)

Default28

dtnumber

Time delta for simulation step (lower = more stable)

Default0.014

BFECCboolean

Enable BFECC advection (higher quality, slightly slower)

Defaulttrue

isBounceboolean

Enable boundary bounce behavior

Defaultfalse

autoDemoboolean

Enable automatic motion when idle

Defaulttrue

autoSpeednumber

Speed of automatic cursor movement

Default0.55

autoIntensitynumber

Intensity multiplier for automatic interactions

Default2.2

takeoverDurationnumber

Transition time when user takes control (seconds)

Default0.25

autoResumeDelaynumber

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

Default1200

autoRampDurationnumber

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

Default0.6

revealStrengthnumber

How strongly the dye field controls the reveal effect

Default0.75

revealSoftnessnumber

Softness of the reveal edge transition

Default1

styleReact.CSSProperties

Inline styles applied to the container

Defaultundefined

classNamestring

Additional CSS classes for the container

Default""

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