Radial Liquid

Radial shader waves with distortion and various effects

radial-liquid-tw

Customize

Color 1

Color 2

Color 3

Cursor Interaction

Speed

0.7x

Iterations

Overall Opacity

1.0

Wave Size

5.0

Edge Softness

0.0

Scale

1.1

Distortion Scale

0.2

Chroma Shift

0.00

Strength

25.0

Edge Width

0.50

Wave Speed

1.5

Wave Frequency

Fresnel Intensity

0.50

Edge Highlight

0.50

Props

Name	Type	Default	Description
`width`	number \| string	`"100%"`	Width of the component in pixels or CSS value
`height`	number \| string	`"100%"`	Height of the component in pixels or CSS value
`speed`	number	`0.7`	Animation speed multiplier
`color1`	string	`"#ffffff"`	First color in hex format
`color2`	string	`"#000000"`	Second color in hex format
`color3`	string	`"#000000"`	Third color in hex format
`backgroundColor`	string	`"#ffffff"`	Background color in hex format
`iterations`	number	`4`	Number of circle layers to render (1-5)
`position`	"center" \| "top" \| "bottom" \| "left" \| "right"	`"bottom"`	Position of the effect
`overallOpacity`	number	`1.0`	Master opacity control (0-1)
`waveSize`	number	`5.0`	Size of the wave distortion (0.1-5)
`edgeSoftness`	number	`0.0`	Blur/soften ring edges (0-1)
`scale`	number	`1.1`	Overall scale/zoom (0.1-5)
`quality`	"low" \| "medium" \| "high"	`"high"`	Rendering quality
`distortionType`	"lava" \| "plasma"	`"plasma"`	Type of distortion
`distortionScale`	number	`0.2`	Scale of distortion pattern (0.1-10)
`chromaShift`	number	`0.0`	RGB color separation effect (0-1)
`enableCursorInteraction`	boolean	`true`	Enable cursor interaction for liquid movement
`refractionStrength`	number	`25.0`	Refraction strength at ring edges (0-25)
`refractionEdgeWidth`	number	`0.5`	Width of the refraction zone at ring edges (0.01-0.5)
`refractionWaveSpeed`	number	`1.5`	Speed of wavy refraction animation (0-5)
`refractionWaveFrequency`	number	`10.0`	Frequency of refraction waves (1-30)
`fresnelIntensity`	number	`0.5`	Fresnel intensity - edge glow effect (0-1)
`edgeHighlight`	number	`0.5`	Edge highlight brightness (0-1)
`className`	string	`""`	Additional CSS classes
`children`	React.ReactNode	`undefined`	Content to render on top of the effect

widthnumber | string

Width of the component in pixels or CSS value

Default"100%"

heightnumber | string

Height of the component in pixels or CSS value

Default"100%"

speednumber

Animation speed multiplier

Default0.7

color1string

First color in hex format

Default"#ffffff"

color2string

Second color in hex format

Default"#000000"

color3string

Third color in hex format

Default"#000000"

backgroundColorstring

Background color in hex format

Default"#ffffff"

iterationsnumber

Number of circle layers to render (1-5)

Default4

position"center" | "top" | "bottom" | "left" | "right"

Position of the effect

Default"bottom"

overallOpacitynumber

Master opacity control (0-1)

Default1.0

waveSizenumber

Size of the wave distortion (0.1-5)

Default5.0

edgeSoftnessnumber

Blur/soften ring edges (0-1)

Default0.0

scalenumber

Overall scale/zoom (0.1-5)

Default1.1

quality"low" | "medium" | "high"

Rendering quality

Default"high"

distortionType"lava" | "plasma"

Type of distortion

Default"plasma"

distortionScalenumber

Scale of distortion pattern (0.1-10)

Default0.2

chromaShiftnumber

RGB color separation effect (0-1)

Default0.0

enableCursorInteractionboolean

Enable cursor interaction for liquid movement

Defaulttrue

refractionStrengthnumber

Refraction strength at ring edges (0-25)

Default25.0

refractionEdgeWidthnumber

Width of the refraction zone at ring edges (0.01-0.5)

Default0.5

refractionWaveSpeednumber

Speed of wavy refraction animation (0-5)

Default1.5

refractionWaveFrequencynumber

Frequency of refraction waves (1-30)

Default10.0

fresnelIntensitynumber

Fresnel intensity - edge glow effect (0-1)

Default0.5

edgeHighlightnumber

Edge highlight brightness (0-1)

Default0.5

classNamestring

Additional CSS classes

Default""

childrenReact.ReactNode

Content to render on top of the effect

Defaultundefined