AnimatedOrb
proA decorative WebGL orb with transparent output and a static CSS fallback.
Installation
Add this component with the NateUI CLI.
Examples
Size
Colors
Animation Duration
API
| Prop | Description | Type | Default |
|---|---|---|---|
size | Outer width and height in CSS pixels. Invalid or negative values use 100; zero disables drawing work. | number | 100 |
scale | Visual scale, clamped to 0.1–3. The outer layout footprint remains unchanged. | number | 1 |
colors | Ordered palette of 1–8 opaque CSS color literals. Empty or omitted arrays use the source palette. Invalid entries or more than eight colors use the whole default palette. | readonly string[] | ['#e543fe', '#4cc2e9', '#000000'] |
glowIntensity | Glow strength, clamped to 0–5. | number | 1.45 |
colorSpread | Color spread into the ring interior, clamped to 0–4. | number | 1.4 |
distortion | Ring wobble amount, clamped to 0–3. | number | 0 |
highlightIntensity | Moving highlight strength, clamped to 0–4. | number | 1.4 |
animationDuration | Source base-motion rate multiplier 25 / animationDuration; default 20 seconds corresponds to rate 1.25. Positive values below 0.1 are clamped. Non-positive and non-finite values stop base motion. | number | 20 |
hoverStrength | Hover response strength, clamped to 0–5. | number | 0 |
hoverRotation | Rotate the orb while hovered or when hoverActive is set. | boolean | false |
hoverActive | Force the hover response without pointer tracking. | boolean | false |
followPointer | Track the pointer with the moving highlight. | boolean | false |
pulseOnClick | Add independent local waves on pointer down; waves expire after 1.2 seconds and the active pool holds at most eight. | boolean | true |
animateOnMount | Play a short reveal when mounted. | boolean | false |
opacity | Canvas opacity, clamped to 0–1. | number | 1 |
isPaused | Freeze the current frame. | boolean | false |
pixelRatio | Canvas pixel ratio, clamped to 0.5–2. Invalid or non-positive values use the device ratio capped at 2. | number | Automatic |
className | Additional class name on the outer element. | string | — |
style | Additional outer-element styles. size sets the final width and height. | React.CSSProperties | — |
Palette entries must be opaque CSS colors supported by the browser. Alpha-bearing colors, currentColor, and unresolved var(...) values are rejected; pass resolved colors when a parent theme changes. The canvas retains source alpha and premultiplication. The Light branch uses an exterior coverage mask to keep its internal white lighting from painting the page background; the Dark branch retains the source transparency and glow. Normal startup does not show the CSS approximation; it appears only when WebGL2 is unavailable or its context is lost.
The orb is decorative and hidden from assistive technology. It does not capture focus or cancel pointer propagation. Reduced motion, document hiding, offscreen state, and isPaused suspend animation work. There are no hue, background-color, tilt, or trail controls.