← All components
Canvas & effects / component
Caustic Agent Orb
A glass sphere with flowing caustic light, five expressive states, and a warm orbit for action.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- The size prop controls the square stage; the circular core occupies 48% of it. Allow room around the stage for the acting arc and bloom.
- No audio access or service connection is required. Speaking and listening use a simulated amplitude envelope.
- Reduced motion renders a settled frame and redraws when state changes. If WebGL is unavailable, a static sphere and state label remain.
- Use paused to suspend motion. The playback clock resumes without jumping forward.
React 19WebGL 1CSS Modules
Chungus UI · Project-authorized adaptation. Public distribution terms pending release.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
state | 'idle' | 'listening' | 'thinking' | 'speaking' | 'acting' | idle | Expressive shader state. |
size | number | 320 | Square stage in pixels; clamped to 96–512. The sphere occupies 48% of its stage. |
speed | number | 1 | Motion multiplier from 0 to 2. |
intensity | number | 1 | Caustic intensity from 0 to 1.5. |
paused | boolean | false | Freeze and resume the owned animation clock. |
className | string | '' | Additional root class. |