Gradient spheres hero section for landing pages
Gradient spheres hero section: eight animated 3D marble spheres on a ring around a bold headline, a short line and a button, on a soft light background with faint circle lines. Each gradient sphere swirls slowly and stirs faster when you point at it. One HTML file. Use this AI template with Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, Cursor, or another coding tool.
About this vibe coding template
Gradient spheres hero section for landing pages: a bold headline, a short line and a button in the middle, eight animated 3D gradient spheres on a ring around them, and faint circle lines on a soft light background. Each sphere is a live marbled gradient that turns slowly, and pointing at one stirs it faster and makes it grow a little. All eight spheres are drawn by one WebGL shader in a single canvas, so it stays light. Swap the headline for your product and it works as a launch page hero, a brand page, a portfolio opener or an event page. It pairs with the animated gradient sphere template, which gives each sphere on its own. More in 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
DESIGN.md for this template
The colours, type, spacing and components of this design as a DESIGN.md file, the open format for describing a design to AI agents. Put it in the root of your project and point Claude Code, Cursor or Codex to it, or import it into Google Stitch, so every new page matches.
DESIGN.md--- version: alpha name: "Gradient spheres hero section for landing pages" colors: primary: "#F5F5F5" on-primary: "#111111" neutral: "#0A0A0A" on-surface: "#F5F5F5" on-surface-muted: "#4A4A4A"
Not sure this design fits?
Ask Mon, the AI design assistant, if the Gradient spheres hero section for landing pages works for your product and how to adapt it.
Design guides: Stripe website design · Why is my landing page not converting?
Common questions about this template
What is in the gradient spheres hero?
A bold headline, a short line and a button in the centre, eight animated marble gradient spheres on a ring around them and faint circle lines, on a soft light background.
How do I change the headline and colours?
Edit the h1, the line under it and the button text. The sphere colours are a list of eight colour sets at the top of the script, each with a base, swirl, highlight and shadow colour.
Is the hero interactive?
Yes. Point at a sphere and its colours swirl faster and it grows slightly, then settles when you move away.
Will eight animated spheres be heavy?
No. All eight are drawn by one shader on one canvas, the pixel ratio is capped at 2 and the motion stops for visitors with reduced motion turned on.
Does the gradient spheres hero work on mobile?
Yes. The ring and the spheres scale to the screen, the headline shrinks to fit inside the ring, and the button stays tappable.
Use this AI coding template for
- ·Gradient spheres hero for a product or collection launch
- ·Landing page hero with a headline, a button and animated spheres
- ·Brand page or portfolio opener with 3D gradient spheres
- ·Animated hero section to vibe code with Lovable, Replit or Claude Code
Works with every vibe coding tool
More from the Gradient sphere set
All 3 templates
More animations templates
View all
More vibe coding hero templates
View all
Other templates you might like
