Metallic Swirl

Metallic swirl shader background

metallic-swirl-tw

Customize

Tweak the props live

Animation

Speed1

Zoom6

Iterations12

Opacity1

Flow

Sample Gap0.095

Tangent Force0.75

Gradient Force0.15

Color Phases

Phase R3.11

Phase G3.11

Phase B3.11

Tone

Color Range0.75

Color Bias0.5

Brightness1

Background

#FFFFFF

Interaction

Cursor Interaction

Cursor Intensity1

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width
`height`	string \| number	`"100%"`	Container height
`className`	string	`""`	Additional CSS classes for styling
`children`	ReactNode	`undefined`	Content rendered above the effect
`speed`	number	`1`	Animation speed multiplier (0.01–3.0)
`zoom`	number	`6`	Zoom level of the pattern (1–30)
`iterations`	number	`12`	Number of flow iterations (1–12). More iterations = more complex swirls
`sampleGap`	number	`0.095`	Sampling epsilon for gradient computation (0.01–0.5)
`tangentForce`	number	`0.75`	Tangent flow strength per iteration (0–2)
`gradientForce`	number	`0.15`	Gradient push strength per iteration (0–1)
`colorPhaseR`	number	`3.11`	Color phase offset for red channel (0–6.28)
`colorPhaseG`	number	`3.11`	Color phase offset for green channel (0–6.28)
`colorPhaseB`	number	`3.11`	Color phase offset for blue channel (0–6.28)
`colorRange`	number	`0.75`	Color saturation range (0–1)
`colorBias`	number	`0.5`	Color midpoint brightness (0–1)
`brightness`	number	`1`	Overall brightness multiplier (0–3)
`backgroundColor`	string	`"#000000"`	Background color in hex
`opacity`	number	`1`	Master opacity (0–1)
`cursorInteraction`	boolean	`false`	Enable cursor interaction to intensify flow turbulence near pointer
`cursorIntensity`	number	`1`	Cursor effect strength multiplier (0–3)

widthstring | number

Container width

Default:"100%"

heightstring | number

Container height

Default:"100%"

classNamestring

Additional CSS classes for styling

Default:""

childrenReactNode

Content rendered above the effect

Default:undefined

speednumber

Animation speed multiplier (0.01–3.0)

Default:1

zoomnumber

Zoom level of the pattern (1–30)

Default:6

iterationsnumber

Number of flow iterations (1–12). More iterations = more complex swirls

Default:12

sampleGapnumber

Sampling epsilon for gradient computation (0.01–0.5)

Default:0.095

tangentForcenumber

Tangent flow strength per iteration (0–2)

Default:0.75

gradientForcenumber

Gradient push strength per iteration (0–1)

Default:0.15

colorPhaseRnumber

Color phase offset for red channel (0–6.28)

Default:3.11

colorPhaseGnumber

Color phase offset for green channel (0–6.28)

Default:3.11

colorPhaseBnumber

Color phase offset for blue channel (0–6.28)

Default:3.11

colorRangenumber

Color saturation range (0–1)

Default:0.75

colorBiasnumber

Color midpoint brightness (0–1)

Default:0.5

brightnessnumber

Overall brightness multiplier (0–3)

Default:1

backgroundColorstring

Background color in hex

Default:"#000000"

opacitynumber

Master opacity (0–1)

Default:1

cursorInteractionboolean

Enable cursor interaction to intensify flow turbulence near pointer

Default:false

cursorIntensitynumber

Cursor effect strength multiplier (0–3)

Default:1