Vortex
Infinitely spinning 3D tunnel with particles and depth effect
vortex-tw
Customize
Basic
50
10000
0.05
1
1
0.1
Appearance
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) |