Liquid Glass Orb
Liquid Glass Orb is an interactive background in the UI HUB interactive backgrounds collection. A raw-WebGL fragment shader paints the full 500x500 field (glass dome + top-lit halo) on a near-black #01020a stage.
The component is driven by 5 documented props (className, style, showHint, hintText, interactive), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Raw WebGL1 context (no library) with a vertex + fragment GLSL program; custom fragment shader with a 5-iteration warp loop and finite-difference field gradient; TRIANGLE_STRIP full-screen quad (attribute vec2 a).
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 Liquid Glass Orb?
A raw-WebGL liquid glass orb: five stacked warp layers bend a warped-noise refraction field into a churning iridescent glass dome under a top-lit blue halo, and the pointer drags a soft gaussian bump through the surface that ripples the refraction and steers the light.
Liquid Glass Orb at a glance
- Category
- Interactive Backgrounds
- Pricing
- Free to use
- Libraries
- React
- Styling
- Tailwind CSS
- Configurable props
- 5
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Liquid Glass Orb works
A raw-WebGL fragment shader paints the full 500x500 field (glass dome + top-lit halo) on a near-black #01020a stage. The field is a five-layer warp loop (warp() adds sin/cos offsets of amplitude 0.62/fi for fi = 1..5) fed into a two-term interference field; the dome samples that field on a sphere normal (n.xy * 2.7 + (0,0.3)) and derives a numeric gradient (finite difference e = 0.02) that tilts the shaded normal, so the surface churns like liquid. Shading mixes a dark-to-blue gradient-lit dome by pow(diff,1.25), adds a fresnel blue rim and an iridescent thin-film sheen (cos of the field phase + N.L) weighted by the gradient magnitude, plus a white specular (exponent 22). The animation clock runs a seamless 5.76s loop (uA = t/DUR * 2PI) driving the warp layers and a traveling ripple term. The 500x500 buffer is contain-fitted to its stage by a ResizeObserver (largest axis-aligned square that fits — never cropped or stretched), so the full orb is always visible inside any preview box. The pointer (mouse and touch, scoped to the canvas) sets a target bump centre (px-250)/157 and -(py-232)/157 in orb space, eased by 0.2 per frame, and a hover amount eased by 0.09 that grows a gaussian bump (exp(-dd*5)) in the surface, adds a rippling specular catch and brightens the halo and rim; on pointer leave the hover eases back to rest.
Technical information for Liquid Glass Orb
| Category | Interactive Backgrounds |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Rendering | HTML canvas, ResizeObserver, requestAnimationFrame |
| State change | a resting glass orb on near-black with a soft top-lit blue halo and slowly churning liquid refraction to the pointer pressed into the surface as a soft bump with a rippling specular catch and a brightened halo |
| Props | 5 configurable |
| Usage example | Not published yet |
What Liquid Glass Orb requires
- Raw WebGL1 context (no library) with a vertex + fragment GLSL program
- custom fragment shader with a 5-iteration warp loop and finite-difference field gradient
- TRIANGLE_STRIP full-screen quad (attribute vec2 a)
- requestAnimationFrame loop with a seamless 5.76s clock
- Pointer Events (mouse + touch: pointermove/pointerleave/pointercancel plus touchmove/touchend/touchcancel, passive) scoped to the component canvas with getBoundingClientRect-local coordinates
- linear easing of the bump centre (0.2) and hover amount (0.09) per frame
- ResizeObserver contain-fits the 500x500 buffer inside the stage (largest axis-aligned square, never cropped or stretched)
- graceful 2D-canvas radial-gradient fallback when WebGL is unavailable
- full teardown on unmount (cancel rAF, disconnect ResizeObserver, remove listeners, delete program, WEBGL_lose_context)
Liquid Glass Orb questions
What is Liquid Glass Orb?
A raw-WebGL liquid glass orb: five stacked warp layers bend a warped-noise refraction field into a churning iridescent glass dome under a top-lit blue halo, and the pointer drags a soft gaussian bump through the surface that ripples the refraction and steers the light.
How does Liquid Glass Orb work?
A raw-WebGL fragment shader paints the full 500x500 field (glass dome + top-lit halo) on a near-black #01020a stage. The field is a five-layer warp loop (warp() adds sin/cos offsets of amplitude 0.62/fi for fi = 1..5) fed into a two-term interference field; the dome samples that field on a sphere normal (n.xy * 2.7 + (0,0.3)) and derives a numeric gradient (finite difference e = 0.02) that tilts the shaded normal, so the surface churns like liquid. Shading mixes a dark-to-blue gradient-lit dome by pow(diff,1.25), adds a fresnel blue rim and an iridescent thin-film sheen (cos of the field phase + N.L) weighted by the gradient magnitude, plus a white specular (exponent 22). The animation clock runs a seamless 5.76s loop (uA = t/DUR * 2PI) driving the warp layers and a traveling ripple term. The 500x500 buffer is contain-fitted to its stage by a ResizeObserver (largest axis-aligned square that fits — never cropped or stretched), so the full orb is always visible inside any preview box. The pointer (mouse and touch, scoped to the canvas) sets a target bump centre (px-250)/157 and -(py-232)/157 in orb space, eased by 0.2 per frame, and a hover amount eased by 0.09 that grows a gaussian bump (exp(-dd*5)) in the surface, adds a rippling specular catch and brightens the halo and rim; on pointer leave the hover eases back to rest.
Which category does Liquid Glass Orb belong to?
Liquid Glass Orb 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 className prop do in Liquid Glass Orb?
Optional class applied to the root container. It defaults to "".
What does the style prop do in Liquid Glass Orb?
Optional inline styles for the root container. It defaults to {}.
Is Liquid Glass Orb free to use?
Liquid Glass Orb 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 Liquid Glass Orb use?
Liquid Glass Orb uses React and is styled with Tailwind CSS.
What does Liquid Glass Orb need to run?
Liquid Glass Orb needs Raw WebGL1 context (no library) with a vertex + fragment GLSL program, custom fragment shader with a 5-iteration warp loop and finite-difference field gradient, TRIANGLE_STRIP full-screen quad (attribute vec2 a) and requestAnimationFrame loop with a seamless 5.76s clock.