Shader Reveal

A liquid cursor trail that reveals a second image

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.

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