Light Tunnel
A hardware-accelerated WebGL animated background component creating a customizable 3D fiber-optic tunnel of travelling light. Fully optimized with frame loop sleep cycles on viewport intersection or document tab blur to conserve GPU cycles.
Preview
Installation
Variations
Cyberpunk Grid
Uses neon cyan and pink color presets along with inward movement flow to create a matrix/holographic atmosphere.
Golden Sunset
Slow-moving golden cables combined with ambient sway create a smooth and calming sunset tunnel effect.
Component Concept
Vibe UI's Light Tunnel background renders a procedural 3D cylinder tunnel coordinate mapping. The fibers are drawn utilizing custom WebGL shaders linked with programmatic animation states. It exposes control parameters for individual lines, pulse animations, sway, depth fog, and coordinates for center offsets.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
cableColor | string | "#A855F7" | Base HEX color for the fiber optic lines |
pulseColor | string | "#A855F7" | HEX color for traveling light pulse packets |
tunnelColor | string | "#5227FF" | HEX color for the empty tunnel body space |
tunnelOpacity | number | 0 | Opacity of the internal dark space fill (0 to 1) |
speed | number | 0.1 | Speed factor of the global movement flow |
flowDirection | "inward" | "outward" | "outward" | Direction of the fiber scroll animation |
cableCount | number | 20 | Number of structural fiber lines inside the tunnel |
thickness | number | 0.35 | Physical width thickness scale of the fibers |
glow | number | 1.0 | Glow/bloom brightness intensity of the fiber rims |
sway | number | 0.5 | Rotational wave oscillation sway amplitude factor |
mouseInteraction | boolean | true | Enables tunnel direction offsets based on mouse moves |