Particle Tunnel
0
Used by 0Controls
Particle Tunnel
Flow particles along radial spokes toward a central black void with perspective depth, depth-based fading, and z-sorted overlap.
KEY FEATURES
- — Position the central black void with X/Y percentage placement
- — Set the solid void radius in pixels
- — Control the number of radial spokes with line density
- — Adjust depth spacing between particles via the gap control
- — Base particle size with perspective scaling and depth-based opacity fade
- — Toggle inward or outward flow direction toward the void
- — Tune continuous Z-axis flow with a speed control
- — Cycle a multi-color palette across spokes and depth
- — Back-to-front z-sorting for correct particle overlap
- — Responsive transparent canvas with device pixel ratio scaling
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
x
number
50
Horizontal position of the central void, from left (0%) to right (100%).
y
number
50
Vertical position of the central void, from top (0%) to bottom (100%).
radius
number
100
Pixel radius of the solid black central void the particles flow toward.
density
number
30
Number of radial spokes of particles; higher packs more lines around the tunnel.
gap
number
40
Depth spacing between particles along each spoke; larger values thin them out.
particleSize
number
10
Base size of each particle dot in pixels, scaled smaller with depth.
direction
enum
inside
Flow direction: inside pulls particles toward the void, outside pushes them away.
ANIMATION
PROP
TYPE
DEFAULT
DESCRIPTION
speed
number
2
How fast particles travel through the tunnel; higher is faster.
COLORS
PROP
TYPE
DEFAULT
DESCRIPTION
colors
array
[...]
List of fill colors cycled across the particles by spoke and depth.
