An endless spinning tunnel of particles
| 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
""discCountnumberNumber of elliptical rings forming the tunnel
50particleCountnumberTotal number of orbital particles
10000particleColorstringBase color for particles (hex format)
"#000000"discColorstringColor of the ring strokes (hex or rgba)
"rgba(200, 200, 200, 0.15)"discLineWidthnumberStroke width of tunnel rings
1particleSizenumberParticle radius in pixels
0.5depthnumberTunnel extension factor (0.5-2)
1.7spreadnumberHorizontal scale of the tunnel opening (0.5-2)
1speednumberAnimation velocity multiplier
0.05rotationDirectionnumberRotation direction: 1 for clockwise, -1 for counter-clockwise
1centerXnumberHorizontal focal point (0-1)
0.5centerYnumberVertical focal point (0-1)
0fadeInThresholdnumberScale threshold where rings begin appearing
0.021fadeOutThresholdnumberScale threshold where rings begin fading
0.4opacitynumberMaster opacity multiplier (0-1)
1enableCursorInteractionbooleanEnable mouse-based depth interaction
truecursorInfluencenumberMouse influence strength on tunnel depth (0-0.5)
0.1