← All components
Atmospheres / background
Light Tunnel
Pulses of light run along a radial cable tunnel with gentle pointer parallax.
Open in studio ↗PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Give the component a container with an explicit height. It fills that container.
- The included Demo.tsx recreates the complete preview; the main component contains only the background.
- Reduced motion renders a still frame. Hidden/offscreen instances stop requesting frames; pause and replay are supported.
- A static CSS atmosphere remains when graphics acceleration is unavailable. Canvas resolution is capped at 2048 pixels per dimension.
React 19WebGL2OGL 1.0.11
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
cableColor | string | #A855F7 | Cable color |
pulseColor | string | #A855F7 | Pulse color |
tunnelColor | string | #5227FF | Tunnel color |
speed | number | 0.1 | Motion speed |
flowDirection | outward|inward | outward | Flow direction |
cableCount | number | 20 | Cable count |
pulseSpeed | number | 2 | Pulse speed |
pulseLength | number | 0.28 | Pulse length |
thickness | number | 0.35 | Cable thickness |
sway | number | 0.5 | Sway |
glow | number | 1 | Glow |
tunnelOpacity | number | 0 | Tunnel opacity |
grainIntensity | number | 0.05 | Grain intensity |
grain | boolean | true | Film grain |
mouseInteraction | boolean | true | Pointer parallax |
mouseStrength | number | 0.1 | Pointer strength |
pulseBlend | number | 1 | Shader setting; see included source for its bounded range. |
pulseWidth | number | 1 | Shader setting; see included source for its bounded range. |
rimWidth | number | 0.15 | Shader setting; see included source for its bounded range. |
waviness | number | 0.3 | Shader setting; see included source for its bounded range. |
size | number | 1 | Shader setting; see included source for its bounded range. |
centerX | number | 0 | Shader setting; see included source for its bounded range. |
centerY | number | 0 | Shader setting; see included source for its bounded range. |
fadeNear | number | 0.5 | Shader setting; see included source for its bounded range. |
fadeFar | number | 2 | Shader setting; see included source for its bounded range. |
brightness | number | 1 | Shader setting; see included source for its bounded range. |
colorVariance | boolean | true | Shader setting; see included source for its bounded range. |
opacity | number | 1 | Shader setting; see included source for its bounded range. |
paused | boolean | false | Freeze the current frame. |
replayToken | number | 0 | Change this value to restart the animation. |
className | string | '' | Additional outer classes. |