Light Cables

Light Cables is an interactive background in the UI HUB interactive backgrounds collection. A custom WebGL fragment shader simulation rendering high-density fiber-optic light cables. Each cable is generated procedurally with FBM noise distortion, dynamic harmonic curvature, and pulsating energy packet waveforms.

The component is driven by 15 documented props (background, baseColor, accentColor, highlight, speed, hover and 9 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.

Implementation notes: WebGL; requestAnimationFrame loop; Pointer Events.

Preview the interactive background in the browser above, copy the source, and paste it into your project. Interactive Backgrounds components in UI HUB are grouped by category so you can compare effects side by side before choosing one.