Reflect Shader

Reflect Shader is an interactive background in the UI HUB interactive backgrounds collection. A chromium-refraction WebGL shader field composed of 12 thin lines whose per-channel rotations produce shifting chromatic bands that bloom brighter where the pointer rests.

The component is driven by 10 documented props (background, tint, speed, brightness, thickness, chromatic and 4 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.

Implementation notes: WebGL 1 context; requestAnimationFrame loop; ResizeObserver.

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.