Hero section with animated gradient orbs
Hero section with animated gradient orbs: eight colourful 3D orbs in a circle around your headline, a short line and a button. The orbs slowly swirl and react when people point at them. A bold first screen for a product launch or brand site. Use this AI template with Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, Cursor, or another coding tool.
About this vibe coding template
Want a hero section people remember? This one puts your headline, a short line and a button in the middle, with eight animated gradient orbs in a circle around them and soft rings behind. Each orb swirls slowly, and pointing at one makes it move faster and grow a little. It suits a product launch, a new collection, a brand site, a portfolio or an event page. Change the headline, the button and the orb colours, and it is yours. Want one orb on its own? Use the animated gradient orb template. More in our gradient orb 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: "Hero section with animated gradient orbs" 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 Hero section with animated gradient orbs 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 this hero section?
Your headline, a short line and a button in the middle, eight animated gradient orbs in a circle around them, and soft rings on a light background.
How do I change the headline and the orb colours?
Edit the headline, the line under it and the button text. Then ask your AI coding tool to change the orb colours to match your brand.
Do the orbs react to the mouse?
Yes. Point at an orb and it swirls faster and grows a little, then settles when you move away.
Will eight animated orbs slow down my page?
No. All eight are drawn together in one go, they pause when off screen, and they stay still for people who turn off motion.
Does the gradient orbs hero work on phones?
Yes. The circle of orbs shrinks to fit the screen and the headline and button stay readable and easy to tap.
Use this AI coding template for
- ·Hero section for a product or collection launch
- ·Landing page hero with animated gradient orbs
- ·Brand site or portfolio first screen with colourful 3D orbs
- ·Animated hero section to add 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
