Glass sphere gradient animation with ember glow
Glass sphere gradient animation: a frosted glass sphere on black with a slow glowing ember inside that breathes, drifts and opens into an arc of light. Switch between Ember, Original, Sunset and Pearl colours. A live WebGL gradient orb with no libraries. Use this AI template with Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, Cursor, or another coding tool.
About this vibe coding template
Glass sphere gradient animation for dark pages: a frosted glass sphere, bright at the rim and misty in the middle, with a glowing ember of colour inside. The ember breathes, drifts and slowly opens into an arc of light, then closes again, so the gradient orb feels alive without pulling attention from your copy. Four colour sets come built in: Ember, Original, Sunset and Pearl. It runs as one live WebGL shader with no libraries and holds still for visitors with reduced motion. Use it as a dark mode hero visual, a loading or thinking state for an AI assistant, or a calm brand moment on a launch page. See also the AI orb animation and our gradient sphere templates.
Build a full SaaS landing page or website with this template design
A SaaS landing page or website is multiple pages that need to feel like one professional site, so one well built coding template can set the standard for every page after it. Copy the template, paste it into Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, or Cursor, and send this alongside it.
Paste into Claude Code, Replit, Lovable, Bolt, or Cursor
Not sure this design fits?
Ask Mon, the AI design assistant, if the Glass sphere gradient animation with ember glow works for your product and how to adapt it.
Design guides: Linear website design · Why is my landing page not converting?
Common questions about this template
What is a glass sphere gradient?
A sphere that looks like frosted glass with soft colour glowing inside it. Here the glow is an ember that slowly breathes and opens into an arc of light, drawn live with WebGL.
Which colours does the glass sphere come in?
Ember (orange and rust), Original (lime, coral and magenta), Sunset (gold, red and plum) and Pearl (lavender). Pick one with the buttons under the sphere, or set your own colours in the code.
Is this the same as the AI orb?
It is a close relative. The AI orb page makes glowing orbs you can download as video. This glass sphere is a single live shader you paste into a page, with a frosted shell and an ember inside.
Can I use the glass sphere on a light background?
It is designed for black. On a light page, keep it inside a dark card or panel so the frosted rim still glows.
Does the glass sphere gradient work on mobile?
Yes. It sizes itself to the screen, caps the pixel ratio for battery life and stops moving when reduced motion is turned on.
Use this AI coding template for
- ·Glass sphere gradient as a dark hero visual
- ·Glowing gradient orb for an AI assistant or voice app
- ·Frosted glass sphere animation for a launch or waitlist page
- ·Ember glow sphere to vibe code with Claude Code, Bolt or Cursor
Works with every vibe coding tool
More from the Gradient sphere set
All 3 templates
More background templates
View all
More vibe coding animations templates
View all
Other templates you might like
