- GPU shader
Plasma Orb
Shader mesh gradient on canvas, no Three.js. Organic distortion.
Smooth on the GPU, uses more battery
Open source React components
Animated orbs for AI assistants
Copy-paste orbs that show what your voice agent is doing, from listening to thinking to speaking.
20 of 20 orbs
Ordered lightest to heaviest. CSS orbs run on the compositor and are safe on any phone; GPU shaders and 3D WebGL look richest but cost more battery.
Customize & get code: Plasma Orb
- Lightest (CSS)
- Zero deps
- Tailwind
Equalizer Orb
Equalizer bars inside a disc that react to the audio level.
Compositor only, safe on any phone
- Lightest (CSS)
- Zero deps
- Tailwind
Halo Orb
A conic halo with orbital rings and a bright core that pulses.
Compositor only, safe on any phone
- Canvas
- Zero deps
Particles Orb
Hundreds of particles form a rotating 3D sphere that breathes with your voice and scatters into a ring while connecting.
Redraws every frame, moderate CPU
- GPU shader
- Zero deps
Siri Sheet
Glass sphere with a luminous sheet of light inside; the rim refracts and splits color. Raw WebGL, zero dependencies.
Smooth on the GPU, uses more battery
- Canvas
- Zero deps
Siri Wave Line
Overlapping fluorescent sine waves that flatten at rest and surge with the voice.
Redraws every frame, moderate CPU
- Lightest (CSS)
- Zero deps
- Tailwind
Pulse Orb
Core with expanding rings and a loading arc. Minimal and SSR-safe.
Compositor only, safe on any phone
- Lightest (CSS)
- Zero deps
- Tailwind
Glass Orb
Iridescent glassmorphism with a spinning conic aura and specular highlight.
Compositor only, safe on any phone
- Lightest (CSS)
- Zero deps
- Tailwind
Aurora Orb
Northern-lights veils that swirl and blur across a night sky.
Compositor only, safe on any phone
- SVG
- Zero deps
Gooey Orb
Liquid blob whose edges “boil” with SVG noise and displacement.
CPU filters, can be heavy on low-end phones
- Canvas
- Zero deps
Galaxy Orb
A glassy bubble holding a drifting starfield and nebula, with a specular glare and an iridescent, chromatic rim.
Redraws every frame, moderate CPU
- 3D WebGL
Nebula Orb
3D sphere with simplex-noise displacement and fresnel. The “voice mode”.
Heaviest, full 3D scene on the GPU
- Canvas
- Zero deps
Waveform Ring
A ring whose radius traces the live waveform: time-domain audio drawn in polar coordinates.
Redraws every frame, moderate CPU
- GPU shader
- Zero deps
Iridescent Flow
Single-pass fragment shader with flowing iridescent hues. Raw WebGL, zero dependencies.
Smooth on the GPU, uses more battery
- GPU shader
Mercury Orb
Paper liquid-metal shader: chrome ripples flowing around a molten core.
Smooth on the GPU, uses more battery
- Lightest (CSS)
- Zero deps
- Tailwind
Minimal Orb
A single quiet disc: just breath and color. As minimal as it gets.
Compositor only, safe on any phone
- GPU shader
Dither Orb
Retro ordered-dithering shader: a glowing sphere rendered in dancing dots.
Smooth on the GPU, uses more battery
- GPU shader
Grain Orb
Grainy gradient blob with film-noise texture that swells with the audio level.
Smooth on the GPU, uses more battery
- GPU shader
- Zero deps
Aura Field
Undulating ring of energy that springs open when it starts listening. Raw WebGL, zero dependencies.
Smooth on the GPU, uses more battery
- Lightest (CSS)
- Zero deps
Edge Glow
Siri-style ambient frame: a masked conic-gradient glow that wraps your own content instead of sitting in the middle.
Compositor only, safe on any phone