BrowserMoon Animations templatesAnimated thinking orb gallery template for AI products

Animated thinking orb gallery template for AI products

Animated thinking orb gallery template showing nine canvas dot animations for AI product interfaces. Each orb state has its own motion language: tilted orbits, scanning globe, solving bands, rolling wave, live constellation, plaited strands, moving ribbon, breathing ring, and morphing outline. Use this AI template with Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, Cursor, or another coding tool.

Animations Cards Minimal SaaS0 copies

About this vibe coding template

Animated thinking orb gallery template for AI products. Nine hand-tuned canvas animations rendered as dots on a 64px avatar, each with its own motion language: working shows tilted orbits, searching sweeps a scanning globe, solving lights active bands, listening rolls a wave, connecting draws a live constellation, weaving braids strands, composing moves a ribbon, breathing pulses a ring, and shaping morphs between geometric outlines. Drop it into an AI product, a chatbot, or a dashboard to show what the model is doing while it thinks.

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 are the nine orb states?

Working (tilted orbits), searching (scanning globe), solving (active bands), listening (rolling wave), connecting (live constellation), weaving (plaited strands), composing (moving ribbon), breathing (breathing ring), and shaping (morphing outline). Each one maps to a different phase of what an AI model does while it processes a request.

How does the animation work?

Each orb is a canvas element drawing dots at 64px, scaled for the device pixel ratio. The dots are projected through a 3D rotation and sorted by depth before drawing, so front dots cover back dots. requestAnimationFrame drives the loop, and IntersectionObserver pauses any orb that scrolls out of view.

Can I use a single orb state instead of the gallery?

Yes. Each state is a self-contained function. Pull the one you need, give it a canvas, and it runs on its own. The gallery is a reference for choosing which motion fits your product.