Orb
orbDisplays an animated shader orb with hover intensity and theme-aware color.
Usage
Basic usage
Orb fills the parent container (block h-full w-full), the size is determined by the outer square container; the default is blue and purple.
<div className="relative h-[280px] w-[280px] overflow-hidden rounded-2xl bg-bg">
<Orb />
</div>Hue rotation
hue Rotate in degrees YIQ Hue: Approximately 120 greenish, 60 amber, 300 mauve.
<Orb hue={120} />Forced hover state
forceHoverState permanent glow + distortion, suitable for demonstrations/screenshots; hoverIntensity adjusts distortion intensity.
<Orb forceHoverState hoverIntensity={0.4} />Size and Disable Rotation
The size is controlled by the outer container; rotateOnHover={false} turns off hover rotation.
<div className="relative h-40 w-40 overflow-hidden rounded-2xl bg-bg">
<Orb rotateOnHover={false} />
</div>When to Use
Use it as a luminous focal element in a hero, card, or empty state when hover should affect brightness, distortion, and rotation. The canvas fills its container, so the container determines the orb's size and should usually be square. For a full-surface liquid-metal background, use LiquidChrome; for a static dot or grid pattern, use DotPattern or GridPattern.
Import
import { Orb } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| hue | number | 0 | Hue rotation in degrees. 0 keeps the original blue-violet palette; positive values rotate the YIQ hue clockwise |
| hoverIntensity | number | 0.2 | Hover distortion strength (0–1), the larger the value, the more obvious the deformation will be |
| rotateOnHover | boolean | true | Whether to automatically rotate the light ball when hovering |
| forceHoverState | boolean | false | Force to stay active on hover (for demonstration/screenshot scenes) |
| className | string | — | ClassName passed through to canvas (normal) or fallback div (fallback) |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | reduced-motion / static fallback content without WebGL (centered on a radial gradient ball) |
Usage Guidelines
- WebGL components must be rendered on the client side; in the SSR environment, the first screen uses reduced-motion / radial gradient fallback without WebGL, and it is necessary to ensure that
fallbackor the default gradient ball is visible on the server. - Do not actively adjust
loseContextto poison the canvas during cleanup, otherwise React StrictMode dual-mount reuse of the same canvas will directly collapse and become blank - see [[webgl-canvas-loseContext-poisons-strictmode-remount]]. The correct approach is to mount a new canvas each time. - The canvas fills the outer container. The outer layer must have a certain width and height (square is best), otherwise the light sphere will collapse and become invisible.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-[280px] w-[280px] overflow-hidden rounded-2xl bg-bg">
<Orb
hue={0}
hoverIntensity={0.2}
rotateOnHover={true}
forceHoverState={false}
/>
</div>