Radial Liquid

Radial shader waves with distortion and various effects

radial-liquid-tw

Customize

Tweak the props live

Colors & Basic

Color 1

#ffffff

Color 2

#000000

Color 3

#000000

#0a0a0a

Cursor Interaction

Speed0.7x

Iterations4

Overall Opacity1

Position

Distortion & Wave

Distortion Type

Wave Size5

Edge Softness0

Scale1.1

Distortion Scale0.2

Chroma Shift0

Refraction

Strength25

Edge Width0.5

Wave Speed1.5

Wave Frequency10

Fresnel Intensity0.5

Edge Highlight0.5

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

Default:0.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)

Default:4

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

Position of the effect

Default:"bottom"

overallOpacitynumber

Master opacity control (0-1)

Default:1.0

waveSizenumber

Size of the wave distortion (0.1-5)

Default:5.0

edgeSoftnessnumber

Blur/soften ring edges (0-1)

Default:0.0

scalenumber

Overall scale/zoom (0.1-5)

Default:1.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)

Default:0.2

chromaShiftnumber

RGB color separation effect (0-1)

Default:0.0

enableCursorInteractionboolean

Enable cursor interaction for liquid movement

Default:true

refractionStrengthnumber

Refraction strength at ring edges (0-25)

Default:25.0

refractionEdgeWidthnumber

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

Default:0.5

refractionWaveSpeednumber

Speed of wavy refraction animation (0-5)

Default:1.5

refractionWaveFrequencynumber

Frequency of refraction waves (1-30)

Default:10.0

fresnelIntensitynumber

Fresnel intensity - edge glow effect (0-1)

Default:0.5

edgeHighlightnumber

Edge highlight brightness (0-1)

Default:0.5

classNamestring

Additional CSS classes

Default:""

childrenReact.ReactNode

Content to render on top of the effect

Default:undefined