Colorful light streaks raining down a glowing tunnel with a cursor light.
Colors, streaks and the cursor light are wired to the controls underneath. The tunnel is drawn in a WebGL fragment shader.
| Prop | Type | Default | Description |
|---|---|---|---|
colors | string[] | ['#A6C8FF', '#5227FF', '#FF9FFC'] | Array of hex colors (up to 8) used to tint the falling light streaks. Each streak is randomly but evenly assigned one of the colors; a single color makes the whole effect uniform. |
backgroundColor | string | '#0A29FF' | Hex color of the soft ambient glow behind the streaks. |
speed | number | 0.5 | Multiplier for how fast the light streaks fall. |
streakCount | number | 2 | Number of streak layers rendered per cell (1 to 16). Higher means busier. |
streakWidth | number | 1 | Thickness of each light streak. |
streakLength | number | 1 | Length of the glowing tail trailing each streak. |
glow | number | 1 | Overall brightness multiplier applied before tone mapping. |
density | number | 0.6 | Vertical frequency of streaks. Higher values pack more streaks into view. |
twinkle | number | 1 | Amount of per-streak brightness flicker. 0 means constant brightness. |
zoom | number | 3 | Field of view into the tunnel. Higher values zoom further in. |
backgroundGlow | number | 0.5 | Intensity of the ambient background glow. |
opacity | number | 1 | Overall alpha of the rendered canvas. |
mouseInteraction | boolean | true | Enables a soft light that follows the cursor and flares nearby streaks (no warping). |
mouseStrength | number | 0.5 | Intensity of the cursor light. |
mouseRadius | number | 1 | Falloff radius of the cursor light. |
mouseDampening | number | 0.15 | Easing time constant (seconds) for the cursor light to follow the pointer. 0 means immediate. |
lightMode | boolean | false | Renders the streaks over a white background instead of a transparent one. |
mixBlendMode | string | undefined | CSS mix-blend-mode applied to the container (e.g. 'screen', 'lighten'). |
paused | boolean | false | If true, stops rendering updates (freezing the current frame). |
dpr | number | window.devicePixelRatio | Overrides device pixel ratio; lower for performance, higher for sharpness. |
Keyboard shortcuts and ARIA behavior.