Metallic Swirl

Metallic swirl shader background

metallic-swirl-tw

Customize

Speed

1.00

Zoom

6.0

Iterations

Opacity

1.00

Sample Gap

0.095

Tangent Force

0.75

Gradient Force

0.15

Phase R

3.11

Phase G

3.11

Phase B

3.11

Color Range

0.75

Color Bias

0.50

Brightness

1.00

Background

Cursor Interaction

Cursor Intensity

1.0

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

Defaultundefined

speednumber

Animation speed multiplier (0.01–3.0)

Default1

zoomnumber

Zoom level of the pattern (1–30)

Default6

iterationsnumber

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

Default12

sampleGapnumber

Sampling epsilon for gradient computation (0.01–0.5)

Default0.095

tangentForcenumber

Tangent flow strength per iteration (0–2)

Default0.75

gradientForcenumber

Gradient push strength per iteration (0–1)

Default0.15

colorPhaseRnumber

Color phase offset for red channel (0–6.28)

Default3.11

colorPhaseGnumber

Color phase offset for green channel (0–6.28)

Default3.11

colorPhaseBnumber

Color phase offset for blue channel (0–6.28)

Default3.11

colorRangenumber

Color saturation range (0–1)

Default0.75

colorBiasnumber

Color midpoint brightness (0–1)

Default0.5

brightnessnumber

Overall brightness multiplier (0–3)

Default1

backgroundColorstring

Background color in hex

Default"#000000"

opacitynumber

Master opacity (0–1)

Default1

cursorInteractionboolean

Enable cursor interaction to intensify flow turbulence near pointer

Defaultfalse

cursorIntensitynumber

Cursor effect strength multiplier (0–3)

Default1