Preferences

Vortex

Customize

Speed0.8

Scale2.4

Noise Intensity1.5

Blend0.5

Opacity1

Property	Type	Default	Description
`speed`	number	`0.8`	Controls the animation speed of the vortex rotation.
`scale`	number	`2.0`	Zoom level of the vortex pattern. Higher values zoom out, showing more of the spiral.
`colorA`	string	`"#1B0F33"`	Inner or dark base color of the vortex (hex).
`colorB`	string	`"#FF5DA2"`	Outer accent and glow color of the vortex (hex).
`noiseIntensity`	number	`1.5`	Controls the intensity of the film-grain noise effect overlaid on the vortex.
`blend`	number	`0.5`	Controls the blending of the vortex effect with the background using Aurora-style smoothstep alpha.
`opacity`	number	`1.0`	Overall opacity of the canvas. Set below 1 to reveal content or background beneath.
`bgColor`	string	`"#000000"`	Background color visible through blend and opacity. Also sets the wrapper background.
`className`	string	`""`	Additional Tailwind CSS classes applied to the wrapper div.

speed

Typenumber

Default0.8

Controls the animation speed of the vortex rotation.

scale

Typenumber

Default2.0

Zoom level of the vortex pattern. Higher values zoom out, showing more of the spiral.

colorA

Typestring

Default"#1B0F33"

Inner or dark base color of the vortex (hex).

colorB

Typestring

Default"#FF5DA2"

Outer accent and glow color of the vortex (hex).

noiseIntensity

Typenumber

Default1.5

Controls the intensity of the film-grain noise effect overlaid on the vortex.

blend

Typenumber

Default0.5

Controls the blending of the vortex effect with the background using Aurora-style smoothstep alpha.

opacity

Typenumber

Default1.0

Overall opacity of the canvas. Set below 1 to reveal content or background beneath.

bgColor

Typestring

Default"#000000"

Background color visible through blend and opacity. Also sets the wrapper background.

className

Typestring

Default""

Additional Tailwind CSS classes applied to the wrapper div.

@react-three/fiber 8.0.0three 0.160.0

Crafted withbyMohammad Tasin