Agentic Ball
Animated 3D orb with swirl and glow effects
agentic-ball-tw
Customize
Tweak the props liveAnimation
0.5
3
2
1.75
Color
4.3
0
2
1
Colors
#FFFFFF#FFFFFFProps
| Name | Type | Default | Description |
|---|---|---|---|
width | string | number | "100%" | Container width |
height | string | number | "100%" | Container height |
className | string | "" | Additional CSS classes |
children | React.ReactNode | undefined | Content rendered above the effect |
speed | number | 0.5 | Animation speed multiplier |
complexity | number | 3 | Number of warp iterations (1–8). Higher = more detail |
swirl | number | 2.0 | Amount of swirl rotation per layer |
zoom | number | 1.75 | Overall zoom into the sphere surface |
color | string | "#FFFFFF" | Primary tint color (hex) |
hueRotation | number | 4.3 | Hue rotation angle in radians (0 = natural amber, ~1 = green, ~2 = blue, ~3 = purple) |
saturation | number | 0 | Color saturation boost (0 = grayscale, 1 = normal, 2 = vivid) |
brightness | number | 2.0 | Brightness multiplier |
backgroundColor | string | "#000000" | Background color (hex) |
opacity | number | 1 | Master opacity (0–1) |
widthstring | numberContainer width
Default:
"100%"heightstring | numberContainer height
Default:
"100%"classNamestringAdditional CSS classes
Default:
""childrenReact.ReactNodeContent rendered above the effect
Default:
undefinedspeednumberAnimation speed multiplier
Default:
0.5complexitynumberNumber of warp iterations (1–8). Higher = more detail
Default:
3swirlnumberAmount of swirl rotation per layer
Default:
2.0zoomnumberOverall zoom into the sphere surface
Default:
1.75colorstringPrimary tint color (hex)
Default:
"#FFFFFF"hueRotationnumberHue rotation angle in radians (0 = natural amber, ~1 = green, ~2 = blue, ~3 = purple)
Default:
4.3saturationnumberColor saturation boost (0 = grayscale, 1 = normal, 2 = vivid)
Default:
0brightnessnumberBrightness multiplier
Default:
2.0backgroundColorstringBackground color (hex)
Default:
"#000000"opacitynumberMaster opacity (0–1)
Default:
1