Vortex
Infinitely spinning 3D tunnel with particles and depth effect
vortex-tw
Customize
Disc Count
50
Particle Count
10000
Speed
0.05
Rotation Direction
1
Opacity
1.00
Particle Color
Disc Color
Disc Line Width
1.0
Particle Size
0.50
Depth
1.7
Spread
1.0
Center X
0.50
Center Y
0.00
Fade In Threshold
0.021
Fade Out Threshold
0.40
Props
18| Name | Type | Default | Description |
|---|---|---|---|
className | string | "" | Additional CSS classes for the wrapper element |
discCount | number | 50 | Number of elliptical rings forming the tunnel |
particleCount | number | 10000 | Total number of orbital particles |
particleColor | string | "#000000" | Base color for particles (hex format) |
discColor | string | "rgba(200, 200, 200, 0.15)" | Color of the ring strokes (hex or rgba) |
discLineWidth | number | 1 | Stroke width of tunnel rings |
particleSize | number | 0.5 | Particle radius in pixels |
depth | number | 1.7 | Tunnel extension factor (0.5-2) |
spread | number | 1 | Horizontal scale of the tunnel opening (0.5-2) |
speed | number | 0.05 | Animation velocity multiplier |
rotationDirection | number | 1 | Rotation direction: 1 for clockwise, -1 for counter-clockwise |
centerX | number | 0.5 | Horizontal focal point (0-1) |
centerY | number | 0 | Vertical focal point (0-1) |
fadeInThreshold | number | 0.021 | Scale threshold where rings begin appearing |
fadeOutThreshold | number | 0.4 | Scale threshold where rings begin fading |
opacity | number | 1 | Master opacity multiplier (0-1) |
enableCursorInteraction | boolean | true | Enable mouse-based depth interaction |
cursorInfluence | number | 0.1 | Mouse influence strength on tunnel depth (0-0.5) |
classNamestringAdditional CSS classes for the wrapper element
Default
""discCountnumberNumber of elliptical rings forming the tunnel
Default
50particleCountnumberTotal number of orbital particles
Default
10000particleColorstringBase color for particles (hex format)
Default
"#000000"discColorstringColor of the ring strokes (hex or rgba)
Default
"rgba(200, 200, 200, 0.15)"discLineWidthnumberStroke width of tunnel rings
Default
1particleSizenumberParticle radius in pixels
Default
0.5depthnumberTunnel extension factor (0.5-2)
Default
1.7spreadnumberHorizontal scale of the tunnel opening (0.5-2)
Default
1speednumberAnimation velocity multiplier
Default
0.05rotationDirectionnumberRotation direction: 1 for clockwise, -1 for counter-clockwise
Default
1centerXnumberHorizontal focal point (0-1)
Default
0.5centerYnumberVertical focal point (0-1)
Default
0fadeInThresholdnumberScale threshold where rings begin appearing
Default
0.021fadeOutThresholdnumberScale threshold where rings begin fading
Default
0.4opacitynumberMaster opacity multiplier (0-1)
Default
1enableCursorInteractionbooleanEnable mouse-based depth interaction
Default
truecursorInfluencenumberMouse influence strength on tunnel depth (0-0.5)
Default
0.1