AI Orb Animation
Make a glowing AI orb animation for your AI app, voice assistant or chatbot. 8 animated gradient orb shapes, from a single glowing orb to rings, ripples and spirals, in 5 colour sets. Download a PNG, a video loop or the embed code.
Other animated gradient styles
An AI orb is the glowing ball of colour that shows an AI assistant is listening, thinking or speaking. You see it in voice assistants, AI chat apps and AI product launches. These orbs are made of soft gradient bands, and the edge of each orb breaks into fine strokes like a sound wave, so the orb looks like it is listening. Pick a shape, pick your colours and it plays in real time.
Where to use it
Voice and chat assistants
Use Core as the listening state on your assistant screen. Turn Flow up while the AI is talking so the rays move more.
AI landing page heroes
Sunrise and Eclipse fill a wide hero with one large glowing shape and leave room for your headline above.
Loaders and empty states
Ripple and Vortex make calm loading and thinking states. Save them as a short video loop for native apps.
How to make an animated gradient background
- Pick a shape or style.
- Pick your colours.
- Set the speed, flow and grain until it feels right.
- Pick a size: hero, square, social post, story, banner or card.
- Download a PNG or video loop, or copy the embed code into your site, Framer, Webflow, Bolt, Lovable or Claude Code.
Frequently asked questions
What is an AI orb?
An AI orb is an animated, glowing gradient sphere used as the visual identity of an AI assistant. It shows states like listening, thinking and speaking, and has become a common pattern in AI apps and voice assistants.
How do I make an AI orb animation?
Pick a shape such as Core, Eclipse or Ripple, pick a colour set and set the speed and flow. Then download a video loop, a PNG or copy the embed code.
How do I add an AI orb to my app?
For a website or web app, paste the embed code where the orb should appear. For iOS or Android apps, download the video loop and play it on repeat.
Can I get an AI orb with a transparent background?
These orbs sit on their own soft gradient background. For a transparent PNG orb, use Orb halo or Ring on the glow gradient page and save a transparent PNG.
Can I change the orb colours?
Yes. Switch between Sand Sunset, Dusk, Tide, Ember and Bloom.
Narrow it down
Works with any vibe coding tool
Stripe-style describes the look. BrowserMoon is not affiliated with Stripe.