BrowserMoon Hero templatesAI thinking orb hero section template

AI thinking orb hero section template

AI thinking orb hero section template with an interactive animated canvas orb and a state switcher. A dark hero for AI products that shows a 64px dot animation cycling through nine thinking states: working, searching, solving, listening, connecting, weaving, composing, breathing, and shaping. Use this AI template with Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, Cursor, or another coding tool.

Hero Animations Dark mode SaaS0 copies

About this vibe coding template

AI thinking orb hero section for a dark-themed AI product landing page. A 64px canvas orb animates in the center of the hero, and a row of pill buttons below it lets visitors switch between nine thinking states: working, searching, solving, listening, connecting, weaving, composing, breathing, and shaping. Each state has its own dot motion language drawn on a 2D canvas with depth sorting. Use it as the opening section of an AI assistant, chatbot, or model product page.

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

Common questions about this template

What does the state switcher do?

It is a row of pill buttons below the orb. Clicking one changes the orb animation to that state. The active pill is filled white with dark text, and the inactive pills are outlined.

Can I use this with a light background?

Yes. The drawOrb function takes a dark flag. Set it to false and the dot colours invert for a light background. Change the CSS background and text colours to match.

How large is the animation code?

The full nine-state orb engine is about 4 KB of plain JavaScript. It has no dependencies and runs on a single canvas element.

Does it work on mobile?

Yes. The canvas sizes itself for the device pixel ratio and the animation loop pauses when the page is not visible. The pill row wraps on narrow screens.