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.
What is Reflect Shader?
Chromium-refraction WebGL shader field with pointer-following glow and chromatic band rotation.
Reflect Shader at a glance
- Category
- Interactive Backgrounds
- Pricing
- Free to use
- Libraries
- React
- Styling
- Tailwind CSS
- Configurable props
- 10
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Reflect Shader works
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. Pointer tracking is eased with lerp + dt so the glow follows smoothly without jumps; resize and DPR are handled with ResizeObserver + Math.min(devicePixelRatio, 2).
Technical information for Reflect Shader
| Category | Interactive Backgrounds |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Rendering | WebGL shaders, HTML canvas |
| State change | static chromatic field at rest to pointer-following glow bloom over animated refraction bands |
| Props | 10 configurable |
| Usage example | Included on this page |
What Reflect Shader requires
- WebGL 1 context
- requestAnimationFrame loop
- ResizeObserver
- devicePixelRatio scaling
- lerp pointer easing
How to use Reflect Shader
- Install React if your project does not already use it.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <ReflectShader /> in your page using that import path.
- Pass any of the 10 documented props to change colours, density, speed or behaviour.
Reflect Shader questions
What is Reflect Shader?
Chromium-refraction WebGL shader field with pointer-following glow and chromatic band rotation.
How does Reflect Shader work?
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. Pointer tracking is eased with lerp + dt so the glow follows smoothly without jumps; resize and DPR are handled with ResizeObserver + Math.min(devicePixelRatio, 2).
Which category does Reflect Shader belong to?
Reflect Shader is listed under Interactive Backgrounds in the UI HUB catalog. Interactive backgrounds react to cursor movement, scroll and pointer position, so the page feels alive instead of static. Every background here is built as a real React component with configurable props, so you can tune colours, density and speed rather than shipping a black box. Preview one in the browser, read the props, then copy the code straight into your project.
What does the background prop do in Reflect Shader?
CSS background colour behind the canvas. It defaults to "#020202".
What does the tint prop do in Reflect Shader?
RGB multiplier applied to the final colour. It defaults to "#ffffff".
Is Reflect Shader free to use?
Reflect Shader is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Reflect Shader use?
Reflect Shader uses React and is styled with Tailwind CSS.
What does Reflect Shader need to run?
Reflect Shader needs WebGL 1 context, requestAnimationFrame loop, ResizeObserver and devicePixelRatio scaling.