Vortex
Infinitely spinning 3D tunnel with particles and depth effect
vortex-tw
Customize
Tweak the props liveBasic
50
10000
0.05
1
1
Appearance
#1a1a1argba(50, 50, 50, 0.2)1
0.5
1.7
1
Position & Fading
0.5
0
0.021
0.4
Props
| 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